SmartTabLayout + ViewPager的使用

使用步骤

1,使用的前提
    1,SmartTabLayout+ViewPager是在Fragment中使用
    2,之前抽取了一个BaseFragment
2,UI简单布局
    RelativeLayout
        SmartTabLayout
               height="48dp"
        ViewPager

    注意:
        这个可以直接在github官方上面直接复制布局文件(https://github.com/ogaclejapan/SmartTabLayout)


3,代码中实现的步骤
        1,在initView中初始化视图
        2,在initData中
            1,初始化SmartTabLayout和ViewPager绑定的一些信息集合(标题,Fragment的字节码对象,传递的参数)
            2,初始化SmartTabLayout和ViewPager的一些绑定事件
        3,定义一个SmartTabInfo的类,来封装标题,Fragment的字节码对象,传递的参数
        4,定义一个ViewPager用到的继承FragmentPagerAdapter的适配器对象

具体的实现

UI简单的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
    <com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@+id/viewpagertab"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:stl_indicatorAlwaysInCenter="false"
        app:stl_indicatorWithoutPadding="false"
        app:stl_indicatorInFront="false"
        app:stl_indicatorInterpolation="smart"
        app:stl_indicatorGravity="bottom"
        app:stl_indicatorColor="@color/main_green"
        app:stl_indicatorThickness="4dp"
        app:stl_indicatorWidth="auto"
        app:stl_indicatorCornerRadius="2dp"
        app:stl_overlineColor="#eeeeee"
        app:stl_overlineThickness="0dp"
        app:stl_underlineColor="#81b18d"
        app:stl_underlineThickness="1dp"
        app:stl_dividerColor="#4D000000"
        app:stl_dividerThickness="0dp"
        app:stl_defaultTabBackground="?attr/selectableItemBackground"
        app:stl_defaultTabTextAllCaps="true"
        app:stl_defaultTabTextColor="#4D000000"
        app:stl_defaultTabTextSize="12sp"
        app:stl_defaultTabTextHorizontalPadding="16dp"
        app:stl_defaultTabTextMinWidth="0dp"
        app:stl_distributeEvenly="true"
        app:stl_clickable="true"
        app:stl_titleOffset="24dp"
        app:stl_drawDecorationAfterTab="false"

        app:stl_customTabTextLayoutId="@layout/custom_tab"
        app:stl_customTabTextViewId="@id/custom_text"

        />

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

        />

</RelativeLayout>

    注意事项:
        布局中修改文字被选中时颜色改变的
                //主要是这个,添加布局里面只有TextView,给TextView设置文字颜色选择器
                app:stl_customTabTextLayoutId="@layout/custom_tab"

                app:stl_customTabTextViewId="@id/custom_text"
        布局中去除tab之间分隔线
                app:stl_overlineThickness="0dp" 
        布局中修改SmartTabLayout和ViewPager之间的分隔线颜色和高度
                app:stl_underlineColor="#81b18d"
                app:stl_underlineThickness="1dp"
        布局中设置几个标题平分整行
                stl_distributeEvenly = "true"

代码逻辑的实现

package com.example.guixin.oschina.base;

import android.support.v4.view.ViewPager;
import android.view.View;

import com.example.guixin.oschina.adapter.MyPagerAdapter;
import com.example.guixin.oschina.bean.SmartTabInfo;
import com.ogaclejapan.smarttablayout.SmartTabLayout;

import net.oschina.app.R;

import java.util.ArrayList;

/**
 * 类    名:  ${CLASS_NAME}
 * 创 建 者:  guixin
 * 创建时间:  2017/3/2 4:42
 * 更新者  :  $$Author$$
 * 版    本:  $$Rev$$
 * 更新时间:  $$Date$$
 * 描    述： 用于将SmartTabLayout和ViewPager进行展示
 */
public  class BaseSmartPagerFragment extends BaseFragment {


    protected SmartTabLayout mViewpagertab;

    protected ViewPager               mViewpager;
    protected ArrayList<SmartTabInfo> mSmartTabInfos;


    @Override
    protected View initView() {
        View rootView = View.inflate(mContext, R.layout.fragment_base_smart_pager, null);
        mViewpager = (ViewPager) rootView.findViewById(R.id.viewpager);
        mViewpagertab = (SmartTabLayout) rootView.findViewById(R.id.viewpagertab);
        return rootView;
    }

    @Override
    protected void initData() {
        super.initData();
        //初始化ViewPager和SmartTabLayout用到的数据
        initSmartTabInfos();
        //初始化SmartTablayout和ViewPager
        initSmartTablayoutAndViewPager();
    }



    /**
     * 初始化SmartTabInfos的集合信息
     * 标题
     * 创建的Fragment字节码
     * 传递的参数
     * 子类必须实现
     */
    protected  void initSmartTabInfos(){
         //初始化Adapter需要使用的数据,标题,创建的Fragment对象,传递的参数
            mSmartTabInfos = new ArrayList<SmartTabInfo>();
            Bundle bundle = new Bundle();
            bundle.putString("args","我是资讯");
            // Fragment fragment = Fragment.instantiate(mContext, NewsPagerFragment.class.getName());
            NewsPagerFragment fragment = new NewsPagerFragment();
            mSmartTabInfos.add(new SmartTabInfo("最新动弹", NewsPagerFragment.class,bundle));
            mSmartTabInfos.add(new SmartTabInfo("热门动弹", NewsPagerFragment.class,null));
            mSmartTabInfos.add(new SmartTabInfo("我的动弹", NewsPagerFragment.class,null));
    }

    private void initSmartTablayoutAndViewPager() {

        mViewpager.setAdapter(new MyPagerAdapter(getChildFragmentManager(),mContext, mSmartTabInfos));
        mViewpagertab.setViewPager(mViewpager);
    }


    注意事项:
        因为多个页面的Fragment中都使用到了有SmartTabLayout和ViewPager所以我们可以进行抽取,只让子Fragment实现SmartTabInfo集合的封装



}

用于封装SmartTabLayout和ViewPager中用到的数据信息 SmartTabInfo

public class SmartTabInfo {


    public String mTitle;
    public Class mClazz;
    public Bundle mBundle;

    public SmartTabInfo(String title, Class clazz, Bundle bundle) {

        mTitle = title;
        mClazz = clazz;
        mBundle = bundle;
    }
}

    注意事项:
        数据封装中classz用于通过反射获取Fragment的名字,然后再通过Fragment.instantiate(mContext,classz.getName())来获取相应的Fragment对象

ViewPager的适配器

    private Context                 mContext;
    private ArrayList<SmartTabInfo> mSmartTabInfos;

    public MyPagerAdapter(FragmentManager fm, Context context, ArrayList<SmartTabInfo> smartTabInfos) {
        super(fm);
        mContext = context;
        mSmartTabInfos = smartTabInfos;
    }

    @Override
    public Fragment getItem(int position) {
        return Fragment.instantiate(mContext, mSmartTabInfos.get(position).mClazz.getName());
    }

    @Override
    public int getCount() {
        return mSmartTabInfos.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
         return mSmartTabInfos.get(position).mTitle;
    }

    注意事项:
        1,getItem中返回Fragment调用Fragment.instantiate(mContext,mSmartTabInfos.get(position).mClassz.getName());
        2,注意要重写getPageTitle才可以有标题