今天上班没啥任务,就写了个小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"是设置为可以滑动,如