前言：
正在做一個資訊類app,打算一邊做一邊整理镇防，供自己學(xué)習(xí)與鞏固。用到的知識復(fù)雜度不高憨栽，僅適于新手。經(jīng)驗不多翼虫，如果寫出來的代碼有不好的地方歡迎討論。
該系列的其他文章
第二章 retrofit獲取網(wǎng)絡(luò)數(shù)據(jù)
第一章 滑動頂部導(dǎo)航欄
本章內(nèi)容最終效果：
知識點：ViewPager,TabLayout,FragmentPagerAdapter,Fragment
學(xué)習(xí)目標(biāo)：
1屡萤、掌握ViewPager珍剑、TabLayout的結(jié)合使用。
2死陆、運(yùn)用TabLayout與ViewPager招拙、FragmentPagerAdapter的相關(guān)知識實現(xiàn)可滑動的頂部導(dǎo)航欄唧瘾。
可滑動的頂部導(dǎo)航欄在國內(nèi)的很多app中經(jīng)常出現(xiàn)（最典型的例子：網(wǎng)易云音樂），使用者只需左右滑動屏幕即可切換到自己想要的頁面别凤，非常方便饰序。本章內(nèi)容將仿照網(wǎng)易云音樂ui來實現(xiàn)頂部導(dǎo)航欄的效果。
項目實戰(zhàn)：
本章用到的drawable資源规哪、values資源皆存放在百度網(wǎng)盤
(請將values文件夾中的style.xml或color.xml更新一致后再運(yùn)行求豫，如有后續(xù)更新自行修改)
1.1 主頁面布局
主頁面布局代碼不多，僅僅是include了主體布局main_content诉稍。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.idlereader.MainActivity">
<include layout="@layout/main_content" />
</LinearLayout>
新建布局文件main_content.xml蝠嘉，代碼：
main_content.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<View
android:id="@+id/view_status"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:visibility="gone"></View>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbars"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorTheme"
app:contentInsetStart="0dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv_title_news"
android:layout_width="55dp"
android:layout_height="match_parent"
android:padding="15dp"
android:src="@drawable/titlebar_news" />
<ImageView
android:id="@+id/iv_title_movie"
android:layout_width="55dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:padding="13dp"
android:src="@drawable/titlebar_movie" />
<ImageView
android:id="@+id/iv_title_video"
android:layout_width="55dp"
android:layout_height="match_parent"
android:padding="15dp"
android:src="@drawable/titlebar_video" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:descendantFocusability="blocksDescendants" />
</FrameLayout>
</LinearLayout>
在該布局中，我們使用到了Toolbar和ViewPager,ViewPager的作用是存放fragment杯巨，Toolbar做為頂部導(dǎo)航欄蚤告。
1.2 主頁面邏輯代碼
在寫主頁面代碼前，我們先建3個fragment服爷，用來放進(jìn)我們的FragmentPagerAdapter里杜恰。
新建3個Fragment,分別命名為FgNewsFragment、FgMovieFragment仍源、FgVideoFragment（這個命名方式是因為我習(xí)慣用第三方插件Code Generate生成fragment文件或activity文件）心褐。
這3個Fragment的不需要寫什么東西，顯示一個TextView就好了
有了這三個Fragment后檬寂，我們來給ViewPager寫一個Adapter]
新建java文件，命名為MyFragmentAdapter.java
寫完了適配器戳表，再來完善MainActivity的代碼：
完成后的效果：
2.1 新聞頁面導(dǎo)航欄
在新聞頁面導(dǎo)航欄要用到TabLayout桶至，這需要我們導(dǎo)一下庫：
首先還是布局，把上面創(chuàng)建的fg_news.xml的代碼修改一下匾旭。
fg_news.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tl_news"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@color/colorTheme"
app:tabIndicatorColor="@color/colorWhite"
app:tabSelectedTextColor="@color/colorWhite"
app:tabTextColor="@color/colorTabTextNormal" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_news"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
加了個TabLayout镣屹，我把選擇狀態(tài)和自然狀態(tài)的設(shè)置都寫進(jìn)布局文件里了。
2.2 新聞頁面導(dǎo)航欄邏輯代碼
建一個Fragment,命名為FgNewsListFragment
布局代碼也是只顯示個TextView
<?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">
<TextView
android:id="@+id/tv_news"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="top"
android:textSize="100dp" />
</LinearLayout>
FgNewsListFragment的代碼：
接下來是修改FgNewsFragment的代碼：
最后效果：
需要注意的是在主頁面adapter的實例化中价涝，F(xiàn)ragmentManager用的是getSupportFragmentManager()女蜈。
MyFragmentAdapter adapter = new MyFragmentAdapter(getSupportFragmentManager(),
mFragmentList);
而新聞頁面用的是getChildFragmentManager(),
MyFragmentAdapter adapter=new MyFragmentAdapter(getChildFragmentManager(),
fragments,fragmentTitles);
這是因為新聞頁面里的fragment是嵌套于新聞fragment的，如果繼續(xù)用getSupportFragmentManager()的話色瘩，getFragmentManager到的是activity對所包含fragment的Manager伪窖，所以要使用getChildFragmentManager()。
以上就是實現(xiàn)頂部導(dǎo)航欄的所有內(nèi)容居兆。
