Android仿今日头条和知乎等App顶部滑动导航实现代码分析及源码下载

一、本文所涉及到的知识点 源码下载

二、目标
通过利用ViewPager+FragmentStatePagerAdapter+TabLayout 实现顶部滑动效果，如图：

三、知识点讲解
1、ViewPager
是Android库中自带的一个控件，可以实现屏幕间的切换，是个容器类，继承自ViewGroup。一般和PageAdapter或者其子类配合使用进行view切换。比如当和Fragment使用时，会和FragmentPagerAdapter或者FragmentStatePagerAdapter一块使用。
viewPager.setAdapter(fragmentStatePagerAdapter);
2、FragmentStatePagerAdapter适配器
我们知道Adapter是作为UI和数据的桥梁，负责创建显示每个子项的View和提供对下层数据的访问。这里我们给ViewPager绑定的是Fragment所以选择了FragmentStatePagerAdapter。
定义Fragment数组 ：private List<Fragment> fragments;
把Fragment数组添加到FragmentStatePagerAdapter中
fragmentStatePagerAdapter.setFragments(fragments);
3、TabLayout
TabLayout是在水平布局上显示Tab页，做过C++、.Net等桌面程序或者Web页面的对tab页应该不陌生，使用非常普遍。Android中在xml引用TabLayout如下
<android.support.design.widget.TabLayout
android:id="@+id/course_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/mask_tags_8"
app:tabIndicatorColor="@color/color_lv_selector"
app:tabSelectedTextColor="@color/mask_tags_1"
app:tabTextColor="@color/color_lv_selector"
app:tabIndicatorHeight="5dp"
>
</android.support.design.widget.TabLayout>
其中app:tabTextColor="@color/color_lv_selector"，设置TabLayout字体颜色，app:tabSelectedTextColor="@color/mask_tags_1"为选择后的颜色；android:background="@color/mask_tags_8"为背景色；app:tabIndicatorColor="@color/color_lv_selector"为指示器下标颜色；app:tabIndicatorHeight="5dp"为指示器下标高度。
ViewPager和TabLayout建立联系

tabLayout.setupWithViewPager(viewPager);
设置TabLayout滚动模式
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

4、Bundle
这里我们用Bundle在Fragment之间传递对象参数。
这里我们定义了一个序列化类，通过Bundle传送到跟随动态菜单切换的Fragment代码如下：
public static TabFragment newInstance(CourseBean extra){
Bundle bundle=new Bundle();
bundle.putSerializable(KEY,extra);
TabFragment fragment=new TabFragment();
fragment.setArguments(bundle);
return fragment;
}
在Fragment初始化的时候通过Bundle bundle=getArguments();获取bundle实例，然后通过courseBean=(CourseBean)bundle.getSerializable(KEY);获取预先传入的实体类。
四、主要代码
1、这里我们定义了CourseBean实体类进行Fragment之间的参数传递
public class CourseBean implements Serializable {
private String title; // 分类Tab(对应课程名称)名称
private String href; // 课程地址点击地址
private String data_type; // 课程分类
public CourseBean() {
super();
}
public CourseBean(String title, String href, String data_type) {
super();
this.title = title;
this.href = href;
this.data_type = data_type;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public String getHref() {
return href;
}

public void setHref(String href) {
this.href = href;
}

public String getData_type() {
return data_type;
}

public void setData_type(String data_type) {
this.data_type = data_type;
}

@Override
public String toString() {
return "CategoriesBean [title=" + title + ", href=" + href
+ ", data_type=" + data_type + "]";
}
}

来源： 案秀云