Tutorial Forca #8 - Layout Paisagem

Boa tarde!

O jogo está funcionando, certo? Bom... funcionar até funciona, mas o que acontece caso você vire o seu celular (Ctrl+F12 no emulador)? Ele desconfigura toda a tela, tentando manter o layout criado.
Para resolver isso temos duas saídas:

  • Podemos alterar o AndroidManifest.xml, alterando a tag actvity para conter a opção screenOrientation, onde não permitirá que o layout se ajuste às rotações do celular
<activity android:name=".GameActivity" android:screenOrientation="portrait" />
<activity android:name=".MainActivity" android:screenOrientation="portrait" />


  • Ou criar uma outra pasta de layout chamada layout-land, que armazenará os layouts feitos para o quando o celular ficar como landscape. (que é o caminho que escolhi para este tutorial)
Depois de criar a pasta citada acima (layout-land), é só copiar os arquivos que estão na pasta layout e colar lá dentro. Só isso? Infelizmente não...
É preciso deixar os arquivos conforme abaixo:
activity_game.xml 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <ImageView
        android:id="@+id/ivForca"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="10dp"
        android:contentDescription="@null"
        android:src="@drawable/forca_6" /v
    <LinearLayout
        android:id="@+id/lBotoes"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_toRightOf="@id/ivForca"
        android:layout_alignParentBottom="true" >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            <Button
                style="@style/letras"
                android:id="@+id/bA"
                android:text="A" />
            <Button
                style="@style/letras"
                android:id="@+id/bB"
                android:text="B" />
            <Button
                style="@style/letras"
                android:id="@+id/bC"
                android:text="C" />
            <Button
                style="@style/letras"
                android:id="@+id/bD"
                android:text="D" />
            <Button
                style="@style/letras"
                android:id="@+id/bE"
                android:text="E" />
            <Button
                style="@style/letras"
                android:id="@+id/bF"
                android:text="F" />
            <Button
                style="@style/letras"
                android:id="@+id/bG"
                android:text="G" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            <Button
                style="@style/letras"
                android:id="@+id/bH"
                android:text="H" />
            <Button
                style="@style/letras"
                android:id="@+id/bI"
                android:text="I" />
            <Button
                style="@style/letras"
                android:id="@+id/bJ"
                android:text="J" />
            <Button
                style="@style/letras"
                android:id="@+id/bK"
                android:text="K" />
            <Button
                style="@style/letras"
                android:id="@+id/bL"
                android:text="L" />
            <Button
                style="@style/letras"
                android:id="@+id/bM"
                android:text="M" />
            <Button
                style="@style/letras"
                android:id="@+id/bN"
                android:text="N" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            <Button
                style="@style/letras"
                android:id="@+id/bO"
                android:text="O" />
            <Button
                style="@style/letras"
                android:id="@+id/bP"
                android:text="P" />
            <Button
                style="@style/letras"
                android:id="@+id/bQ"
                android:text="Q" />
            <Button
                style="@style/letras"
                android:id="@+id/bR"
                android:text="R" />
            <Button
                style="@style/letras"
                android:id="@+id/bS"
                android:text="S" />
            <Button
                style="@style/letras"
                android:id="@+id/bT"
                android:text="T" />
            <Button
                style="@style/letras"
                android:id="@+id/bU"
                android:text="U" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="35dp"
            android:layout_marginRight="35dp"
            android:orientation="horizontal" >
            <Button
                style="@style/letras"
                android:id="@+id/bV"
                android:text="V" />
            <Button
                style="@style/letras"
                android:id="@+id/bW"
                android:text="W" />
            <Button
                style="@style/letras"
                android:id="@+id/bX"
                android:text="X" />
            <Button
                style="@style/letras"
                android:id="@+id/bY"
                android:text="Y" />
            <Button
                style="@style/letras"
                android:id="@+id/bZ"
                android:text="Z" />
        </LinearLayout>
    </LinearLayout>
    <TextView
        android:id="@+id/tvPalavra"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/lBotoes"
        android:layout_toRightOf="@id/ivForca"
        android:gravity="center"
        android:text="PALAVRA SECRETA" />
</RelativeLayout>
activity_main.xml 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:layout_margin="30dp"
        android:contentDescription="@null"
        android:src="@drawable/forca_0" />
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@id/imageView1"
        android:orientation="vertical" >
        <Button
            android:id="@+id/bSair"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="50dp"
            android:layout_marginLeft="85dp"
            android:layout_marginRight="85dp"
            android:text="Sair" />
        <Button
            android:id="@+id/bStart2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_above="@id/bSair"
            android:layout_marginLeft="35dp"
            android:layout_marginRight="35dp"
            android:text="2 Jogadores" />
        <Button
            android:id="@+id/bStart1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_above="@id/bStart2"
            android:layout_marginLeft="35dp"
            android:layout_marginRight="35dp"
            android:text="1 Jogador" />
        <ImageView
            android:id="@+id/ivConfig"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="20dp"
            android:contentDescription="@null"
            android:src="@drawable/config" />
    </RelativeLayout>
</RelativeLayout>
É isso! Agora, ao girar o celular, o layout vai se adaptar ao invés de desconfigurar. Dá um pouco de trabalho a mais que a primeira opção, mas também dá uma incrementada no visual da aplicação. Agora cabe a vocês escolherem o melhor caminho!



Clique aqui para ver as alterações de hoje, e para o projeto completo, clique aqui.

Sobre o autor

André Luís Batista Kunde
Técnico em Informática (2004), Bacharel em Administração com ênfase em Marketing (2009), buscando ser Engenheiro de Software, Trabalhando com software educacional e me aventurando pelo mundo da programação mobile.

3 comentários:

  1. Unknown28 de julho de 2014 às 15:41

    Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Unknown28 de julho de 2014 às 15:44

    Andre,

    Reparei que se vc troca a posição de vertical pra horizontal e vice e versa, o aplicativo altera a palavra escolhida.

    Existe alguma forma de resolver isso?!

    abraços,
    Leonardo

    ResponderExcluir

Assinar: Postar comentários (Atom)
Copyright © 2013 Aprendendo Android and Blogger Themes.