android viewpager 滑動菜單欄Tab導航

在許多項目中，我們都可以看到可以滑動的tab導航欄，最常見的比如新聞客戶端，

剛好最近項目中又有需要用到的地方，之前寫過，但是不久之后就忘記了，所以記錄下來方便下次查看。

實現(xiàn)滾動的tab導航欄，主要考慮的就是這幾點

1可以滑動頂部tab
2當切換viewpager的時候，tab會隨之變化
3一般的tab下面會有橫線跟隨變化

簡單的來想就這么幾點需要實現(xiàn)的，所以我們誰用horizontalscrollview來實現(xiàn)這個tab.

首先自定義一個horizontalscrollview，來完成我們的內(nèi)部邏輯，由于其內(nèi)部是橫向的textview,都會有選中的高亮效果，所以我們可以在horizontalscrollview里面包含一個RadioGroup，然后設置選中效果，這樣就可以比較方便的實現(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ù)導航欄的長度來手動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);

這樣一來，基本的布局就完成了，只需要聲明一個導航的集合來創(chuàng)建就可以了。
當我們手動添加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());
            //這一塊可以根據(jù)項目的具體需求，來添加圖片或者字體邊距等等
            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);
            }
        }
    }

到了這里，我們的第一步已經(jīng)完成，接下來看看第二步，當viewpager切換的時候，Tab也隨之變化。
大家都知道，viewpager可以監(jiān)聽pager的切換變化，然后當監(jiān)聽到pager切換之后，找到對應的RadioButton設置為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) {
        //當點擊RadioButton的時候，也切換到對應的viewpager頁面
        if (viewPager != null) {
            viewPager.setCurrentItem(checkedId - mDefaultId);
        }
    }

這樣一來，第二條也可以實現(xiàn)了，但是當viewpager滑動的后面之后，tab不會隨之往后面移動，這樣肯定不能滿足使用需求，結(jié)合第三條，tab下面的線條跟隨移動，總結(jié)下來就是需要監(jiān)聽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);
    }

這樣一來我們的代碼就基本全部實現(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);
        }
    }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容