Dodawanie tytułów do ViewPager

Question

Ustawiłem ViewPager dla przesuwanych kart, a teraz chcę dodać tytuły na górze strony, aby wskazać, który fragment jest wyświetlany.

Jest to kod do tej pory:

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

public class PageAdapter extends FragmentPagerAdapter { 

    private List<Fragment> fragments; 

    public PageAdapter(FragmentManager fm, List<Fragment> fragments) { 
     super(fm); 
     this.fragments = fragments; 
    } 

    @Override 
    public Fragment getItem(int position) { 
     return this.fragments.get(position); 
    } 

    @Override 
    public int getCount() { 
     return this.fragments.size(); 
    } 
} 

To działa i mogę przesuwać palcem między dwoma zakładkami, ale nie ma żadnych tytułów.

Chcę skończyć z czymś, co wygląda tak:

Będę wdzięczny za każdą pomoc, w jaki sposób mogę to ustawić.

Answer 1

Po patrząc PagerTitleStrip, jak sugeruje się w komentarzach, zrobiłem co następuje:

dodałem PagerTitleStrip w 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> 

Następnie w PageAdapter.java Dodałem następującą metodę:

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

Answer 2

Nie ma potrzeby samodzielnego wdrażania adaptera. Proste są następujące:

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

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

A twój układ brakuje od PagerTitleStrip, zobacz ten Link

ViewPager jest tylko pojemnik. PagerTitleStrip powinien być zawarty w układzie ViewPager, czyli w tytule.

Answer 3

Główne triki to zagnieżdżony widok strony. Dobra i opisowa dyskusja na temat strony i tytułu. https://github.com/codepath/android_guides/wiki/ViewPager-with-FragmentPagerAdapter

Answer 4

Od obsługi Androida Design library 22.2.0 można używać klasy TabLayout. Jest bardzo podobny do PagerTitleStrip, wystarczy określić tytuł w ViewPagerAdapter.

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

i dodać go w dowolnym miejscu w swoim 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> 

i wreszcie związać razem ViewPager i TabLayout.

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

Moim zdaniem wygląda ładniej niż PagerTitleStrip. TabLayout nadaje się również do kart podobnych do Google Play. Jeśli chcesz dokonać personalizacji, np. @ Cjayem13 powiedział (zmień kolor karty, kolor tekstu, wybrany kolor itp.), Jest to bardzo łatwe do osiągnięcia. Aby uzyskać więcej szczegółów, patrz: official docs lub CodePath's guide.