向ViewPager添加标题

Question

我已经设置了可滑动标签的ViewPager，现在我想在页面顶部添加标题以指示正在显示的片段。

这是迄今为止的代码：

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

这个工程，我可以在两个标签之间滑动，但没有标题。

我想要的东西，看起来像这样结束了：

我将不胜感激我怎么能设置此的任何帮助。

Answer 1

寻找PagerTitleStrip后，作为意见建议，我做了以下内容：在

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

然后PageAdapter.java：

我activity_main.xml中增加了PagerTitleStrip我加了下面的方法：

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

Answer 2

您不需要自己实现适配器。简单做如下：

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

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

和布局缺乏PagerTitleStrip的，看到这个Link

的ViewPager只是容器。 PagerTitleStrip应该包含在ViewPager布局中，即标题。

Answer 3

主要的trics是嵌套的viewpager。对观看者和标题进行很好的讨论。 https://github.com/codepath/android_guides/wiki/ViewPager-with-FragmentPagerAdapter

Answer 4

由于Android支持Design library 22.2.0，您可以使用TabLayout类。这与PagerTitleStrip非常相似，您只需在ViewPagerAdapter上指定标题即可。

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

并将它添加到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> 

，最后，配合你的ViewPager和TabLayout在一起。

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

在我看来，它看起来比PagerTitleStrip好看。 TabLayout也适用于类似Google Play的标签。如果你想要像@ cjayem13所说的那样进行定制（改变标签的颜色，文字颜色，选择的颜色等），这很容易实现..见official docs或CodePath's guide了解更多细节。