Você está na página 1de 31

Interfaces gráficas I

Interfaces gráficas no Android


 Existem duas maneiras de se criar UIs no
Android
 Declarativa
 Usando XML para declarar como a UI deve ser
 Análogo a HTML
 Programática
 Escrita de código Java para criar e configurar a UI
 Análogo a Swing e AWT

As duas abordagens podem (devem!) ser usadas


em conjunto.
Abordagem declarativa

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/texto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World" />

</LinearLayout>
Abordagem declarativa
Abordagem programática

public class Main extends Activity implements OnClickListener{


@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button b = new Button(this);
LayoutParams params = new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
b.setText("Click to Add Another Button");
b.setTextColor(Color.BLACK);
b.setLayoutParams(params);
LinearLayout ll = (LinearLayout) findViewById(R.id.the_layout);
ll.addView(b);
}
}
INTRODUÇÃO A VIEWS E VIEWGROUPS

COMPONENTES GRÁFICOS
Views e ViewGroups
 A interface gráfica de uma aplicação Android é
construída usando objetos do tipo:
 View
 Unidade básica de componente visual
 Representa a classe base para qualquer componente visual
 Armazena propriedades sobre o “layout” e conteúdo de uma
área retangular específica da tela
 “Widgets” representam componentes visuais que podem
interagir com o usuário
 ViewGroup
 Representa um “container” para Views
 Representa a classe base para qualquer container de
componentes visuais
 Armazena propriedades sobre o “layout” de um grupo de
componentes
 Gerencia a aparência de seus componentes View
Views e ViewGroups
 A plataforma Android já possui diversos tipos de
Views e ViewGroups implementados
 android.view
 android.widgets
 O desenvolvedor pode criar seus próprios Views
e ViewGroups
 O desenvolvedor pode usar componentes
visuais de terceiros
Exemplos de Layout (ViewGroup)
Exemplos de widgets (View)
Usando layouts e widgets
Layouts em XML
 A maneira mais comum de definir a organização
da tela e hierarquia dos componentes visuais
(Views)

 XML oferece uma maneira simples de estruturar


o layout, assim como HTML
 Todo elemento no XML ou é um View ou um
ViewGroup
Layouts em XML
 Quando o Android carrega um layout em XML,
os objetos Java correspondentes na hierarquia
são instanciados e configurados

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android=“..." LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a TextView" />
<Button android:id="@+id/button"
TextView Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
Carregando o Layout XML
 O Android implementa uma forma de referenciar
recursos (Arquivos XML, de audio, video,
imagem, etc.) externos como se fossem
elementos Java
 O(s) arquivo(s) de layout são referenciados da
mesma maneira, através de uma classe gerada
automaticamente, chamada R
Carregando o Layout XML

public void onCreate(Bundle savedInstanceState) {


super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
Atributos dos views
 Todo elemento do XML suporta uma variedade
de atributos
 Alguns são específicos do tipo de view, enquanto
outros existem em todos os tipos de view

<Button
<ImageButton android:id="@+id/Button01"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:src="@drawable/skater" android:text="@string/hello"
android:id="@+id/ImageButton01" android:minHeight="92dp"
android:layout_toRightOf="@+id/Button01"> android:textSize="22dp"
</ImageButton> android:onClick="onMyButtonClick">
</Button>
Atributo ID
 Atributo ID  Identificação única associada à
view
 Quando o XML de layout é compilado é atribuído um
valor inteiro único à view

 No XML atribui-se nomes (strings) aos ids e por estes


nomes estes elementos podem ser referenciados no
código Java
 Caso não se deseje referenciar o elemento dentro do código
java, não é necessário definir um ID
@+id/my_button
<Button android:id="@+id/my_button"
android:layout_width="wrap_content" Indica ao SDK que deve-se adicionar no
android:layout_height="wrap_content"
android:text="@string/my_button_text"/> R.java mais um id relacionado a esse
botão e com nome igual a my_button
Acessando elementos pelo ID
Layout XML
<Button android:id="@+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/my_button_text"/>

Código Java que referencia o botão

Button myButton = (Button) findViewById(R.id.my_button);

myButton.setText("oi")
Atributos de Layout
 Cada tipo de layout disponibiliza atributos com
nome layout_something que são usados para que
seus filhos possam indicar preferências de
aparência
 Mas quem controla a aparência dos filhos sempre é o
layout onde estes estão inseridos
<Button android:id="@+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/my_button_text"/>

 Os atributos layout_width e layout_height


existem em todas as views
Atributos layout_width e
layout_height
 Representam respectivamente as preferências
de largura e altura da view
 Podem assumir os seguintes valores:
 Valor inteiro representando o tamanho exato
desejado para a view (unidades suportadas: px, dp,
sp, pt, in, mm)
 match_parent (ou fill_parent, deprecated a partir da
API 8)
 Preencher todo o espaço disponibilizado pelo pai
 wrap_content
 Dimensionar de modo a disponibilizar espaço suficiente para
o conteúdo interno dessa view (faz wrap se não couber na
tela)
Principais Layouts
LinearLayout
 Alinha todos os filhos em uma única direção (vertical ou
horizontal)
 orientation
 vertical ou horizontal

 Os elementos internos podem definir os seguintes atributos


 gravity
 top, bottom, left, right, ... (ver todos em: http://bit.ly/n5vzf2)
 padding
 Valor númerico para o espaço interno do componente (pode ser
definido para cada um dos lados ou para todos)
 layout_width e layout_height
 Semântica e comportamento já definidos anteriormente
 layout_weight
 Valor inteiro, que pode ser usado pra definir o tamanho relativo
(proporção) dos widgets
Exemplo de LinearLayout

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/texto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello World" />

</LinearLayout>
RelativeLayout
 Organiza seus filhos relacionando uns aos
outros, ou relacionando-os ao pai.
Propriedades do RelativeLayout
 Relacionadas ao container (recebem true
ou false)
 android:layout_alignParentTop
 android:layout_alignParentBottom

 android:layout_alignParentLeft

 android:layout_alignParentRight

 android:layout_centerHorizontal

 android:layout_centerVertical

 android:layout_centerInParent
Propriedades do RelativeLayout
 Relacionada a outros widgets
(Posisionamento relativo a outro widget )
 android:layout_above
 android:layout_below

 android:layout_toLeftOf

 android:layout_toRightOf
Propriedades do RelativeLayout
 Relacionada a outros widgets
(Alinhamento relativo a outro widget )
 android:layout_alignTop
 android:layout_alignBottom

 android:layout_alignLeft

 android:layout_alignRight

 android:layout_alignBaseline
Exemplo de RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<Button
android:id="@+id/botao_confirmar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="Confirmar" />

<Button
android:id="@+id/botao_cancelar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="@+id/botao_confirmar"
android:text="Cancelar" />

</RelativeLayout>
TableLayout
 Organiza os elementos como tabelas
(linhas e colunas)
 Similar a HTML

<TableRow>
<Button android:id="@+id/cancel"
android:text="Cancel" />

<Button android:id="@+id/ok“
android:text="OK" />
</TableRow>
Exemplo de TableLayout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/TableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >

<Button
android:id="@+id/botao_confirmar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Confirmar" />
<Button
android:id="@+id/botao_cancelar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancelar" />

</TableRow>

</TableLayout>
FIM