Scrool parcial no ListView – Android

1 Flares Twitter 0 Facebook 0 Google+ 1 LinkedIn 0 Filament.io 1 Flares ×

Olá pessoal, o assunto de hoje é como exibir uma lista de elementos que não ocupe a tela inteira, ou seja, existe um ou mais  elementos que são fixos como se fosse um cabeçalho na tela e abaixo uma lista com scrool, onde mesmo que você faça um scrool para baixo o cabeçalho não se mova. Para entender melhor, veja o resultado em uma tela que lista as cidades do Brasil que possui este Scrool parcial:

Note que o título, com o logo e nome do aplicativo, e também o campo e botão de busca,  ficaram fixos mas na lista das cidades é possível fazer scrool normalmente sem ocultar a parte superior. Para fazer isso é necessário criar dois arquivos de layout. Um para a tela inteira e outro para cada linha da lista. Depois no método construtor da tela vamos dizer para ele repetir o layout da linha varias vezes. Primeiro vamos para o layout da tela que chamaremos de lista_cidades.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <LinearLayout
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content">
	    <ImageView
   			android:text="logoTipo"
			android:layout_marginRight="10dip"
  			android:id="@+id/logo"
       		android:src="@drawable/cabecalho"
       		android:layout_width="300dp"
       		android:layout_height="70dp"/>
	</LinearLayout>
    <LinearLayout
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content">
	    <TextView
	        android:id="@+id_cidade/subTitulo"
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:text="  Selecione a cidade  "
	        android:gravity="center"/>

	</LinearLayout>
   	<LinearLayout
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content">
	    <EditText
	    	android:id="@+id_cidade/txtBusca"
	    	android:layout_gravity="top"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"
	    	android:layout_weight="1">
	    	<requestFocus />
	    </EditText>
	    <ImageButton
	    	android:src="@drawable/pesquisar"
	    	android:id="@+id_cidade/btBuscar"
	    	android:layout_width="wrap_content"
	    	android:layout_height="wrap_content"></ImageButton>
	</LinearLayout>

	<ListView
	    android:id="@+id_cidade/lista"
		android:layout_height="wrap_content"
		android:layout_width="wrap_content" />
</LinearLayout>

Note que na linha 50 foi colocado o elemento <ListView>. Atente para o id que for usado neste elemento pois ele será importante na classe de construção da lista. Agora vamos criar o layout de cada linha da lista. Veja abaixo o meu exemplo que chamaremos de cidade_row.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="horizontal"
	android:weightSum="1.0"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<LinearLayout
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:layout_weight="0.8" >
    	<ImageView
     		android:text="iconFavorite"
			android:layout_marginRight="5dp"
    		android:id="@+id_cidade/iconFavorite"
         	android:gravity="center"
         	android:layout_width="45dp"
         	android:layout_height="50dp"/>

    	<TextView
    		android:text="UF"
        	android:id="@+id_cidade/txtUF"
         	android:gravity="center_vertical"
        	android:layout_width="25dp"
	       	android:layout_height="50dp" />

    	<TextView
    		android:text="Nome"
        	android:id="@+id_cidade/txtNome"
         	android:gravity="center_vertical|left"
        	android:layout_width="220dp"
        	android:layout_height="50dp" /> 

    </LinearLayout>

	<LinearLayout
		android:orientation="horizontal"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:layout_weight="0.2">
    	<ImageView
     		android:text="iconSeleciona"
			android:layout_marginRight="10dp"
    		android:id="@+id_cidade/iconSeleciona"
	    	android:gravity="center"
	    	android:src="@drawable/seta_green"
        	android:layout_width="wrap_content"
        	android:layout_height="wrap_content">
        </ImageView>

	</LinearLayout>
</LinearLayout>

Agora no onCreate da sua Activity você carrega a lista das cidades que serão listadas e chama o adapter pra montar a lista:

	@Override
	public void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
        setContentView(R.layout.lista_cidades);

		listViewCities = (ListView) findViewById(R.id_cidade.lista);
		CidadeDAO cidade_dao = new CidadeDAO(getBaseContext());
		List<CidadeVO> listaCidades;

		listaCidades = cidade_dao.getAll();

		CidadeAdapter adapter = new CidadeAdapter(this, listaCidades);
		listViewCities.setAdapter(adapter);

	}

Por último o adapter que vai juntar tudo:

	@Override
	public View getView(int position, View convertView, final ViewGroup parent) {
		final CidadeVO cidade = lista.get(position);

		LayoutInflater layout = (LayoutInflater)ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		View v = layout.inflate(R.layout.cidade_row, null);

		ImageView iconFavorite = (ImageView) v.findViewById(R.id_cidade.iconFavorite);

		if (!cidade.getFavorita()){
			iconFavorite.setImageResource(R.drawable.favorito_off);
		}else{
			iconFavorite.setImageResource(R.drawable.favorito_on);
		}

		TextView txtUF = (TextView) v.findViewById(R.id_cidade.txtUF);
		txtUF.setText(cidade.getUF());

		TextView txtNome = (TextView) v.findViewById(R.id_cidade.txtNome);
		txtNome.setText(cidade.getNome());

		return v;
	}

Neste último veja as linhas 5 e 6 onde é informando qual o layout que será utilizado em cada linha da lista. Depois é só manipular os elementos da view e retornar. Neste exemplo o scrool ficará somente na lista de cidades e os demais elementos ficarão fixos na tela.