android viewpager 滑动菜单栏Tab导航

在许多项目中，我们都可以看到可以滑动的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);
        }
    }
}