之前我已经讲过了viewpager+fragment实现底部导航栏了，不是很清楚的同学，可以看我的另一篇文章
fragment+viewPager实现底部导航栏
今天，我们来讲讲 viewpager+fragment 实现顶部导航栏的方法。本文是借助第三方库来实现此功能的，第三方库的导入方法，大家可以看我的另一篇文章：
androidstudio中第三方library的添加与删除
然后本文的编写参考了以下链接，在此非常感谢
仿今日头条最强顶部导航指示器，支持6种模式
github地址：https://github.com/shanyao0/TabPagerIndicatorDemo
需要注意的是，引用的第三方库，需要你到上面的 git地址 中去复制一个 tabpagerindictor 的第三方库，本文也是对这一库的使用做一个简单的介绍。
ok，下面就正式对这一库进行讲解啦。
首先，给自己的项目中引入tabpagerindictor 第三方库
不知道怎么加载第三方库的，看我上面的链接，这里就不赘述了
第二步，写MenuActivity的xml文件
注：我的fragment框架是在MenuActivity中搭建的,大家就当是MainActivity看吧，我懒得改了
<?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:background="#fff"
android:orientation="vertical">
<shanyao.tabpagerindictor.TabPageIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="40dp"
/>
<android.support.v4.view.ViewPager
android:id="@+id/vpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff" />
</LinearLayout>
然后是Fragment和baseFragment，这里我就贴一小段代码吧，具体的Fragment代码和Fragment对应的xml文件，以及baseFragment代码，大家可以参看我的fragment+viewPager实现底部导航栏中的代码，是一样的。
package com.test.ui.fragment;
import android.view.View;
import android.widget.TextView;
import com.test.R;
import butterknife.BindView;
/**
* Created by Admin on 2017/6/7.
*/
public class Fragment1 extends BaseFragment implements View.OnClickListener{
@BindView(R.id.txt_content)
TextView mTvContext;
@Override
protected int getLayoutId() {
return R.layout.one_fragment;
}
@Override
protected void initData() {
}
@Override
protected void setListener() {
mTvContext.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.txt_content:
break;
}
}
}
Fragment1对应的xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
<TextView
android:id="@+id/txt_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="one"
android:textColor="@color/black"
android:textSize="20sp"/>
</LinearLayout>
BaseFragment代码如下：
package com.test.ui.fragment;
import android.content.Context;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import com.test.util.StringUtil;
import com.test.util.ToastUtil;
import butterknife.ButterKnife;
import butterknife.Unbinder;
/**
* Created by Admin on 2017/6/7.
*/
public abstract class BaseFragment extends Fragment {
protected View mLayoutView;
protected Context mContext;
private Unbinder mUnbinder;
@Override
public void onAttach(Context context) {
super.onAttach(context);
mContext = context;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
mLayoutView = inflater.inflate(getLayoutId(), container, false);
mUnbinder=ButterKnife.bind(this,mLayoutView);//绑定framgent
onCreateFragmentView(inflater, container, savedInstanceState);
return mLayoutView;
}
protected void onCreateFragmentView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
initData();
setListener();
}
@Override
public void onDestroy() {
if(mUnbinder!=null){
mUnbinder.unbind();
}
super.onDestroy();
}
protected abstract int getLayoutId();
protected abstract void initData();
protected abstract void setListener();
/**
* 获取editText的值
*
* @param et
* @return
*/
protected String getTextOfEditText(EditText et){
if (et == null) {
return null;
}
if (et.getText() == null) {
return null;
}
if (StringUtil.isEmpty(et.getText().toString())) {
return "";
}
return et.getText().toString().trim();
}
protected void showToast(String msg) {
if (StringUtil.isNotEmpty(msg)) {
ToastUtil.show(msg);
}
}
protected void showShortToast(String msg){
if (StringUtil.isNotEmpty(msg)) {
ToastUtil.shortShow(msg);
}
}
}
然后是MenuActivity中的代码了：
package com.test.ui.fragment;
import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.View;
import com.test.R;
import com.test.app.AppActivity;
import com.test.util.LogUtil;
import java.util.ArrayList;
import java.util.List;
import butterknife.BindView;
import shanyao.tabpagerindictor.TabPageIndicator;
/**
* Created by Admin on 2017/6/7.
*/
public class MenuActivity extends AppActivity implements View.OnClickListener,TabOnPageChangeListener.OnSelectedFragmentListener {
public static Intent newIndexIntent(Context context) {
Intent newIntent = new Intent(context, MenuActivity.class);
return newIntent;
}
@BindView(R.id.vpager)
ViewPager mViewPager;
@BindView(R.id.indicator)
TabPageIndicator indicator;
private List<String>mTitleList;
private List<Fragment> mFragmentList;
private MainPagerAdapter mainPagerAdapter;
private TabOnPageChangeListener mTabOnPageChangeListener;
@Override
protected int getContentViewId() {
return R.layout.activity_menu;
}
@Override
protected void initData() {
mTitleList=new ArrayList<>();
mTitleList.add("微信");
mTitleList.add("通讯录");
mTitleList.add("发现");
mTitleList.add("我");
mTitleList.add("它们");
mTitleList.add("世界");
mTitleList.add("海底");
mTitleList.add("个人");
mTitleList.add("完全");
mFragmentList=new ArrayList<>();
mFragmentList.add(0, new Fragment1());
mFragmentList.add(1, new Fragment2());
mFragmentList.add(2, new Fragment3());
mFragmentList.add(3, new Fragment4());
mFragmentList.add(4, new Fragment3());
mFragmentList.add(5, new Fragment2());
mFragmentList.add(6, new Fragment1());
mFragmentList.add(7, new Fragment2());
mFragmentList.add(8, new Fragment3());
mTabOnPageChangeListener=new TabOnPageChangeListener(mViewPager);
mainPagerAdapter = new MainPagerAdapter(getSupportFragmentManager(), mFragmentList,mTitleList);
mViewPager.setOffscreenPageLimit(4);// 设置预加载Fragment个数
mViewPager.setAdapter(mainPagerAdapter);
mViewPager.setCurrentItem(0);// 设置当前显示标签页为第一页
indicator.setViewPager(mViewPager);// 绑定indicator
setTabPagerIndicator();
String ss=mViewPager.getAdapter().getClass().getName();
LogUtil.e("=======sss=="+ss);
}
@Override
protected void setListener() {
mViewPager.addOnPageChangeListener(mTabOnPageChangeListener);
mTabOnPageChangeListener.setOnSelectedFragmentListener(this);
// indicator.setOnPageChangeListener(this);
}
/**
* 通过一些set方法，设置控件的属性
*/
private void setTabPagerIndicator() {
indicator.setIndicatorMode(TabPageIndicator.IndicatorMode.MODE_NOWEIGHT_EXPAND_SAME);// 设置模式，一定要先设置模式
indicator.setDividerColor(Color.parseColor("#00bbcf"));// 设置分割线的颜色
indicator.setDividerPadding(10);//设置
indicator.setIndicatorColor(Color.parseColor("#43A44b"));// 设置底部导航线的颜色
indicator.setTextColorSelected(Color.parseColor("#43A44b"));// 设置tab标题选中的颜色
indicator.setTextColor(Color.parseColor("#797979"));// 设置tab标题未被选中的颜色
indicator.setTextSize(35);// 设置字体大小
}
@Override
public void onClick(View v){
}
@Override
public void selectedFragment(int index) {
switch (index) {
case 0:
break;
case 1:
break;
case 2:
break;
case 3:
break;
}
}
@Override
protected void onDestroy() {
super.onDestroy();
}
}
这里我viewpager没有使用他给的去实现OnPageChangeListener的滑动的监听，而是实现的自己写的一个TabOnPageChangeListener监听，主要是为了去掉滑动到边界时出现的阴影
然后是viewPager对应的adapter即MainPagerAdapter的代码：
package com.test.ui.fragment;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.View;
import java.util.List;
/***
* 标签主页适配器
*
* @author pei
* @version 1.0
* @create 2016-6-21
*/
public class MainPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragmentList;
private List<String> mTitles;
public MainPagerAdapter(FragmentManager fm, List<Fragment> mFragmentList,List<String> mTitles) {
super(fm);
this.mFragmentList = mFragmentList;
this.mTitles=mTitles;
}
@Override
public Fragment getItem(int position) {
// TODO Auto-generated method stub
return mFragmentList == null ? null : mFragmentList.get(position);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return mFragmentList == null ? 0 : mFragmentList.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mTitles == null ? null :mTitles.get(position);
}
@Override
public void destroyItem(View container, int position, Object object) {
// super.destroyItem(container, position, object);
}
}
注意，MainPagerAdapter中重写了getPageTitle方法，视为了给顶部滑动条添加标题。
最后，讲下这个库的一些基本用法：
库包括六种模式：
1.MODE_WEIGHT_NOEXPAND_SAME：标题均分，不能扩展，底部导航线跟标题宽度一致
2.MODE_WEIGHT_NOEXPAND_NOSAME：标题均分，不能扩展，底部导航线跟标题宽度不一致
3.MODE_NOWEIGHT_NOEXPAND_SAME：标题不均分，不能扩展，底部导航线跟标题宽度一致
4.MODE_NOWEIGHT_NOEXPAND_NOSAME：标题不均分宽度，不能扩展，底部导航线跟标题宽度不一致
5.MODE_NOWEIGHT_EXPAND_SAME：标题不均分宽度，能扩展，底部导航线跟标题宽度一致
6.MODE_NOWEIGHT_EXPAND_NOSAME：标题不均分宽度，能扩展，底部导航线跟标题宽度不一致
常用方法说明
setIndicatorMode()//设置控件的模式，上面是提到的6种模式
setDividerColor()//设置两个标题之间的竖直分割线的颜色，如果不需要显示这个，设置颜色为透明即可
setDividerPadding()//设置中间竖线上下的padding值
setIndicatorColor()//设置底部导航线的颜色，就是上面演示图的绿色导航线
setIndicatorHeight()// 设置底部导航线的高度
setDividerPadding()// 设置Tab标题之间的间距
setTextColorSelected()//设置tab标题选中的颜色
setTextColor()//设置tab标题未被选中的颜色
setTextSize()//设置字体的大小
setUnderlineColor()// 设置最下面一条的横线的颜色
setUnderlineHeight()//设置最下面一条的横线的高度
setScrollOffset()// 这个方法是当选择MODE_NOWEIGHT_EXPAND_NOSAME和MODE_NOWEIGHT_EXPAND_SAME这两个模式的时候有作用
具体作用大家，可以下载Demo自己试一试
其它的实现原理以及其它的一些使用方法的话，大家可以参看我上面的链接。
ok，今天的讲解就到这里，谢谢诶。
