在许多项目中，我们都可以看到可以滑动的tab导航栏，最常见的比如新闻客户端，
刚好最近项目中又有需要用到的地方，之前写过，但是不久之后就忘记了，所以记录下来方便下次查看。
实现滚动的tab导航栏，主要考虑的就是这几点
1可以滑动顶部tab
2当切换viewpager的时候，tab会随之变化
3一般的tab下面会有横线跟随变化
简单的来想就这么几点需要实现的，所以我们谁用horizontalscrollview来实现这个tab.
首先自定义一个horizontalscrollview，来完成我们的内部逻辑，由于其内部是横向的textview,都会有选中的高亮效果，所以我们可以在horizontalscrollview里面包含一个RadioGroup，然后设置选中效果，这样就可以比较方便的实现切换效果了，先添加一个布局文件：
<?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">
<RadioGroup
android:id="@+id/rg_all_title"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:orientation="horizontal">
</RadioGroup>
<ImageView
android:id="@+id/iv_leng"
android:layout_width="45dp"
android:layout_height="1dp"
android:layout_gravity="bottom"
android:background="@color/colorPrimary" />
</LinearLayout>
这里我们只声明了一个RadioGroup,和一个imageview,在代码中，我们会根据导航栏的长度来手动new RadioButton,imageview代表的是下面的指示线。
接下来我们继承一个horizontalscrollview，来写我们具体的方法，首页加载上面写好的布局
mView = inflate(getContext(), R.layout.item_title_scrollview, this);
rg_all_title = mView.findViewById(R.id.rg_all_title);
iv_leng = mView.findViewById(R.id.iv_leng);
这样一来，基本的布局就完成了，只需要声明一个导航的集合来创建就可以了。
当我们手动添加RadioButton的时候，需要给每一个RadioButton设置一个Tag或者Id,这样方便查找到我们添加的RadioButton,我这里给添加一个默认的Id,然后往后面叠加
private int mDefaultId = 56845;//默认Id,一直往后叠加
private List<String> mDatas;
public void setDatas(List<String> datas) {
this.mDatas = datas;
if(mDatas!=null){
addTitle();
}
}
public void addTitle() {
//添加之前先清理掉之前的所有title
rg_all_title.removeAllViews();
for (int i = 0; i < mDatas.size(); i++) {
RadioButton radioButton = new RadioButton(getContext());
//这一块可以根据项目的具体需求，来添加图片或者字体边距等等
radioButton.setBackground(null);
radioButton.setButtonDrawable(null);
radioButton.setText(mDatas.get(i));
//默认颜色，和选中时候的颜色
radioButton.setTextColor(getResources().getColorStateList(R.color.select_home_text));
radioButton.setTextSize(13);
radioButton.setPadding(40, 0, 40, 0);
//设置每个id,这里加i代表减去默认的之后对应的就是viewpager的页面
radioButton.setId(mDefaultId + i);
rg_all_title.addView(radioButton);
if (i == 0) {
//第一次添加的时候，默认第一个为选中的
radioButton.setChecked(true);
}
}
}
到了这里，我们的第一步已经完成，接下来看看第二步，当viewpager切换的时候，Tab也随之变化。
大家都知道，viewpager可以监听pager的切换变化，然后当监听到pager切换之后，找到对应的RadioButton设置为Cheack状态就可以了
private ViewPager viewPager;
//在我们的具体实现页面中，把viewpager传递过来，更好的操作
public void setViewPager(ViewPager viewPager) {
this.viewPager = viewPager;
initViewPager();
}
private void initViewPager() {
//手动添加一个pager改变的监听
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
onMoveRadio(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
public void onMoveRadio(int id) {
RadioButton button = findViewById(id + mDefaultId);
button.setChecked(true);
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
//当点击RadioButton的时候，也切换到对应的viewpager页面
if (viewPager != null) {
viewPager.setCurrentItem(checkedId - mDefaultId);
}
}
这样一来，第二条也可以实现了，但是当viewpager滑动的后面之后，tab不会随之往后面移动，这样肯定不能满足使用需求，结合第三条，tab下面的线条跟随移动，总结下来就是需要监听onPageScrolled,当viewpager滑动时，我们跟随滑动即可。
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
onMoveLeng(position, positionOffset);
}
@Override
public void onPageSelected(int position) {
onMoveRadio(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
public void onMoveLeng(int id, float positionOffset) {
RadioButton button = findViewById(id + mDefaultId);
//选中tab距离左边的距离，来计算移动的
int left = button.getLeft();
int width = button.getWidth() / 2;
//横线的移动距离
int move = (int) (left + (width - iv_leng.getWidth() / 2) + (positionOffset * width * 2));
//ScreenUtils.getScreenWidth(getContext())获取屏幕的宽度，当移动到屏幕右边的tab时候，scrollview向左边移动
int moveX = (int) (left - ScreenUtils.getScreenWidth(getContext()) / 2 + width + (positionOffset * width * 2));
smoothScrollTo(moveX, 0);//scrollview移动
iv_leng.setTranslationX(move);// 横线的移动
}
public void onMoveRadio(int id) {
RadioButton button = findViewById(id + mDefaultId);
button.setChecked(true);
}
这样一来我们的代码就基本全部实现了，在具体需要实现的地方，需要实现其setDatas()方法，以及setViewPager()就可以实现想要的效果了。
完整代码如下：
/**
* Created by hy on 2018/9/11.
*/
public class MenuScrollTitle extends HorizontalScrollView implements RadioGroup.OnCheckedChangeListener {
private View mView;
private RadioGroup rg_all_title;
private ImageView iv_leng;
private List<String> mDatas;
private int mDefaultId = 56845;
private ViewPager viewPager;
public MenuScrollTitle(Context context) {
this(context, null);
}
public MenuScrollTitle(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MenuScrollTitle(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView();
}
private void initView() {
mView = inflate(getContext(), R.layout.item_title_scrollview, this);
rg_all_title = mView.findViewById(R.id.rg_all_title);
iv_leng = mView.findViewById(R.id.iv_leng);
rg_all_title.setOnCheckedChangeListener(this);
}
public void setViewPager(ViewPager viewPager) {
this.viewPager = viewPager;
initViewPager();
}
private void initViewPager() {
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
onMoveLeng(position, positionOffset);
}
@Override
public void onPageSelected(int position) {
onMoveRadio(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
public void onMoveLeng(int id, float positionOffset) {
RadioButton button = findViewById(id + mDefaultId);
int left = button.getLeft();
int width = button.getWidth() / 2;
int lengmove = (int) (left + (width - iv_leng.getWidth() / 2) + (positionOffset * width * 2));
final int moveX = (int) (left - ScreenUtils.getScreenWidth(getContext()) / 2 + width + (positionOffset * width * 2));
smoothScrollTo(moveX, 0);
iv_leng.setTranslationX(lengmove);
}
public void onMoveRadio(int id) {
RadioButton button = findViewById(id + mDefaultId);
button.setChecked(true);
}
public void setDatas(List<String> datas) {
this.mDatas = datas;
addTitle();
}
public void addTitle() {
rg_all_title.removeAllViews();
for (int i = 0; i < mDatas.size(); i++) {
RadioButton radioButton = new RadioButton(getContext());
radioButton.setBackground(null);
radioButton.setButtonDrawable(null);
radioButton.setText(mDatas.get(i));
radioButton.setTextColor(getResources().getColorStateList(R.color.select_home_text));
radioButton.setTextSize(13);
radioButton.setPadding(40, 0, 40, 0);
radioButton.setId(mDefaultId + i);
rg_all_title.addView(radioButton);
if (i == 0) {
radioButton.setChecked(true);
}
}
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
if (viewPager != null) {
viewPager.setCurrentItem(checkedId - mDefaultId);
}
}
}
