Android ViewPager (页面切换组件)

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

范例

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


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

  2. 修改 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>
    

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

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

参考文档

  1. Android ViewPager

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.