本文為菜鳥窩作者蔣志碧的連載。“從 0 開始開發(fā)一款直播 APP ”系列來聊聊時下最火的直播 APP，如何完整的實現(xiàn)一個類"騰訊直播"的商業(yè)化項目

【從 0 開始開發(fā)一款直播 APP】2.1 高層封裝之 Fragment
【從 0 開始開發(fā)一款直播 APP】2.2 高層封裝之 Fragment-- 滑動導(dǎo)航

Demo演示

PagerSlidingTabStrip + ViewPager + Fragment 實現(xiàn)滑動導(dǎo)航

先上效果圖

我來給你解析，先從結(jié)構(gòu)講起，來張霸氣的結(jié)構(gòu)分析圖。

上面的導(dǎo)航

是一個 Fragment 加載的 LinearLayout 布局，布局里面是一個 RelativeLayout，RelativeLayout 包含從左到右依次為 ImageView，PagerSlidingTabStrip，ImageView。

下面的導(dǎo)航

是在 MainActivity 加載的 FragmentTabHost，F(xiàn)ragmentTabHost 的 TabSpec 添加 ImageView。

整體結(jié)構(gòu)清晰了，寫代碼就輕松了很多啦。

一、從下面的導(dǎo)航開始寫吧。

上一章已經(jīng)講過 Activity 和 Fragment 的封裝，直接用封裝好的 Activity 和 Fragment來寫，不會的請查看上章內(nèi)容。

1.1 在 main_activity.xml 中添加 FragmentTabHost。

<merge xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">

    <FrameLayout
        android:id="@+id/contentPanel"
        android:layout_marginBottom="50dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"  />

    //注意id，系統(tǒng)定義的，否則無法找到該控件
    <android.support.v4.app.FragmentTabHost
        android:id="@android:id/tabhost"
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/tab_bg" />
</merge>

1.2 創(chuàng)建三個 Fragment。主頁LiveMainFragment，直播LivePlayerFragment，我的MineFragment

 public class LivePlayerFragment extends BaseFragment {
  @Override
    protected void initData() {
    }

    @Override
    protected int getLayoutId() {
        return R.layout.fragment_girl;
    }

    @Override
    protected void initView(View rootView) {
    }

    @Override
    protected void setListener() {
    }
}

1.3 LivePlayerFragment 布局

<FrameLayout 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.dali.admin.fragment.LivePlayerFragment">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="直播"/>
</FrameLayout>

1.4 MainActivity 中聲明三個 Fragment 類數(shù)組以及對應(yīng) title 和 Image 。

private final Class mFeagmentArray[] = {LiveMainFragment.class,LivePlayerFragment.class,MineFragment.class};
private String mTextviewArray[] = {"live", "publish", "my"};
private int mImageViewArray[] = {R.drawable.tab_live_selector, R.drawable.tab_pubish_selector, R.drawable.tab_my_selector};

1.5 圖片選擇器 （這里只貼出一個）

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_live" android:state_selected="true"/>
    <item android:drawable="@drawable/tab_live_p"/>
</selector>

1.6 初始化 FragmentTabHost ，為其添加 title 和 image （對 FragmentTabHost 不了解的自行學(xué)習(xí)）

private FragmentTabHost mTabHost;
  @Override
  protected int getLayoutId() {
     return R.layout.activity_main;
  }

  @Override
  protected void initView() {
     //查找 FragmentTabHost 控件，并為其添加 FragmentManager 管理器
     mTabHost = obtainView(android.R.id.tabhost);
     mTabHost.setup(this,getSupportFragmentManager(),R.id.contentPanel);
  }

  @Override
  protected void initData() {
     //初始化 TabSpec，添加其相應(yīng)數(shù)據(jù)
     int fragmentCount = mFeagmentArray.length;
     for (int i=0;i<fragmentCount;i++){
          TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTextviewArray[i]).setIndicator(getTabItemView(i));
          mTabHost.addTab(tabSpec,mFeagmentArray[i],null);
          mTabHost.getTabWidget().setDividerDrawable(null);
     }
  }

  private View getTabItemView(int index) {
     //該布局只有一張圖片，很簡單，不貼代碼
     View v = LayoutInflater.from(this).inflate(R.layout.tab_ive,null);
     ImageView icon = (ImageView) v.findViewById(R.id.tab_icon);
     icon.setImageResource(mImageViewArray[index]);
     return v;
  }
}

寫到此，底部導(dǎo)航就寫完啦，直接運行就能看到效果啦，還是貼上圖片吧，免得怪我只說不做，哈哈??

二、上面的導(dǎo)航講解。

該導(dǎo)航是基于第一個 Fragment 顯示的 UI 界面，ViewPager 結(jié)合 PagerSlidingTabStrip 實現(xiàn)的，先了解下這兩個API 的基本概念。

ViewPager 是 Google 自帶的翻頁控件，存放在 V4 兼容包中，繼承于 ViewGroup，官方推薦和 Fragment 一塊使用。我們平時使用的地方主要有 2 個，一個是 app 第一次啟動的引導(dǎo)頁，第二個就是弄幾張圖片輪播的那種。第二種使用方式的時候經(jīng)常配合 PagerTabStrip 或者 PagerTitleStrip 來顯示一個標(biāo)簽用來指引現(xiàn)在處于第幾個面。

需要注意的是在使用他們的時候必須要放在 ViewPager 里面作為其子控件，要顯示標(biāo)題需要重寫 Adapter 里面的 getPagerTitle() 方法。

2.1 首先用到了 PagerSlidingTabStrip 這個控件，在 gradle 添加依賴。 PagerSlidingTabStrip github 地址 源碼和demo都有，不了解的建議看看哦。

dependencies {
    compile 'com.astuetz:pagerslidingtabstrip:1.0.1'
}

2.2 接下來就是 LiveMainFragment 的布局，整體是一個 LinearLayout，頂部是一個 RelativeLayout，里面包含了左部搜索框， PagerSlidingTabStrip 框架，右邊的消息欄。下面是一個 ViewPager 。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
              xmlns:app="http://schemas.android.com/apk/res-auto"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical"
             tools:context="com.dali.admin.fragment.LiveMainFragment">

    <RelativeLayout
        android:id="@+id/self_create_titlebar"
        android:layout_width="match_parent"
        android:layout_height="48dip"
        android:background="@color/tab_blue_bg">

        <ImageView
            android:id="@+id/iv_search"
            android:layout_width="20dip"
            android:layout_height="20dip"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dip"
            android:layout_marginRight="10dip"
            android:src="@mipmap/search"/>

        <ImageView
            android:id="@+id/iv_message"
            android:layout_width="20dip"
            android:layout_height="20dip"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dip"
            android:layout_marginRight="10dip"
            android:src="@mipmap/message"/>

        <com.astuetz.PagerSlidingTabStrip
            android:id="@+id/circle_index_indicator"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:layout_toLeftOf="@id/iv_message"
            android:layout_toRightOf="@id/iv_search"
            android:background="@null"
            android:fillViewport="false"
            app:pstsIndicatorHeight="3dp"
            app:pstsScrollOffset="150dp"
            app:pstsTabPaddingLeftRight="10dp">
            </com.astuetz.PagerSlidingTabStrip>
    </RelativeLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

2.3 看到布局中的控件有 PagerSlidingTabStrip、ViewPager、ImageView。第一步當(dāng)然是獲取控件啦。

private ViewPager mViewPager;
private PagerSlidingTabStrip mTabStrip;

@Override
protected void initView(View rootView) {
   mViewPager = obtainView(R.id.viewpager);
   mTabStrip = obtainView(R.id.circle_index_indicator);    
   obtainView(R.id.iv_search);
   obtainView(R.id.iv_message);
}

2.4 ViewPager 要顯示數(shù)據(jù)，必須封裝一個 Adapter，并繼承 FragmentStatePagerAdapter 類。

public class ViewPagerAdapter extends FragmentStatePagerAdapter {
    //顯示的標(biāo)題信息
    private ArrayList<String> mTitles;
    //綁定 Fragment
    private ArrayList<Fragment> mFragments;

    public ViewPagerAdapter(FragmentManager fm,ArrayList<String> titles,ArrayList<Fragment> fragments) {
        super(fm);
        this.mTitles = titles;
        this.mFragments = fragments;
    }

    //獲取 Fragment
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    //獲取顯示數(shù)量
    @Override
    public int getCount() {
        return mTitles.size();
    }
    
    //獲取對應(yīng) title 的值
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }
}

2.5 接下來初始化 ViewPager 數(shù)據(jù)，為其綁定 Adapter 。

private void initViewPager(){
    mFragments = new ArrayList<>();
    mTitles = new ArrayList<>();
    mTitles.add("最新");
    mTitles.add("最熱");
    mTitles.add("達(dá)人");
    mTitles.add("活力");
    mTitles.add("英雄聯(lián)盟");
    mTitles.add("王者榮耀");
    for (String s:mTitles){
        Bundle bundle = new Bundle();
        bundle.putString("title",s);
        //要使在對應(yīng) title 中，F(xiàn)ragment 顯示對應(yīng)內(nèi)容，將 title 作為一個 key，利用 Bundle 傳入到要顯示的 Fragment 中 
        mFragments.add(LiveListFragment.getInstance(bundle));
    }
    mPagerAdapter = new ViewPagerAdapter(getFragmentManager(),mTitles,mFragments);
    mViewPager.setAdapter(mPagerAdapter);
    //第一次顯示第一個 item
    mViewPager.setCurrentItem(0);
}

2.6 LiveListFragment 布局簡單，一個 TextView ，用來顯示對應(yīng)標(biāo)題信息。這里說下 getInstance() 方法和獲取 TextView 信息。通過 bundle 對象獲取 ViewPager 中傳入的值。

public static Fragment getInstance(Bundle bundle){
    LiveListFragment fragment = new LiveListFragment();
    fragment.setArguments(bundle);
    return fragment;
}

@Override
protected int getLayoutId() {
    return R.layout.fragment_live_list;
}

@Override
protected void initView(View rootView) {
    TextView tv = (TextView) rootView.findViewById(R.id.tv_id);
    tv.setText(getArguments().getString("title"));
}

**2.7 PagerSlidingTabStrip 要實現(xiàn)翻頁，就要結(jié)合 ViewPager **

mTabStrip.setViewPager(mViewPager);

2.8 PagerSlidingTabStrip 有很多屬性，通過改變屬性值就能做出炫酷的效果啦。通過查看源碼，可以看到以下屬性，我已為每個屬性添加相應(yīng)注釋，看上去就不會那么累啦，使用屬性有兩種方法。一是在 xml 中引入相關(guān)屬性，二是通過代碼設(shè)置。

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="PagerSlidingTabStrip">
      <!--底部滑動指示器的顏色-->
     <attr name="pstsIndicatorColor" format="color" />
     <!--底部用于給指示器滑動的區(qū)域的顏色--> 
     <attr name="pstsUnderlineColor" format="color" />
     <!--分割線的顏色-->
     <attr name="pstsDividerColor" format="color" />
     <!--指示器的高度-->
     <attr name="pstsIndicatorHeight" format="dimension" />
     <!--底部區(qū)域的高度--> 
     <attr name="pstsUnderlineHeight" format="dimension" />
     <!--分割線與上下的間距--> 
     <attr name="pstsDividerPadding" format="dimension" />
     <!--每個Tab的左右邊距-->
     <attr name="pstsTabPaddingLeftRight" format="dimension" />
     <!--選中tab的滾動偏移量--> 
     <attr name="pstsScrollOffset" format="dimension" />
     <!--每個Tab的背景圖，StateListDrawable-->
     <attr name="pstsTabBackground" format="reference" />
     <!--是否根據(jù)tab均分位置，true的時候均分，默認(rèn)為false,一般都是使用默認(rèn)值-->
     <attr name="pstsShouldExpand" format="boolean" />
     <!--標(biāo)題文本是否大寫，默認(rèn)為true-->
     <attr name="pstsTextAllCaps" format="boolean" />
 </declare-styleable>
</resources>

屬性對應(yīng)圖

說完基礎(chǔ)，就來設(shè)置一下吧。

mTabStrip.setViewPager(mViewPager);
mTabStrip.setTextColorResource(R.color.white);
mTabStrip.setIndicatorColorResource(R.color.white);
mTabStrip.setDividerColorResource(R.color.transparent);
mTabStrip.setTextSize(getResources().getDimensionPixelSize(R.dimen.abc_text_size_menu_material));
mTabStrip.setUnderlineHeight(1);

2.8 最后，上面的導(dǎo)航也講解完啦，還是貼上最后的總體代碼吧，幫你看得更清晰。

public class LiveMainFragment extends BaseFragment{
 private ViewPager mViewPager;
    private PagerSlidingTabStrip mTabStrip;
    private ViewPagerAdapter mPagerAdapter;
    private ArrayList<String> mTitles;
    private ArrayList<Fragment> mFragments;

    @Override
    protected void initData() {
    }

    @Override
    protected int getLayoutId() {
        return R.layout.fragment_live_main;
    }

    @Override
    protected void initView(View rootView) {
        mViewPager = obtainView(R.id.viewpager);
        mTabStrip = obtainView(R.id.circle_index_indicator);
        obtainView(R.id.iv_search);
        obtainView(R.id.iv_message);
        initViewPager();
        mTabStrip.setViewPager(mViewPager);
        mTabStrip.setTextColorResource(R.color.white);
        mTabStrip.setIndicatorColorResource(R.color.white);
        mTabStrip.setDividerColorResource(R.color.transparent);
 mTabStrip.setTextSize(getResources().getDimensionPixelSize(R.dimen.abc_text_size_menu_material));
        mTabStrip.setUnderlineHeight(1);
    }

    private void initViewPager(){
        mFragments = new ArrayList<>();
        mTitles = new ArrayList<>();
        mTitles.add("最新");
        mTitles.add("最熱");
        mTitles.add("達(dá)人");
        mTitles.add("活力");
        mTitles.add("英雄聯(lián)盟");
        mTitles.add("王者榮耀");
        for (String s:mTitles){
            Bundle bundle = new Bundle();
            bundle.putString("title",s);
            mFragments.add(LiveListFragment.getInstance(bundle));
        }
        mPagerAdapter = new ViewPagerAdapter(getFragmentManager(),mTitles,mFragments);
        mViewPager.setAdapter(mPagerAdapter);
        mViewPager.setCurrentItem(0);
    }

    @Override
    protected void setListener() {
    }

}

到此，代碼便是寫完了，運行就能出現(xiàn)一樣的效果啦。

總結(jié)

對 Fragment 基礎(chǔ)知識熟練掌握，有基礎(chǔ)了看封裝就很簡單哦。

對 FragmentTabHost 用法熟悉，尤其是 TabHost.TabSpec 方法對使用。

ViewPager 是很重要的控件，頁面啟動引導(dǎo)頁或者標(biāo)簽滑動等實現(xiàn)都要熟悉。

PagerSlidingTabStrip 是經(jīng)常使用到的一個和 ViewPager 配合的頁面指示器，可以滿足我們?nèi)粘Ｐ枨蟆?/p>

更多內(nèi)容，請關(guān)注菜鳥窩（微信公眾號ID: cniao5），程序猿的在線學(xué)習(xí)平臺。轉(zhuǎn)載請注明出處，本文出自菜鳥窩，原文鏈接http://www.cniao5.com/forum/thread/d2041348122811e7b98900163e0230fa