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

dynamic.gif

一、如何引入DynamicPagerIndicator？

在module的build.gradle 添加:

compile 'com.kcrason:dynamicpagerindicator:1.0.0'

3.0以上gradle版本為：

implementation 'com.kcrason:dynamicpagerindicator:1.0.0'

二、如何使用？

1、將DynamicPagerIndicator 添加到指定xml

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無區別。

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"

/>

最后

總結

以上是生活随笔為你收集整理的爱奇艺首页底部导航按钮android,仿爱奇艺/腾讯视频ViewPager导航条实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。