layout

Os quatro tipos básicos de layout

O layout é um contêiner usado para agrupar muitos controles. Ele pode ajustar a posição dos elementos internos seguindo uma regra de organização.

Assim conseguimos criar interfaces bonitas.

É possível aninhar layouts dentro de outros layouts.

Layout – LinearLayout (Layout Linear)

Layout linear, muito utilizado

Como o nome sugere, os controles contidos nele são dispostos sequencialmente em uma direção linear.

Com o atributo android:orientation, definimos a direção de disposição: vertical ou horizontal

Sintaxe básica

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
</LinearLayout>Code language: HTML, XML (xml)

Vamos ver na prática

Criamos um layout e alteramos a atividade principal para usar esse layout

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        />
</LinearLayout>Code language: HTML, XML (xml)

A atividade principal carrega esse layout

setContentView(R.layout.test_linear);

Se alterarmos para disposição horizontal

android:orientation=”horizontal”

Layout – Alinhamento dos filhos no LinearLayout

Definimos o alinhamento dos controles com android:layout_gravity.

Porém, quando o LinearLayout usa orientação horizontal, apenas os alinhamentos na direção vertical têm efeito. Nesse caso, o comprimento horizontal não é fixo.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:layout_gravity="center"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:layout_gravity="bottom"
        />
</LinearLayout>Code language: HTML, XML (xml)

Ou seja, quando o layout está no modo Horizontal, apenas os alinhamentos superior, central e inferior funcionam para os controles

Layout – Proporção de tela no LinearLayout

Se definirmos a largura dos controles filhos como 0dp

Podemos usar

o atributo android:layout_weight=”n” para definir a proporção ocupada pelo controle dentro do layout

Página 108

Além disso, podemos usar o weight em apenas um dos elementos

e deixar outro sem usar esse atributo

Assim, o outro elemento, como o botão no exemplo, mantém a largura original. Essa forma de escrever é muito útil

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="1"        />
    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="wrap_content"
        android:text="2"        />
    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="3"        />
</LinearLayout>Code language: HTML, XML (xml)

Botões com largura baseada no conteúdo, e o campo de edição ocupa o espaço restante

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <EditText
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"        />
</LinearLayout>Code language: HTML, XML (xml)

Layout – RelativeLayout (Layout Relativo)

RelativeLayout, também chamado de layout relativo

Ele permite posicionar os controles em qualquer lugar do layout usando posicionamento relativo.

Por isso, o RelativeLayout conta com muitos atributos.

Podemos configurar o controle com os atributos

android:layout_alignParentLeft

android:layout_alignParentTop

android:layout_alignParentRight

android:layout_alignParentBottom

android:layout_centerInParent — esses cinco atributos definem a posição do controle: esquerda, topo, direita, base e centro

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="1"        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="2"        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="3"        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="4"        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="5"        />
</RelativeLayout>Code language: HTML, XML (xml)

Definir posição em relação a outro controle

Usando android:layout_above=”@id/button3″

colocamos um controle acima de outro.

Com layout_below, definimos um controle abaixo de outro.

Com layout_toLeftOf, o controle fica à esquerda de outro elemento.

Com layout_toRightOf, o controle fica à direita de outro elemento.

Atenção: quando um controle depende da posição de outro, o controle de referência deve ser declarado antes no XML.

Vamos colocar o button1 no centro, declarando ele no início do XML, e os outros quatro botões serão posicionados com base nele

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="1"        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button1"
        android:layout_toLeftOf="@id/button1"
        android:text="2"        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button1"
        android:layout_toRightOf="@id/button1"
        android:text="3"        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1"
        android:layout_toRightOf="@id/button1"
        android:text="4"        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1"
        android:layout_toLeftOf="@id/button1"
        android:text="5"        />
</RelativeLayout>Code language: HTML, XML (xml)

Layout – FrameLayout (Layout de Moldura)

Mais simples que os dois layouts anteriores

Também tem menos casos de uso na prática.

Esse layout não tem regras de posicionamento flexíveis. Por padrão, todos os controles são colocados no canto superior esquerdo.

Vamos testar: adicionamos um TextView e um ImageView

Podemos usar o atributo layout_gravity para definir o alinhamento dentro do layout.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img1"    />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="foxdevelop.com"
        android:layout_gravity="right"
        />
</FrameLayout>Code language: HTML, XML (xml)

Layout extra – Layout de porcentagem

Os três layouts acima existem desde a versão 1.0 do Android.

E continuam sendo usados até hoje.

Mas apenas o LinearLayout aceita o layout_weight para definir o tamanho dos controles. Os outros dois não suportam esse recurso.

Por exemplo, é difícil fazer dois botões ocuparem metade da tela usando RelativeLayout.

Mas a partir do Android 7.0, foi adicionado o layout de porcentagem.

Esse layout é apenas uma extensão do RelativeLayout e do FrameLayout, com o prefixo Percent.

Ele é uma extensão dos dois layouts anteriores.

Precisamos adicionar a dependência do layout de porcentagem no build.gradle.

Abra o arquivo app/build.gradle

Adicione dentro de dependencies

compile ‘com.android.support:percent:27.1.1’

Ao modificar o build.gradle, o gradle faz a sincronização automaticamente e importa a biblioteca de porcentagem para o projeto, não precisamos fazer nada manualmente.

Depois alteramos o layout para

<android.support.percent.PercentFrameLayout

Depois configuramos nos controles filhos

app:layout_widthPercent=”50%”

app:layout_heightPercent=”50%”

Ao mesmo tempo, ainda podemos usar o atributo layout_gravity nos filhos

Controles personalizados e importação de arquivos de layout

Diagrama de herança dos controles e layouts

Todos os controles que usamos herdam direta ou indiretamente da classe View.

Todos os layouts herdam direta ou indiretamente da classe ViewGroup.

View é o componente básico de interface do Android.

Ele desenha uma área retangular na tela e responde aos eventos dessa região.

Importar layouts

Aplicativos de iPhone costumam ter um padrão: botão de voltar no canto esquerdo superior e título no canto superior direito.

Vamos reproduzir esse padrão.

Criar um botão e um TextView já é simples para nós.

Mas se todas as telas tiverem esse mesmo cabeçalho, teremos muito código repetido.

Podemos resolver isso usando a importação de layouts.

Criamos um arquivo justtitle.xml

Vamos criar um novo projeto TestCustom

Depois adicionamos um layout chamado justtitle.xml

Código abaixo

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#137e11"
    >
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:text="Voltar"
        android:textColor="#fff"
        android:background="@null"
        />
    <TextView
        android:id="@+id/textview"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_gravity="center"
        android:text="Título"
        android:textSize="18sp"
        android:textColor="#fff"
        android:background="@null"
        android:layout_margin="5dp"
        />
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="..."
        android:layout_margin="5dp"
        android:background="@null"
        />
</LinearLayout>Code language: HTML, XML (xml)

Depois alteramos a view da atividade principal com o código abaixo

Lembre-se de usar a tag include para importar o nosso justtitle.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <include layout="@layout/justtitle"/>
</LinearLayout>Code language: HTML, XML (xml)

Criamos uma BasicActivity e sobrescrevemos o método onCreate

Depois ocultamos a ActionBar original

package com.foxdevelop.www.testcustom;
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
public class BasicActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar!=null)
        {
            actionBar.hide();
        }
    }
}Code language: JavaScript (javascript)

Uso de controles de layout personalizados

Para implementar melhor a função de voltar

Não queremos escrever o código de retorno em cada atividade

Para isso, criamos nosso próprio Layout herdando de LinearLayout

Vamos chamá-lo de TitleLayout

No construtor do layout personalizado, podemos adicionar listeners de evento aos botões do layout

public class TitleLayout extends LinearLayout {
    public TitleLayout(Context context, AttributeSet attributes) {
        super(context,attributes);
        //Definir a view a ser usada
        LayoutInflater.from(context).inflate(R.layout.justtitle,this);
        //Registrar evento no botão de voltar
        Button button1 = (Button)findViewById(R.id.button1);
        button1.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                ((Activity)getContext()).finish(); //Voltar é fechar a atividade atual
            }
        });
        //Registrar evento no botão de opções
        Button button = (Button)findViewById(R.id.button);
        button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getContext(),"Abrir menu",Toast.LENGTH_LONG).show();
            }
        });
    }
}Code language: JavaScript (javascript)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
    <com.foxdevelop.www.testcustom.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>Code language: HTML, XML (xml)

layout