在ViewPager中添加标题

Question

在ViewPager中添加标题

15

我已经设置了一个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();
    }
}

这段代码可以实现在两个标签页之间切换，但是没有标题。

我希望最终效果如下图所示:

Google play

如果您能提供任何帮助来设置这个效果，我将不胜感激。

- Dan

2

你想要一个http://developer.android.com/reference/android/support/v4/view/PagerTitleStrip.html (在Google上搜索教程，非常容易设置）。如果你想要更花哨的东西，可以看一下https://github.com/JakeWharton/Android-ViewPagerIndicator。 - user

4个回答

8

自从Android支持设计库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);

在我看来，TabLayout比PagerTitleStrip更美观。 TabLayout也适用于类似Google Play的选项卡。如果你想像@cjayem13所说的那样自定义（更改选项卡颜色、文本颜色、选中颜色等），这很容易实现...详见官方文档或CodePath的指南获取更多细节。

- aldok

1

谢谢，这样视觉效果更好了！ - William Reed

2

主要技巧是嵌套的ViewPager。有关ViewPager和标题的良好且详细的讨论。 https://github.com/codepath/android_guides/wiki/ViewPager-with-FragmentPagerAdapter

- Milon

-3

您不需要自己实现适配器。只需按照以下步骤操作：

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

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

你的布局缺少 PagerTitleStrip，看看这个链接

ViewPager只是容器。PagerTitleStrip 应该包含在 ViewPager 布局中，这是为了标题。

- David

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dan · Accepted Answer

根据评论中建议的 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";
}