【从 0 开始开发一款直播 APP】2.2 高层封装之 Frag
2017-03-30 本文已影响295人
菜鸟窝
本文为菜鸟窝作者蒋志碧的连载。“从 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
