Aggiunta di titoli a ViewPager

Question

Ho impostato un ViewPager per le schede scorrevoli e ora voglio aggiungere titoli nella parte superiore della pagina per indicare quale frammento viene mostrato.

Questo è il codice finora:

activity_main.xml

<?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" > 

    <android.support.v4.view.ViewPager 
     android:id="@+android:id/viewpager" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" /> 

</LinearLayout> 

MainActivity.java

public class MainActivity extends FragmentActivity { 

    private PagerAdapter mPagerAdapter; 

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

     this.initialisePaging(); 
    } 

    private void initialisePaging() { 

     List<Fragment> fragments = new Vector<Fragment>(); 

     // Add fragments here 
     fragments.add(Fragment.instantiate(this, PickerFragment.class.getName())); 
     fragments.add(Fragment.instantiate(this, DisplayFragment.class.getName())); 

     this.mPagerAdapter = new PageAdapter(super.getSupportFragmentManager(), fragments); 
     ViewPager pager = (ViewPager)super.findViewById(R.id.viewpager); 
     pager.setAdapter(this.mPagerAdapter); 
    } 

} 

PageAdapter.java

Questo funziona e sono in grado di scorrere tra le due schede ma non ci sono titoli.

Voglio finire con qualcosa che assomiglia a questo:

Gradirei qualsiasi aiuto su come potrei impostare questa funzione.

Answer 1

Dopo aver guardato PagerTitleStrip, come suggerito nei commenti, ho fatto la seguente:

ho aggiunto un PagerTitleStrip in activity_main.xml:

<?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" > 

    <android.support.v4.view.ViewPager 
     android:id="@+android:id/viewpager" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" > 

     <android.support.v4.view.PagerTitleStrip 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="top" /> 
    </android.support.v4.view.ViewPager> 

</LinearLayout> 

Poi nel PageAdapter.java Ho aggiunto il seguente metodo:

@Override 
public CharSequence getPageTitle(int position) { 
    return "Title Here"; 
} 

Answer 2

Non è necessario implementare l'adattatore da soli. Semplice do seguente:

mPagerAdapter = new PageAdapter(super.getSupportFragmentManager()); 

mPagerAdapter.addFragment(Fragment.instantiate(this, "Title that you want"); 

E il layout è privo di PagerTitleStrip, vedere questo Link

L'ViewPager è solo il contenitore. Il PagerTitleStrip deve essere incluso nel layout di ViewPager, questo è il titolo.

Answer 3

Il trics principale è quel viewpager nidificato. Una discussione buona e descrittiva su viewpager e titolo. https://github.com/codepath/android_guides/wiki/ViewPager-with-FragmentPagerAdapter

Answer 4

Dal supporto Android Design library 22.2.0, è possibile utilizzare la classe TabLayout. È molto simile a PagerTitleStrip, è sufficiente specificare il titolo su ViewPagerAdapter.

@Override 
public CharSequence getPageTitle(int position) { 
    return titleList.get(position); 
} 

e aggiungerlo in qualsiasi punto del tuo xml.

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

    <android.support.design.widget.TabLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 
</LinearLayout> 

e, infine, legare il ViewPager e TabLayout insieme.

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout); 
tabLayout.setupWithViewPager(viewPager); 

A mio parere, sembra più bello di PagerTitleStrip. TabLayout adatto anche per schede di Google Play. Se vuoi fare personalizzazioni come @ cjayem13 ha detto (cambiare colore della tablatura, colore del testo, colore selezionato ecc.), È molto facile da raggiungere .. vedi official docs o CodePath's guide per ulteriori dettagli.