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

KCrason發表於2018-01-24
Viewpager

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

dynamic.gif

一、如何引入DynamicPagerIndicator？

在module的build.gradle 新增:
compile 'com.kcrason:dynamicpagerindicator:1.0.3'
3.0以上gradle版本為：
implementation 'com.kcrason:dynamicpagerindicator:1.0.3'
複製程式碼

二、如何使用？

1、將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"
            />
複製程式碼

2、將ViewPager物件設定給DynamicPagerIndicator

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

三、屬性說明

  • pagerIndicatorMode : 指示器的顯示模式，共有三種。 1、scrollable：適用於ViewPager的count較多時。可滑動。預設從左向右排列顯示 2、scrollable_center：居中顯示，適用於ViewPager的count較少時，且需要居中顯示 3、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下的導航條的滾動模式，共有兩種 1、dynamic：即愛奇藝/騰訊視訊那種可變化長度的效果。導航條長度、位置均變化。 2、transform：普通移動效果，導航條長度不變，位置變化。

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

1、建立一個類繼承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);
    }
}
複製程式碼

2、建立一個類繼承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);
    }
}
複製程式碼

3、在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"
            />
複製程式碼

設定監聽

1、設定單個TabView點選監聽：通過DynamicPagerIndicator的物件設定OnItemTabClickListener即可。

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

2、設定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

相關文章