Hinzufügen von Titeln zu ViewPager

Question

Ich habe einen ViewPager für Swipe-Tabs eingerichtet und möchte jetzt Titel oben auf der Seite hinzufügen, um anzuzeigen, welches Fragment angezeigt wird.

Dies ist der Code so weit:

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(); 
    } 
} 

Das funktioniert und ich kann zwischen den beiden Registerkarten wischen, aber es gibt keine Titel.

Ich möchte mit etwas, um am Ende die wie folgt aussieht:

Ich würde jede Hilfe dankbar, wie ich dies einrichten könnte.

Answer 1

Nach PagerTitleStrip suchen, wie in den Kommentaren vorgeschlagen, habe ich folgendes:

Ich habe eine 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> 

Dann in PageAdapter.java Ich fügte die folgende Methode hinzu:

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

Answer 2

Sie müssen den Adapter nicht selbst implementieren. Einfach gehen Sie wie folgt:

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

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

Und Ihr Layout fehlt der PagerTitleStrip finden Sie in diesem Link

Der ViewPager ist nur der Behälter. Der PagerTitleStrip sollte im ViewPager-Layout enthalten sein, also für den Titel.

Answer 3

Der Haupttrics ist der verschachtelte Viewpager. Eine gute und deskriptive Diskussion über Viewpager und Titel.

Answer 4

Seit Android-Unterstützung Design library 22.2.0 können Sie TabLayout Klasse verwenden. Es ist sehr ähnlich zu PagerTitleStrip, Sie müssen nur Titel auf ViewPagerAdapter angeben.

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

und fügen Sie es überall in Ihrem 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> 

und schließlich binden Sie Ihre ViewPager und TabLayout zusammen.

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

Meiner Meinung nach sieht es schöner als PagerTitleStrip. TabLayout eignet sich auch für Google Play-ähnliche Tabs. Wenn Sie eine Anpassung wie @ cjayem13 vornehmen möchten (Tab-Farbe ändern, Textfarbe, ausgewählte Farbe usw.), ist es sehr einfach zu erreichen .. siehe official docs oder CodePath's guide für weitere Details.