BLOG

Acompanhe a Mobits pelo RSS

FILTROS

Olá pessoal! Estive esses dias programando um projeto Android e me deparei com a necessidade de criar uma lista. Porém não era somente isso, na tela tinha também cabeçalho e rodapé. Até aí tudo bem, o problema é que a minha lista poderia ter nenhuma ou várias células, o que fazia com que a minha barra do rodapé não ficasse no final da tela, paradinha, independente do tamanho da lista.

Após algumas pesquisas na Internet (obrigada Google!), encontrei o truque que precisava para posicionar corretamente meu rodapé na tela. Como acredito que muitos precisarão fazer uma tela parecida, decidi compartilhar com vocês a solução.

Segue, abaixo, o código main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="center_horizontal"
android:layout_height="fill_parent" android:layout_width="fill_parent">

<LinearLayout android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:background="#550000"
    android:id="@+id/cabecalho" android:orientation="horizontal"
    android:padding="10dip">
    <TextView android:textColor="#FFFFFF" android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" android:layout_width="fill_parent"
        android:gravity="center_horizontal" android:id="@+id/texto1"
        android:text="Aqui fica o cabeçalho" />
</LinearLayout>

<LinearLayout android:layout_width="fill_parent"
    android:layout_alignParentBottom="true" android:gravity="center_vertical"
    android:background="#005500" android:layout_height="wrap_content"
    android:id="@+id/rodape" android:padding="10dip">
    <TextView android:textColor="#FFFFFF" android:layout_height="wrap_content"
        android:layout_width="fill_parent" android:gravity="center_horizontal"
        android:id="@+id/texto2" android:text="Aqui fica o rodapé" />
</LinearLayout>

<ListView android:id="@android:id/list" android:layout_width="fill_parent"
    android:layout_height="wrap_content" android:layout_above="@id/rodape"
    android:layout_below="@id/cabecalho" android:background="#000055" />

<TextView android:id="@android:id/empty" android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:layout_above="@id/rodape" 
                                       android:text="Lista vazia" />
</RelativeLayout>

Como vocês podem observar, o truque está em usar o RelativeLayout e incluir a ListView abaixo do cabeçalho e do rodapé no arquivo xml. Além disso, é preciso informar para a lista que ela será posicionada relativamente a ambos.

Dica: nesse exemplo, coloquei um TextView com android:id="@android:id/empty" para que apareça uma mensagem quando não há nada na lista. Isso é bem legal e um adianto!

Segue o código da Activity:

public class TestActivity extends ListActivity {

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

        String[] paises = getResources().getStringArray(R.array.paises_array);
        setListAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, paises));
    }
}

Após rodar o exemplo, a tela ficará da seguinte maneira:

Exemplo Cabeçalho/Rodapé

Espero que seja útil! Até :)

COMPARTILHE

4 COMENTÁRIOs

  1. Marcio 28/09/2011, 11:15

    pq vc não usou o getListView().addHeaderView(textView); ?

  2. Karin 28/09/2011, 11:15

    Olá Marcio, a proposta desse post era mostrar como fazer cabeçalho e rodapé independente do conteúdo a ser mostrado entre eles. No meu caso, eu precisava exibir uma lista. O que você sugeriu está correto, mas se não me engano, tanto o header quanto o footer rolam com a lista, né?! []'s

  3. Namor 28/12/2011, 17:52

    Olá, vocês ja usaram Action Bar? li que nativamente é apenas para o Android 3+ porém tem algumas customizadas como a Action Bar Sherlock, se sim, podia colocar umas dicas aqui. Obrigado.

  4. Karin 05/01/2012, 10:36

    Olá Namor, só utilizamos a Action Bar nativa em projetos com Android 3+. Se usarmos outras técnicas, colocamos aqui as dicas! Valeu :)

DEIXE UM COMENTÁRIO

If you can read this, you don't use a typical webbrowser that plays nice with CSS.
Please do not fill in anything here!