门户网站建站注意事项,珠海医疗网站建设,保定 网站建设,专门做设计的网站仿爱奇艺/腾讯视频ViewPager导航条实现#xff0c;支持自定义导航条高度#xff0c;宽度#xff0c;颜色变化#xff0c;字体大小变化。支持多种滚动模式#xff0c;支持自定义每个TabView的样式。项目地址#xff1a;https://github.com/KCrason/DynamicPagerIndicatord…仿爱奇艺/腾讯视频ViewPager导航条实现支持自定义导航条高度宽度颜色变化字体大小变化。支持多种滚动模式支持自定义每个TabView的样式。项目地址https://github.com/KCrason/DynamicPagerIndicatordynamic.gif一、如何引入DynamicPagerIndicator在module的build.gradle 添加:compile com.kcrason:dynamicpagerindicator:1.0.03.0以上gradle版本为implementation com.kcrason:dynamicpagerindicator:1.0.0二、如何使用1、将DynamicPagerIndicator 添加到指定xmlandroid:idid/dynamic_pager_indicator1android:layout_widthmatch_parentandroid:layout_heightwrap_contentapp:indicatorLineScrollModedynamicapp:pagerIndicatorModescrollable_center/2、将ViewPager对象设置给DynamicPagerIndicatorViewPager 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*/Overridepublic TextView getTitleTextView() {return mTextView;}Overridepublic 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);}Overridepublic 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:idid/dynamic_pager_indicator5android:layout_widthmatch_parentandroid:layout_heightwrap_contentapp:indicatorLineHeight20dpapp:indicatorLineRadius8dipapp:indicatorLineScrollModedynamicapp:pagerIndicatorModefixed/最后
