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!

Advertisements

5 thoughts on “ViewPage Title Project – Swipey Tabs

  1. Olá amigo, tem como você disponibilizar o código dessa simples aplicação?

    Não estou conseguindo incluir os títulos e não consigo controlar qual a página que o usuário está vizualizando no momento….

    Meu e-mail é bobcabeca@hotmail.com

    Grato pela atenção

  2. Jan eu segui o seu tutorial deu tudo certo, mas no caso coloquei um relativelayout dentro do fragmentlayout, e defini o setonclick mas quando testo o programa e toco no item ele força fechamento, pensei que por ser um relative seria o problema, então coloquei o setonclick num textview e ele força o fechamento tambem, eu declarei os itens como vc declarou os textviews tambem. alguma ideia cara do que pode ser?

      • Jan segue o logcat

        08-23 17:34:42.104: D/AndroidRuntime(550): Shutting down VM
        08-23 17:34:42.104: W/dalvikvm(550): threadid=1: thread exiting with uncaught exception (group=0x40015560)
        08-23 17:34:42.114: E/AndroidRuntime(550): FATAL EXCEPTION: main
        08-23 17:34:42.114: E/AndroidRuntime(550): java.lang.NullPointerException
        08-23 17:34:42.114: E/AndroidRuntime(550): at com.android.internal.app.AlertController$AlertParams.(AlertController.java:742)
        08-23 17:34:42.114: E/AndroidRuntime(550): at android.app.AlertDialog$Builder.(AlertDialog.java:273)
        08-23 17:34:42.114: E/AndroidRuntime(550): at br.com.pilula.ConfigView$1.onClick(ConfigView.java:46)
        08-23 17:34:42.114: E/AndroidRuntime(550): at android.view.View.performClick(View.java:2485)
        08-23 17:34:42.114: E/AndroidRuntime(550): at android.view.View$PerformClick.run(View.java:9080)
        08-23 17:34:42.114: E/AndroidRuntime(550): at android.os.Handler.handleCallback(Handler.java:587)
        08-23 17:34:42.114: E/AndroidRuntime(550): at android.os.Handler.dispatchMessage(Handler.java:92)
        08-23 17:34:42.114: E/AndroidRuntime(550): at android.os.Looper.loop(Looper.java:130)
        08-23 17:34:42.114: E/AndroidRuntime(550): at android.app.ActivityThread.main(ActivityThread.java:3683)
        08-23 17:34:42.114: E/AndroidRuntime(550): at java.lang.reflect.Method.invokeNative(Native Method)
        08-23 17:34:42.114: E/AndroidRuntime(550): at java.lang.reflect.Method.invoke(Method.java:507)
        08-23 17:34:42.114: E/AndroidRuntime(550): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:839)
        08-23 17:34:42.114: E/AndroidRuntime(550): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:597)
        08-23 17:34:42.114: E/AndroidRuntime(550): at dalvik.system.NativeStart.main(Native Method)
        08-23 17:34:48.334: I/Process(550): Sending signal. PID: 550 SIG: 9

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s