仿愛奇藝/騰訊視訊ViewPager導航條實現，支援自定義導航條高度，寬度，顏色變化，字型大小變化。支援多種滾動模式，支援自定義每個TabView的樣式。 專案地址：DynamicPagerIndicator
一、如何引入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