一、本文所涉及到的知識點
源碼下載

二、目標
通過利用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 +
"]";
}
}