自定义TabHost+Fragment+ViewPager
几经百度.COM周遭，依旧没找着小编期望的效果（标题），最终还是自己动手弄了个，就差支持导航栏水平滚动了。如标题论述，TabHost完全自定义，并定义每个Tab的点击监听效果，以及底部导航线的滑动拉长缩小的效果。此过程注意的只是Tab底下导航线的长度和位置控制，因为此自定义Tab文本内容长度不一致需要调整。下面将效果丢出来，再论述下代码的主要实现。
1.顶部Tab实现
顶部导航栏自定义Tab继承LinearLayout，其主要任务包括每个Tab标签的TextView以及底部导航线View的子视图添加。在init()方法中小编默认加上两个Tab标签，为的是在.xml引用的时候能够直接显示导航栏的呈现效果。而后还给每个Tab标签加上了点击监听，并自定义OnTabSelectListener回调监听将点击的事件分发给ViewPager，从而实现底下Fragment的切换。
public class TabHostNavView extends LinearLayout {
private Context mContext;
public View mLineV;
public LinearLayout mTabNavLly;
// 导航内容
public List<String> mNavNamesLs = new ArrayList<>();
// 引导线高度
private int mLineHeight = 5;
// 通用间隔
private int mDistance = 5;
public TabHostNavView(Context context) {
super(context);
this.mContext = context;
initView();
}
public TabHostNavView(Context context, AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
initView();
}
public TabHostNavView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
initView();
}
public void setmNavNamesLs(List<String> mNavNamesLs) {
this.mNavNamesLs = mNavNamesLs;
initView();
}
public void initView() {
// 设置默认导航栏内容，以便xml引用直接查看效果
if (mNavNamesLs.isEmpty()) {
mNavNamesLs.add("TAB_ONE");
mNavNamesLs.add("TAB_TWO");
}
this.removeAllViews();
LayoutParams params = new LayoutParams(
LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
this.setLayoutParams(params);
this.setOrientation(VERTICAL);
mTabNavLly = new LinearLayout(mContext);
mTabNavLly.setLayoutParams(params);
mTabNavLly.setOrientation(HORIZONTAL);
for (int i = 0, k = mNavNamesLs.size(); i < k; i++) {
params = new LayoutParams(0, LayoutParams.WRAP_CONTENT, mNavNamesLs.get(i).length());
TextView mNavTv = new TextView(mContext);
mNavTv.setLayoutParams(params);
mNavTv.setText(mNavNamesLs.get(i));
mNavTv.setTextColor(getResources().getColor(i == 0 ?
R.color.blue : R.color.black));
mNavTv.setTextSize(14.0f);
mNavTv.setPadding(mDistance, mDistance, mDistance, mDistance);
mNavTv.setGravity(Gravity.CENTER);
mNavTv.setTag(i);
mNavTv.setOnClickListener(mOnclick);
mTabNavLly.addView(mNavTv);
}
this.addView(mTabNavLly);
if (mLineV == null) {
params = new LayoutParams(LayoutParams.MATCH_PARENT, mLineHeight);
mLineV = new View(mContext);
params.leftMargin = mDistance;
params.rightMargin = mDistance;
mLineV.setLayoutParams(params);
mLineV.setBackgroundColor(getResources().getColor(R.color.blue));
}
this.addView(mLineV);
}
/** * @param position 刷新选中项 */
public void refreshTab(int position) {
if (mTabNavLly == null || position < 0) return;
for (int i = 0, k = mTabNavLly.getChildCount(); i < k; i++) {
if (mTabNavLly.getChildAt(i) instanceof TextView) {
((TextView) mTabNavLly.getChildAt(i)).setTextColor(
getResources().getColor(i == position ? R.color.blue : R.color.black)
);
}
}
}
OnClickListener mOnclick = new OnClickListener() {
@Override
public void onClick(View v) {
if (mOnTabSelectListener != null)
mOnTabSelectListener.onTabSelect((int) v.getTag());
}
};
private OnTabSelectListener mOnTabSelectListener;
public void setOnTabSelectListener(OnTabSelectListener listener) {
this.mOnTabSelectListener = listener;
}
public interface OnTabSelectListener {
void onTabSelect(int position);
}
}2.ViewPager的切换监听
这里我们继承OnPageChangeListener实现Viewpager的滑动切换监听，并在内部onPageScrolled();函数当中实现对Tab底部导航线的位置控制。具体控制方案已经在代码中体现，表面上还是比较抽象的。另外，需要注意的有，引用该类的时候记得调用init();将上面的导航栏导进入（方便编辑Tab标签和导航线），且小编将ViewPager的适配器也一并写入其中，这样实现耦合度提高了，这个就根据个人需要检出吧。
public class TabHostPagerView extends ViewPager {
private Context mContext;
// 导航栏
private TabHostNavView mTabNav;
// 屏幕宽度
private float mScreenWidth;
public TabHostPagerView(Context context) {
super(context);
this.mContext = context;
}
public TabHostPagerView(Context context, AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
}
/** * @param navView 关联导航栏视图 * @param fm Frame管理器 * @param list 展示Fragment集合 */
public void init(TabHostNavView navView, FragmentManager fm, List<Fragment> list) {
this.mTabNav = navView;
this.setOnPageChangeListener(mPageChange);
this.mScreenWidth = DisplayUtil.getScreenWidth(mContext);
this.mTabNav.setOnTabSelectListener(onTabSelect);
if (list.isEmpty()) return;
this.setAdapter(new TabFragmentAdapter(fm, list));
}
/** * 卡片内容切换监听 */
OnPageChangeListener mPageChange = new OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (mTabNav == null) return;
int currentIndex = getCurrentItem();
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)
mTabNav.mLineV.getLayoutParams();
int beforeWeight = 0;// 当前页左边内容（字体长度）所占水平位置上的权重
int selfWeight = 0;// 当前页本身（字体长度）所占水平位置上的权重
int afterWeight = 0;// 当前页右边本身（字体长度）所占水平位置上的权重
int lastWeight = 0;// 上一页本身（字体长度）所占水平位置上的权重
int nextWeight = 0;// 下一页本身（字体长度）所占水平位置上的权重
int sum = 0;// 水平位置上的总内容权重（总的字体长度）
for (int i = 0, k = mTabNav.mNavNamesLs.size(); i < k; i++) {
int length = mTabNav.mNavNamesLs.get(i).length();
sum += length;
if (i < currentIndex) {
beforeWeight += length;
if (i == currentIndex - 1) lastWeight = length;
} else if (i > currentIndex) {
afterWeight += length;
if (i == currentIndex + 1) nextWeight = length;
} else {
selfWeight = length;
}
}
if (currentIndex > position) {// 由左向右滑动
params.leftMargin = (int) ((positionOffset - 1) * mScreenWidth * lastWeight / sum
+ beforeWeight * (mScreenWidth / sum));
params.rightMargin = (int) ((1 - positionOffset) * mScreenWidth * selfWeight / sum
+ afterWeight * (mScreenWidth / sum));
} else {
params.leftMargin = (int) (positionOffset * mScreenWidth * selfWeight / sum
+ beforeWeight * (mScreenWidth / sum));
params.rightMargin = (int) (-positionOffset * mScreenWidth * nextWeight / sum
+ afterWeight * (mScreenWidth / sum));
}
mTabNav.mLineV.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
if (mTabNav == null) return;
mTabNav.refreshTab(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
/** * 导航栏点击项监听（自定义监听接口） */
TabHostNavView.OnTabSelectListener onTabSelect = new TabHostNavView.OnTabSelectListener() {
@Override
public void onTabSelect(int position) {
setCurrentItem(position);
}
};
/** * 卡片内容适配器 */
public static class TabFragmentAdapter extends FragmentPagerAdapter {
List<Fragment> fragmentList = new ArrayList<>();
public TabFragmentAdapter(FragmentManager fm, List<Fragment> fragmentList) {
super(fm);
this.fragmentList = fragmentList;
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
}
3.引用实例
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingLeft="@dimen/space_main" android:paddingRight="@dimen/space_main" android:paddingTop="@dimen/space_min" android:paddingBottom="@dimen/space_min" android:background="@color/blue">
<include layout="@layout/include_search_anything" />
</LinearLayout>
<View style="@style/LineHorizontal" />
<路径.TabHostNavView android:id="@+id/them_tab_nav" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dp"/>
<路径.TabHostPagerView android:id="@+id/them_vp_view" android:layout_width="match_parent" android:layout_height="match_parent"/>
</LinearLayout>public class ThemFragmentActivity extends BaseFragmentActivity {
// 顶部导航
@ViewInject(R.id.them_tab_nav)
private TabHostNavView mTabNav;
// 卡片视图
@ViewInject(R.id.them_vp_view)
private TabHostPagerView mTabView;
private ThemHYFL_Fragment mFrameHYFL = new ThemHYFL_Fragment();
private ThemTJ_Fragment mFrameTJ = new ThemTJ_Fragment();
private ThemZD_Fragment mFrameZD = new ThemZD_Fragment();
private ThemZRM_Fragment mFrameZRM = new ThemZRM_Fragment();
private ThemZX_Fragment mFrameZX = new ThemZX_Fragment();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_them);
ViewUtils.inject(this);
initContent();
}
private void initContent() {
mTabNav.setmNavNamesLs(Arrays.asList(getResources().getStringArray(R.array.them_nav_name)));
Fragment[] fragments = {mFrameHYFL, mFrameTJ, mFrameZD, mFrameZRM, mFrameZX};
mTabView.init(mTabNav, getSupportFragmentManager(), Arrays.asList(fragments));
}
}以上即为实现了自定义Tab导航栏以及ViewPager切换Fragment的效果，实现手段比较粗糙。之后需要跟进优化的是导航栏的水平移动和自动居中效果，Fragment内容ScrollView或者ListView的滑动兼容以及引用5.X谷歌上下拉刷新加载更多的特效。期待后面能对接上。
更好的推荐：https://github.com/canyinghao/CanRefresh