android之TabLayout实现PagerSlidingTabStrip,ViewpagerIndicator之类的效果滑动页面导航效果（类似网易新闻）

最新推荐文章于 2024-07-26 21:24:56 发布

晨兮_夏天

最新推荐文章于 2024-07-26 21:24:56 发布

阅读量3.6k

点赞数

分类专栏： android-其他文章标签：滑动切换导航 tablayout viewpager tab

本文链接：https://blog.csdn.net/gsw333/article/details/51025968

版权

本文介绍如何使用TabLayout和ViewPager在Android中实现类似网易新闻的滑动页面导航效果。通过TabLayout实现可滑动的导航卡，搭配ViewPager和fragment展示内容。同时，实现TabLayout与ViewPager的联动，确保点击导航卡或滑动内容时，两者同步更新。

摘要由CSDN通过智能技术生成

今天上班没啥任务，就写了个小demo玩玩，以前都是用底部导航栏+fragment实现主页，今天想试试类似网易新闻实现滑动页面导航效果，即上面是可以滑动的分类导航卡，下面是根据上面导航卡进行变动的内容显示，效果如下：

首先，我们先来分析一下实现方式:

1.导航卡是TabLayout实现导航卡并可以左右滑动（我们这里实现7个导航卡效果）

2.中间是Viewpager+fragment实现左右滑动

3.中间的ViewPager和顶部的TabLayout要进行联动，即点击导航卡后下面的ViewPager内容跟着变，同理滑动ViewPager后导航卡TabLayout跟着变（TabLayout自带实现）

首先，我们先来进行总布局的xml文件(注意，我们要使用Tablayout需要先使用design包，compile 'com.android.support:design:23.1.1')

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        app:tabIndicatorColor="#0000ff"
        app:tabIndicatorHeight="1px"
        app:tabMode="scrollable"
        app:tabGravity="center"
        app:tabTextColor="#ff0000"
        app:tabSelectedTextColor="#00ff00"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

</LinearLayout>

LinearLayout布局，方向vertical；其中app:tabIndicatorColor="#0000ff"是设置指示器那个蓝色横条颜色，app:tabIndicatorHeight="1px"是设置横条的高度，app:tabMode="scrollable"是设置为可以滑动，如