本文为菜鸟窝作者蒋志碧的连载。“从 0 开始开发一款直播 APP ”系列来聊聊时下最火的直播 APP，如何完整的实现一个类"腾讯直播"的商业化项目

【从 0 开始开发一款直播 APP】2.1 高层封装之 Fragment
【从 0 开始开发一款直播 APP】2.2 高层封装之 Fragment-- 滑动导航

Demo演示

PagerSlidingTabStrip + ViewPager + Fragment 实现滑动导航

先上效果图

我来给你解析，先从结构讲起，来张霸气的结构分析图。

上面的导航

是一个 Fragment 加载的 LinearLayout 布局，布局里面是一个 RelativeLayout，RelativeLayout 包含从左到右依次为 ImageView，PagerSlidingTabStrip，ImageView。

下面的导航

是在 MainActivity 加载的 FragmentTabHost，FragmentTabHost 的 TabSpec 添加 ImageView。

整体结构清晰了，写代码就轻松了很多啦。

一、从下面的导航开始写吧。

上一章已经讲过 Activity 和 Fragment 的封装，直接用封装好的 Activity 和 Fragment来写，不会的请查看上章内容。

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，系统定义的，否则无法找到该控件
    <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 创建三个 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 类数组以及对应 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 不了解的自行学习）

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，添加其相应数据
     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;
  }
}

写到此，底部导航就写完啦，直接运行就能看到效果啦，还是贴上图片吧，免得怪我只说不做，哈哈😄

二、上面的导航讲解。

该导航是基于第一个 Fragment 显示的 UI 界面，ViewPager 结合 PagerSlidingTabStrip 实现的，先了解下这两个API 的基本概念。

ViewPager 是 Google 自带的翻页控件，存放在 V4 兼容包中，继承于 ViewGroup，官方推荐和 Fragment 一块使用。我们平时使用的地方主要有 2 个，一个是 app 第一次启动的引导页，第二个就是弄几张图片轮播的那种。第二种使用方式的时候经常配合 PagerTabStrip 或者 PagerTitleStrip 来显示一个标签用来指引现在处于第几个面。

需要注意的是在使用他们的时候必须要放在 ViewPager 里面作为其子控件，要显示标题需要重写 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。第一步当然是获取控件啦。

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 要显示数据，必须封装一个 Adapter，并继承 FragmentStatePagerAdapter 类。

public class ViewPagerAdapter extends FragmentStatePagerAdapter {
    //显示的标题信息
    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);
    }

    //获取显示数量
    @Override
    public int getCount() {
        return mTitles.size();
    }
    
    //获取对应 title 的值
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles.get(position);
    }
}

2.5 接下来初始化 ViewPager 数据，为其绑定 Adapter 。

private void initViewPager(){
    mFragments = new ArrayList<>();
    mTitles = new ArrayList<>();
    mTitles.add("最新");
    mTitles.add("最热");
    mTitles.add("达人");
    mTitles.add("活力");
    mTitles.add("英雄联盟");
    mTitles.add("王者荣耀");
    for (String s:mTitles){
        Bundle bundle = new Bundle();
        bundle.putString("title",s);
        //要使在对应 title 中，Fragment 显示对应内容，将 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 ，用来显示对应标题信息。这里说下 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 要实现翻页，就要结合 ViewPager **

mTabStrip.setViewPager(mViewPager);

2.8 PagerSlidingTabStrip 有很多属性，通过改变属性值就能做出炫酷的效果啦。通过查看源码，可以看到以下属性，我已为每个属性添加相应注释，看上去就不会那么累啦，使用属性有两种方法。一是在 xml 中引入相关属性，二是通过代码设置。

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <declare-styleable name="PagerSlidingTabStrip">
      <!--底部滑动指示器的颜色-->
     <attr name="pstsIndicatorColor" format="color" />
     <!--底部用于给指示器滑动的区域的颜色--> 
     <attr name="pstsUnderlineColor" format="color" />
     <!--分割线的颜色-->
     <attr name="pstsDividerColor" format="color" />
     <!--指示器的高度-->
     <attr name="pstsIndicatorHeight" format="dimension" />
     <!--底部区域的高度--> 
     <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" />
     <!--是否根据tab均分位置，true的时候均分，默认为false,一般都是使用默认值-->
     <attr name="pstsShouldExpand" format="boolean" />
     <!--标题文本是否大写，默认为true-->
     <attr name="pstsTextAllCaps" format="boolean" />
 </declare-styleable>
</resources>

属性对应图

说完基础，就来设置一下吧。

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 最后，上面的导航也讲解完啦，还是贴上最后的总体代码吧，帮你看得更清晰。

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("达人");
        mTitles.add("活力");
        mTitles.add("英雄联盟");
        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() {
    }

}

到此，代码便是写完了，运行就能出现一样的效果啦。

总结

对 Fragment 基础知识熟练掌握，有基础了看封装就很简单哦。

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

ViewPager 是很重要的控件，页面启动引导页或者标签滑动等实现都要熟悉。

PagerSlidingTabStrip 是经常使用到的一个和 ViewPager 配合的页面指示器，可以满足我们日常需求。

更多内容，请关注菜鸟窝（微信公众号ID: cniao5），程序猿的在线学习平台。转载请注明出处，本文出自菜鸟窝，原文链接http://www.cniao5.com/forum/thread/d2041348122811e7b98900163e0230fa