解读(四):分析主界面顶部Tab的实现

解读(四):分析主界面顶部Tab的实现

使用Tab管理类管理顶部Tab

上次分析到了利用Tabs的管理类来动态更新首页顶部tabs的显示

Fragment mTab = new BaseTabMainFragment() {
            @Override
            public void onSetupTabs() {
                //添加要显示主界面Tabs项
                addTab(getResources().getString(R.string.new_news), ListNewsFragment.class, NewsList.CATALOG_ALL); //最新资讯
                addTab(getResources().getString(R.string.week_news), ListNewsFragment.class, NewsList.CATALOG_WEEK); //周度资讯
                addTab(getResources().getString(R.string.month_news), ListNewsFragment.class, NewsList.CATALOG_MONTH); //月度资讯
            }
        };

可以发现继承关系 BaseTabMainFragment –> BaseTabFragment –> BaseFragment, 从父类开始分析

BaseFragment类

/**
 * Fragment的基类
 */
public abstract class BaseFragment<P extends Presenter> extends NucleusFragment<P> {
    public Context mContext;
    public Resources resources;
    public static final String BUNDLE_TYPE = "BUNDLE_TYPE";
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = getActivity(); //获得所附加的activity对象
        resources = mContext.getResources(); //便于获取资源
    }
}

BaseTabFragment类

/**
 * Tab的Fragment基类
 */
public abstract class BaseTabFragment extends BaseFragment {
    protected ViewPager mViewPager;
    protected FragmentStatePagerAdapter mAdapter;
    protected ArrayList<ViewPageInfo> mTabs;
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        mViewPager = (ViewPager) view.findViewById(R.id.view_pager);
        if (mAdapter == null) {
            mTabs = new ArrayList<>();
            //设置tab项
            onSetupTabs();
            //设置适配器, 这里有个疑问, 一直都没有为mAdapter赋值,那么每次是不是都会走 mAdapter==null的流程?
            mViewPager.setAdapter(new FragmentStatePagerAdapter(getGenuineFragmentManager()) {
                @Override
                public Fragment getItem(int position) {
                    //获得ViewPagerInfo中管理的fragment
                    return mTabs.get(position).fragment;
                }
                @Override
                public int getCount() {
                    return mTabs.size();
                }
                @Override
                public CharSequence getPageTitle(int position) {
                    //获得标题, 这个tag也就是fragment的标题
                    return mTabs.get(position).tag;
                }
            });
        } else {
            mViewPager.setAdapter(mAdapter);
        }
    }
    /**
     * 导航元素, 也就是Tab页卡上的View
     */
    public abstract View setupTabItemView(String title);
    /**
     * 设置Fragment, 由子类实现
     */
    public abstract void onSetupTabs();
    /**
     * 获得FragmentManager, 这个封装也真是够了, 是为了增加方法数吗?
     */
    public FragmentManager getGenuineFragmentManager() {
        return getFragmentManager();
    }
    /**
     * 添加Fragment对象到ViewPager
     */
    public void addTab(String tag, Class<? extends Fragment> fragment, int catalog) {
        Bundle bundle = new Bundle();
        bundle.putInt(BUNDLE_TYPE, catalog);
        mTabs.add(new ViewPageInfo(tag, Fragment.instantiate(getActivity(), fragment.getName(), bundle)));
    }
    public void addTab(String tag, Class<? extends Fragment> fragment) {
        mTabs.add(new ViewPageInfo(tag, Fragment.instantiate(getActivity(), fragment.getName())));
    }
    public void addTab(String tag, Fragment fragment) {
        mTabs.add(new ViewPageInfo(tag, fragment));
    }
    /**
     * 设置ViewPager当前选中的item
     */
    public void setCurrentItem(int index) {
        mViewPager.setCurrentItem(index);
    }
    /**
     * 获得ViewPager当前选中的item
     */
    public int getCurrentItem() {
        return mViewPager.getCurrentItem();
    }
    /**
     * 获得tabs的数量
     */
    public int getPageCount() {
        return mTabs.size();
    }
    /**
     * ViewPageInformation
     * 将Fragment和tag封装成一个对象,形成一一对应关系
     */
    public static class ViewPageInfo {
        public String tag; //fragment绑定的tag
        public View view; //这个View是为了自定义底部导航栏而设置的
        public Fragment fragment; //内部持有一个Fragment
        public ViewPageInfo(String tag, Fragment fragment) {
            this.tag = tag;
            this.fragment = fragment;
        }
    }
}

• 可以看到 addTab()是在BaseTabFragment类中, 就是将传入的getResources().getString(R.string.new_news)和ListNewsFragment 一一绑定起来. 这里要注意的是三个Tab都是使用的ListNewsFragment, 区分他们显示内容的是addTab()的第三个参数NewsList.CATALOG_ALL,NewsList.CATALOG_WEEK和NewsList.CATALOG_MONTH.

mTabs.add(new ViewPageInfo(tag, Fragment.instantiate(getActivity(), fragment.getName(), bundle)));

• 这里将三个类别使用Bundle封装, 携带到ListNewsFragment中, 可以通过getArguments()获得传入的Bundle对象.

• 这里使用的创建Fragment的方法是instantiate()创建一个指定类名的Fragment对象,相当于调用了Fragment的空参构造.

 public static Fragment instantiate(Context context, String fname, @Nullable Bundle args){...}

• 上面留有疑问的地方是mAdapter一直都没有赋值, 那么每次都会走mAdapter==null的流程,每次创建一个新的适配器吗?

BaseTabMainFragment类

/**
 * 主界面Tabs的fragment基类
 **/
public abstract class BaseTabMainFragment extends BaseTabFragment {
    @Bind(R.id.tab_nav)
    TabLayout mTabLayout;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        //加载通用布局
        return inflater.inflate(R.layout.fragment_universal_tab, container, false);
    }
    @SuppressWarnings("all")
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        ButterKnife.bind(this, view);
        //设置Z轴的高度,显示阴影效果
        ViewCompat.setElevation(mTabLayout, 7);
        if (mAdapter == null) {
            //将TabLayout和ViewPager关联起来,只需要关联一次
            mTabLayout.setupWithViewPager(mViewPager);
        }
    }
    /**
     * 设置Tab页卡上的View, 这里是由父类提供了抽象,子类提供实现,子类最后调用的是子类自己的该方法
     */
    @Override
    public TextView setupTabItemView(String tag) {
        //设置一个TextView
        RelativeLayout layout = (RelativeLayout) View.inflate(mContext, R.layout.view_tab_item, null);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT);
        params.weight = 1; //设置权重
        layout.setLayoutParams(params); //这里有点疑问? 为什么线性布局的params设置到了RelativeLayout中去了
        TextView tabItemView = (TextView) layout.findViewById(R.id.pager_nav_item); 
        tabItemView.setText(tag); //设置显示为Fragment绑定的tag
        return tabItemView;
    }
}

• 代码中有个疑问: 为什么LinearLayout的布局参数可以设置到RelativeLayout中去? 目前没有想清白.

• –> 之前是想错了, 现在过来更正. 这里的含义是将一个RelativeLayout作为子布局添加到一个LinearLayout的父布局中, 并设置RelativeLayout的layout_weight为1. [2016-04-28 update]

• 这里实现tab页卡的方式TableLayout+ViewPager. 从加载layout/fragment_universal_tab.xml可以看到.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--tab navigation-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tab_nav"
        android:background="?attr/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabIndicatorColor="?attr/tab_item_underline"
        app:tabSelectedTextColor="?attr/tab_item_selected"
        app:tabTextColor="?attr/tab_item_unselected" />

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

具体实现方式可以参考这篇文章: ViewPager实现页卡的最新方法–简洁的TabLayout（谷歌支持包）

BaseTabNavFragment类

BaseTabNavFragment类也是继承自BaseTabFragment, 用于添加底部导航元素.
(这个在后面的自定义表情回复评论的Fragment中得以使用)

/**
 * 自定义底部emotion导航元素的viewpager. 
 * 使用场景：表情选项卡，轮番等
 **/
public abstract class BaseTabNavFragment extends BaseTabFragment implements ViewPager.OnPageChangeListener {
    protected LinearLayout mNavLayout;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        super.onCreateView(inflater, container, savedInstanceState);
        //布局中预留了一个LinearLayout用来动态添加View
        return inflater.inflate(R.layout.fragment_dot_nav, container, false);
    }
    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        //获得底部tab的LinearLayout容器
        mNavLayout = (LinearLayout) view.findViewById(R.id.tab_nav);
        super.onViewCreated(view, savedInstanceState);
        mViewPager.addOnPageChangeListener(this); //设置ViewPager的滑动监听
    }
    /**
     * 重写父类的addTab()方法,用于添加底部元素
     */
    @Override
    public void addTab(String title, Class<? extends Fragment> fragment, int catalog) {
        super.addTab(title, fragment, catalog);
        View view = setupTabItemView(title);
        mNavLayout.addView(view);//添加到底部元素
        mTabs.get(mTabs.size() - 1).view = view; //设置到ViewPagerInfo中
    }
    @Override
    public void addTab(String title, Class<? extends Fragment> fragment) {
        super.addTab(title, fragment);
        View view = setupTabItemView(title);
        mNavLayout.addView(view);
        mTabs.get(mTabs.size() - 1).view = view;
    }
    @Override
    public void addTab(String title, Fragment fragment) {
        super.addTab(title, fragment);
        View view = setupTabItemView(title);
        mNavLayout.addView(view);
        mTabs.get(mTabs.size() - 1).view = view;
    }
    /**
     * 设置当前选中的item
     */
    public void setCurrentItem(int index) {
        mViewPager.setCurrentItem(index);
        mTabs.get(index).view.setSelected(true);//设置被tab被选中
    }
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
    /**
     * 当页面被选中时回调
     */
    @Override
    public void onPageSelected(int position) {
        //遍历改变选中状态
        for (int i = 0; i < mTabs.size(); i++) {
            if (position == i)
                mTabs.get(i).view.setSelected(true);
            else
                mTabs.get(i).view.setSelected(false);
        }
    }
    @Override
    public void onPageScrollStateChanged(int state) {
    }
}

• 看完这一段, 我瞬间对作者抽取能力佩服极了. 抽象的BaseTabNavFragment类既能用于顶部的tab,也能用于底部添加view的tab. 而且tab是动态添加进去的. 这个设计确实可以. 点个赞!

时间有点晚了, 明天再战吧. to be continue….