使用步驟
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();
initSmartTabInfos();
initSmartTablayoutAndViewPager();
}
/**
* 初始化SmartTabInfos的集合信息
* 標題
* 創建的Fragment字節碼
* 傳遞的參數
* 子類必須實現
*/
protected void initSmartTabInfos(){
mSmartTabInfos = new ArrayList<SmartTabInfo>();
Bundle bundle = new Bundle();
bundle.putString("args","我是資訊");
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集合的封裝
}
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對象
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纔可以有標題
