Blog do Éder

Início » Posts etiquetados como 'layout'

Arquivo da tag: layout

Android: Linear Layout

Bom, continuando, iremos falar sobre o Linear Layout. Conforme a documentação oficial, o linear layout alinha seus componentes (children) em uma única direção, vertical ou horizontal. Para esta série de tutoriais sobre gerenciadores de layout, iremos utilizar o mesmo projeto no android studio, chamado TestaLayouts. Crie um projeto com tudo em branco, sem activity, pra não encher de coisas que nos confundem em um primeiro momento, iremos fazer do zero do nosso jeito.

Com o projeto TestaLayouts criado, então crie um arquivo de layout. Para isso, altere a visualização para Android, se ainda não estiver. Então, em cima da pasta ‘res’, clique com o botão direito, new/xml/layout xml file. Nomeie ele para teste_linear_layout.xml, deixando o linear layout selecionado, clique em finish.

Este arquivo deve ter o seguinte conteúdo:

<?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"
    android:orientation="vertical">

    <Button
        android:layout_width="@dimen/manual"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:text="@string/btn1"
        android:layout_margin="@dimen/margem"
        android:padding="@dimen/padding" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:text="@string/btn2"
        android:layout_margin="@dimen/margem"
        android:padding="@dimen/padding" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:text="@string/btn3"
        android:layout_margin="@dimen/margem"
        android:padding="@dimen/padding" />

    <Button
        android:layout_width="@dimen/manual"
        android:layout_height="@dimen/manual"
        android:id="@+id/btn4"
        android:text="@string/btn4"
        android:layout_margin="@dimen/margem"
        android:padding="@dimen/padding"
        android:layout_gravity="right" />

    <ImageView
        android:layout_width="@dimen/img"
        android:layout_height="@dimen/img"
        android:src="@drawable/lightbulb58"
        android:layout_gravity="center" />

</LinearLayout>

Bom, aqui coloquei 4 buttons e um imageview. Adicionar componentes diretamente no xml é um tanto quanto simples. Você escolhe o que quer, e escreve ali. Se for arastando mouse, é mais fácil ainda. Vamos atentar para alguns detalhes.

A segunda linha do arquivo, onde diz LinearLayout, obviamente, nos diz que o gerenciador de layout é o LinearLayout. Logo após, temos as propriedades android:layout_width=”match_parent”, android:layout_height=”match_parent” e android:orientation=”vertical”. As duas primeiras, dizem para o compilador que este arquivo vai usar tudo que o pai tem disponível de espaço. Como não há pai, então vai usar a tela inteira do dispositivo. A última propriedade, está setada para vertical. Por padrão, o Android Studio omite esta propriedade, mas eu já tive problemas com ela, então aprendi a declarar para não me incomodar. Você pode se perguntar: ‘mas se eu deitar a tela, não vai funcionar?’. Vai. Vertical quer dizer que os elementos (children) serão colocados de forma vertical, um abaixo do outro. Se quiser, podes alterar para ‘horizontal’ esta propriedade, e veja o resultado. Serão colocados um ao lado do outro. Lembre de diminuir a propriedade layout_width para caber na tela lado a lado.

Já no botão 1 (btn1), temos a propriedade android:layout_width com valor “@dimen/manual”. Como falei no post anterior, não é aconselhável, embora o AndroidStudio permita, colocar valores explícitos diretamente no arquivo de layout. Se você precisar alterar, fica muito trabalhoso, pois com o avanço do projeto, o aplicativo vai ficando grande, imagina em cada arquivo de layout ter q alterar uma margem, por exemplo. Colocar os valores em “@dimen/manual” é ‘menos feio’, digamos assim. Abaixo, temos o arquivo “@dimen/manual”:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="margem">5dp</dimen>
    <dimen name="padding">5dp</dimen>
    <dimen name="manual">200dp</dimen>
    <dimen name="img">90dp</dimen>
</resources>

Aproveitando, temos o arquivo res/values/strings, com o seguinte conteúdo:

<resources>
    <string name="app_name">Testa Layouts</string>
    <string name="btn1">Botão 1</string>
    <string name="btn2">Botão 2</string>
    <string name="btn3">Botão 3</string>
    <string name="btn4">Botão 4</string>
</resources>

O arquivo strings, como podemos ver, armazena as strings do nosso app. Isto é útil, quando queremos mudar uma mesma string que aparece em mais de um lugar, ou ainda, traduzir para outro idioma nosso aplicativo. Ainda sobre o arquivo de layout, na ImageView, temos a propriedade android:src, onde definimos que imagem queremos carregar na tela. As imagens por padrão, ficam dentro de res/drawable. Nosso layout ficará assim:

Linear layout no android

Linear layout no android

Lembre-se, tens que ter as imagens de algum lugar, eu peguei de um site de ícones mesmo, era só pra ilustrar.

Agora, criamos uma classe para usar este arquivo de layout. Na verdade, será uma activity. Clique com o botão direito em app/java/nome_do_seu_pacote, new/java class. O nome dela será TestaLinearLayout.java, com o seguinte conteúdo:


package com.example.ederpaulo.testalayouts;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;

/**
 * Created by eder.paulo on 05/01/2016.
 */
public class TestaLinearLayout extends Activity implements View.OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.teste_linear_layout);
    }

    @Override
    public void onClick(View v) {

    }
}

No código acima, nada de mais, apenas nos mostra o layout que criamos, só que agora direto no dispositivo. Ah, quando criamos uma classe java no Android Studio, e queremos ‘transformá-la’ em uma activity, temos que extender a classe Activity. Já aproveitei e implementei a OnClickListener, que usaremos nos próximos artigos.

Acho que é isso, se não tem nada de errado vai funcionar, dúvidas postem nos coments.

Até mais.

Anúncios
%d blogueiros gostam disto: