ViewPage Title Project – Swipey Tabs

Junto com a nova versão do Android, 4.1 Jelly Bean, o google disponibilizou a versão 9 do Android Support Library, a tentativa do google em manter a compatibilidade entre as versões do Android (E ainda dizem que existe fragmentação no Android 😛 ).

Entre as novidades e correções (vejo o changelog completo aqui), se destaca o PagerTabStrip, esta classe permite que você tenha uma funcionalidade  “swipey tabs“,  o mesmo utilizado na Google Play, por exemplo.

Para demostrar o uso, criei um pequeno exemplo da utilização.

Antes de tudo, temos que adcionar o .jar do support library no projeto.

Fazendo o Download – Support Libary

O .jar é fornecido como um pacote para download a partir do Android SDK Manager. Para instalar:

  1. Abra o Android SDK Manager.No Eclipse, você pode selecionar Window > Android SDK Manager. Ou, execute SDK Manager.exe dentro do diretório <sdk>/  (no Windows somente) ou android do diretório <sdk>/tools/ .
  2. No Extras, marque Android Support package e selecione Install.

Quando o download terminar, todos os arquivos (incluindo o código fontes, exemplos e o arquivo.jar) serão salvos no diretório <sdk>/extras/android/support/.

Configurando o Projeto – Support Libary

Para adcionar a biblioteca no seu projeto Android:

  1. No seu projeto, crie um diretório chamado libs  (no mesmo nível do src/res/, etc.)
  2. Localize o arquivo JAR da biblioteca que você quer usar e copie para o diretório libs/.Por exemplo, a biblioteca que da suporte ao nível 4 da API está localizado no diretório <sdk>/extras/android/support/v4/android-support-v4.jar.
  3. Adcione o JAR no path build do seu projeto: No Eclipse, com o botão direito no Package Explorer, selecione  Build Path > Add to Build Path.

Sua aplicação agora esta pronta para usar a biblioteca. Todas as APIs estão disponíveis no pacote android.support (por exemplo, android.support.v4).

Dica: Junto com a biblioteca, também é disponibilizado exemplos de uso e funcionalidades da API, os exemples estão no diretório <sdk>/extras/android/support/<version>/samples/.

ViewPage Title Project

Para demostrar o uso do PagerTabStrip e adcionar a funcionalidade do Swipey Tabs, criei o projeto ViewPage Title, para ver o código completo click aqui.

No layout adcione o elemento PagerTitleStrip, observe que o PagerTitleStrip é filho do ViewPager, para controlar o possicionamento é usado o parametro android:layout_gravity, sete para TOP ou BOTTOM, para possicionar os titulos acima ou embaixo do PageView, repectivamente.

activity_main.xml

<android.support.v4.view.ViewPager
   android:id=”@+id/viewpager”
   android:layout_width=”fill_parent”
   android:layout_height=”0dp”
   android:layout_weight=”1″>

           <android.support.v4.view.PagerTabStrip
              android:id=”@+id/pagerTabStrip”
              android:layout_gravity=”top”
             android:layout_width=”wrap_content”
            android:layout_height=”wrap_content”
           android:background=”##a22c2e”/>

</android.support.v4.view.ViewPager>

MainActivity.java

Abaixo o código do Activity, duas observações aqui: Primeiro, o pacote que se deve importar é o android.support.v4, observar o pacote que esta sendo importado, caso contrario a aplicação vai da erro quando rodar em dispositivos anteriores. Segundo, sua Activity deve extender de FragmentActivity e não de Activity para manter a compatibilidade da biblioteca.

package com.jansouza.viewpagetitle;

import android.os.Bundle;
import android.view.Menu;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

@Override
  public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

         mViewPager = (ViewPager) findViewById(R.id.viewpager);

         TitleAdapter titleAdapter = new TitleAdapter(getSupportFragmentManager());
         mViewPager.setAdapter(titleAdapter);
         mViewPager.setCurrentItem(0);
   }

TitleAdapter.java

Aqui é aonde mágica acontece …

O title de cada view é fornecido pelo método getPageTitle(int) do adapter que é passado para o ViewPage, no exemplo do projeto é denifido no array titles[].

private String titles[] = new String[]{“View1″,”View2″,”View3”};

@Override
 public CharSequence getPageTitle (int position){
     return titles[position];
 }

Abaixo o screenhot no Ice Cream Sandwich 4.0 e no 2.1 Eclair, para demonstrar a compatibilidade em versões antigas do Android.

Google Play

Instale pelo Google Play!
Android app on Google Play

http://play.google.com/store/apps/details?id=com.jansouza.viewpagetitle
Enjoy!