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才可以有标题