Android ViewPager (页面切换组件) - Android 基础教程

在 Android ViewPager 页面切换组件 2 我们创建了一个带标题的 ViewPager

但是这个 ViewPager 与今日头条的效果还是相差甚远，比如，缺少了下划线的效果

那么我们这章节就来试一试 PagerTabStrip ，据说它可以给 ViewPager 的标题添加下划线效果总觉得还缺少些什么，能添加上标题一起切换就好了，就像下面这样

PagerTabStrip

PagerTabStrip 继承自 PagerTitleStrip，但提供了下划线效果

我们可以使用 XML 代码来创建一个 PagerTitleStrip

<android.support.v4.view.PagerTabStrip
    android:id="@+id/pagertitle"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_gravity="top"
    android:textColor="#ffffff" />

接下来我们就用写一个 demo 用 PagerTabStrip 替换吧 PagerTitleStrip

范例

我们先来看看最后的效果图

复用 Android ViewPager 页面切换组件 2 中的 demo

修改 activity_main.xml 添加一个 PagerTitleStrip

<?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.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagertitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:textColor="#333333" />
   </android.support.v4.view.ViewPager>

</LinearLayout>

然后其它不用变，直接运行吧

虽然长得有点像我们想要的，但是，这个，那个，线怎么不会随着滑动而滑动啊，算了下一章我们自己定制一个吧

参考文档

Android ViewPager