向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之后,我做了以下事情:

我在activity_main.xml中添加了一个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中添加了以下方法:

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

Answer 2

从Android支持设计库22.2.0开始，您可以使用TabLayoutclass。与极为相似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那样进行自定义（更改选项卡颜色，文本颜色，所选颜色等），则非常容易实现。有关更多详细信息，请参阅官方文档或CodePath指南。