在許多項目中逮壁，我們都可以看到可以滑動的tab導(dǎo)航欄颓遏，最常見的比如新聞客戶端徐矩，
剛好最近項目中又有需要用到的地方，之前寫過叁幢，但是不久之后就忘記了滤灯，所以記錄下來方便下次查看。
實現(xiàn)滾動的tab導(dǎo)航欄，主要考慮的就是這幾點
1可以滑動頂部tab
2當(dāng)切換viewpager的時候鳞骤，tab會隨之變化
3一般的tab下面會有橫線跟隨變化
簡單的來想就這么幾點需要實現(xiàn)的窒百，所以我們誰用horizontalscrollview來實現(xiàn)這個tab.
首先自定義一個horizontalscrollview，來完成我們的內(nèi)部邏輯豫尽，由于其內(nèi)部是橫向的textview,都會有選中的高亮效果篙梢，所以我們可以在horizontalscrollview里面包含一個RadioGroup，然后設(shè)置選中效果美旧，這樣就可以比較方便的實現(xiàn)切換效果了渤滞，先添加一個布局文件：
<?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,在代碼中，我們會根據(jù)導(dǎo)航欄的長度來手動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);
這樣一來录肯，基本的布局就完成了趴腋，只需要聲明一個導(dǎo)航的集合來創(chuàng)建就可以了。
當(dāng)我們手動添加RadioButton的時候论咏，需要給每一個RadioButton設(shè)置一個Tag或者Id,這樣方便查找到我們添加的RadioButton,我這里給添加一個默認(rèn)的Id,然后往后面疊加
private int mDefaultId = 56845;//默認(rèn)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());
//這一塊可以根據(jù)項目的具體需求优炬，來添加圖片或者字體邊距等等
radioButton.setBackground(null);
radioButton.setButtonDrawable(null);
radioButton.setText(mDatas.get(i));
//默認(rèn)顏色，和選中時候的顏色
radioButton.setTextColor(getResources().getColorStateList(R.color.select_home_text));
radioButton.setTextSize(13);
radioButton.setPadding(40, 0, 40, 0);
//設(shè)置每個id,這里加i代表減去默認(rèn)的之后對應(yīng)的就是viewpager的頁面
radioButton.setId(mDefaultId + i);
rg_all_title.addView(radioButton);
if (i == 0) {
//第一次添加的時候厅贪，默認(rèn)第一個為選中的
radioButton.setChecked(true);
}
}
}
到了這里蠢护，我們的第一步已經(jīng)完成，接下來看看第二步养涮，當(dāng)viewpager切換的時候葵硕，Tab也隨之變化。
大家都知道贯吓，viewpager可以監(jiān)聽pager的切換變化懈凹，然后當(dāng)監(jiān)聽到pager切換之后，找到對應(yīng)的RadioButton設(shè)置為Cheack狀態(tài)就可以了
private ViewPager viewPager;
//在我們的具體實現(xiàn)頁面中悄谐，把viewpager傳遞過來介评，更好的操作
public void setViewPager(ViewPager viewPager) {
this.viewPager = viewPager;
initViewPager();
}
private void initViewPager() {
//手動添加一個pager改變的監(jiān)聽
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) {
//當(dāng)點擊RadioButton的時候，也切換到對應(yīng)的viewpager頁面
if (viewPager != null) {
viewPager.setCurrentItem(checkedId - mDefaultId);
}
}
這樣一來爬舰，第二條也可以實現(xiàn)了们陆，但是當(dāng)viewpager滑動的后面之后，tab不會隨之往后面移動情屹，這樣肯定不能滿足使用需求坪仇，結(jié)合第三條，tab下面的線條跟隨移動垃你，總結(jié)下來就是需要監(jiān)聽onPageScrolled,當(dāng)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())獲取屏幕的寬度雾袱，當(dāng)移動到屏幕右邊的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);
}
這樣一來我們的代碼就基本全部實現(xiàn)了官还，在具體需要實現(xiàn)的地方芹橡，需要實現(xiàn)其setDatas()方法，以及setViewPager()就可以實現(xiàn)想要的效果了望伦。
完整代碼如下：
/**
* 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);
}
}
}
