仿爱奇艺/腾讯视频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