仿愛奇藝/騰訊視頻ViewPager導航條實現

仿愛奇藝/騰訊視頻ViewPager導航條實現，支持自定義導航條高度，寬度，顏色變化，字體大小變化。支持多種滾動模式，支持自定義每一個TabView的樣式。 項目地址：DynamicPagerIndicator

1、如何引入DynamicPagerIndicator？

在module的build.gradle 添加:
compile 'com.kcrason:dynamicpagerindicator:1.0.3'
3.0以上gradle版本爲：
implementation 'com.kcrason:dynamicpagerindicator:1.0.3'
複製代碼

2、如何使用？

一、將DynamicPagerIndicator 添加到指定xml

<com.kcrason.dynamicpagerindicatorlibrary.DynamicPagerIndicator
            android:id="@+id/dynamic_pager_indicator1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:indicatorLineScrollMode="dynamic"
            app:pagerIndicatorMode="scrollable_center"
            />
複製代碼

二、將ViewPager對象設置給DynamicPagerIndicator

ViewPager viewPager = findViewById(R.id.view_pager);
DynamicPagerIndicator dynamicPagerIndicator = findViewById(R.id.dynamic_pager_indicator);
dynamicPagerIndicator.setViewPager(viewPager);
複製代碼

3、屬性說明

• pagerIndicatorMode : 指示器的顯示模式，共有三種。 一、scrollable：適用於ViewPager的count較多時。可滑動。默認從左向右排列顯示 二、scrollable_center：居中顯示，適用於ViewPager的count較少時，且須要居中顯示 三、fixed：均分模式，該模式下會平均分配TabView的寬度

• tabPadding：其爲TabView的左右內邊距。

• tabNormalTextSize：其爲TabView中Title的文字正常狀態文字大小。

• tabSelectedTextSize：其爲TabView中Title的文字選中狀態文字大小。

• tabNormalTextColor：其爲TabView中Title的文字正常狀態文字顏色。

• tabSelectedTextColor：其爲TabView中Title的文字選中狀態文字顏色。

• indicatorLineHeight：其爲TabView下的導航條的高度。

• indicatorLineWidth：其爲TabView下的導航條的寬度。

• indicatorLineRadius：其爲TabView下的導航條的圓角，默認爲0，即不繪製圓角。

• indicatorLineStartColor：其爲TabView下的導航條變化的開始顏色。若是不須要顏色變換效果，將indicatorLineStartColor和indicatorLineEndColor設置成一致便可。

• indicatorLineEndColor：其爲TabView下的導航條變化的結束顏色。若是不須要顏色變換效果，將indicatorLineStartColor和indicatorLineEndColor設置成一致便可。

• indicatorLineMarginTop：其爲TabView下的導航條的上邊距。

• indicatorLineMarginBottom：其爲TabView下的導航條的下邊距。

• indicatorLineScrollMode：其爲TabView下的導航條的滾動模式，共有兩種 一、dynamic：即愛奇藝/騰訊視頻那種可變化長度的效果。導航條長度、位置均變化。 二、transform：普通移動效果，導航條長度不變，位置變化。

4、自定義TabView(即自定義指示器的Item的樣式)

一、建立一個類繼承PagerTabView，重寫initPagerTabView()方法去將自定義的View加入PagerTabView。並複寫getTitleTextView()返回自定義View的TextView（該TextView用於顯示指示器的標題，必不可少）。

public class CustomPagerTabView extends PageTabView {

    private TextView mTextView;

    public CustomPagerTabView(Context context) {
        super(context);
    }

    .....省略部分構造方法....

    /** *自定義PagerTabView必須複寫該方法返回一個TextView用於顯示標題 * @return */
    @Override
    public TextView getTitleTextView() {
        return mTextView;
    }

    @Override
    public void initPagerTabView(Context context) {
        View view = LayoutInflater.from(getContext()).inflate(R.layout.tab_view, this, false);
        mTextView = view.findViewById(R.id.title);
        addView(view);
    }
}
複製代碼

二、建立一個類繼承DynamicPagerIndicator並重寫createTabView()。在createTabView()建立自定義的PagerTabView並將其設置給DynamicPagerIndicator。

public class CustomPagerIndicator extends DynamicPagerIndicator {

    public CustomPagerIndicator(Context context) {
        super(context);
    }

    public CustomPagerIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomPagerIndicator(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void createTabView(PagerAdapter pagerAdapter, final int position) {
        CustomPagerTabView customPagerTabView = new CustomPagerTabView(mContext);
        setTabTitleTextView(customPagerTabView.getTitleTextView(), position, pagerAdapter);
        setTabViewLayoutParams(customPagerTabView, position);
    }
}
複製代碼

三、在xml中使用自定義的CustomPagerIndicator，屬性設置和DynamicPagerIndicator無區別。

<com.kcrason.dynamicpagerindicator.CustomPagerIndicator
            android:id="@+id/dynamic_pager_indicator5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:indicatorLineHeight="20dp"
            app:indicatorLineRadius="8dip"
            app:indicatorLineScrollMode="dynamic"
            app:pagerIndicatorMode="fixed"
            />
複製代碼

設置監聽

一、設置單個TabView點擊監聽：經過DynamicPagerIndicator的對象設置OnItemTabClickListener便可。

dynamicPagerIndicator.setOnItemTabClickListener(new DynamicPagerIndicator.OnItemTabClickListener() {
            @Override
            public void onItemTabClick(int position) {
                Toast.makeText(this, "you click " + position, Toast.LENGTH_SHORT).show();
            }
        });
複製代碼

二、設置ViewPager的監聽，因爲DynamicPagerIndicator內部已經設置了ViewPager的監聽，因此外部若是須要ViewPager的監聽，須要用到新的接口OnOutPageChangeListener。

dynamicPagerIndicator.setOnOutPageChangeListener(new DynamicPagerIndicator.OnOutPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        
        或者經過實現內部靜態類
        
        dynamicPagerIndicator1.setOnOutPageChangeListener(new DynamicPagerIndicator.SimpleOnOutPageChangeListener(){
            @Override
            public void onPageScrollStateChanged(int state) {
                super.onPageScrollStateChanged(state);
            }

            @Override
            public void onPageSelected(int position) {
                super.onPageSelected(position);
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            }
        });
複製代碼

版本更新

1.0.3

• 增長pagerIndicatorScrollToCenterMode模式選擇,意爲導航條滾動居中的模式。該模式只針對pagerIndicatorMode=scrollable時有效。共有兩種，第一種爲linkage(聯動模式)：滑動頁面時，整個導航欄同步移動到居中的位置。第二種爲transaction(異動模式)：滑動頁面完整後，纔將須要居中顯示的欄目滑動的居中的位置。

• 修改更新TabView數量的方法爲updateTabView(),再也不使用createOrUpdateTabView(ViewPager viewpager)去更新TabView的數量。

1.0.2

• 增長tabTextColorMode模式選擇，共有兩種。第一種爲common，即普通文字變化模式。第二種爲gradient，即從未選中的顏色漸變到選中的顏色。

• TabView的數量可動態配置。配合ViewPager+Fragment(多個)動態更新時的狀況。當須要更新TabView的數量時。使用DynamicPagerIndicator對象的去調用createOrUpdateTabView(ViewPager viewpager)便可。

最後

有任何問題請留言我，歡迎訪問個人我的博客。Welcome to KCrason's blog