爱奇艺首页底部导航按钮android,仿爱奇艺/腾讯视频ViewPager导航条实现
仿爱奇艺/腾讯视频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导航条实现相关推荐
- android高仿奇艺影视,android仿爱奇艺加载动画实例
本篇文章介绍了android仿爱奇艺加载动画实例,具体代码如下: 效果图: 用到的知识点: Path ValueAnimator 如果对Path和ValueAnimator还不熟悉推荐去看这几个大神的 ...
- android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果 发布时间:2020-10-09 19:48:00 来源:脚本之家 阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
- android实现超酷的腾讯视频首页和垂直水平网格瀑布流一揽子效果
代码地址如下: http://www.demodashi.com/demo/13381.html 先来一波demo截图 实现ListView.GridView.瀑布流 1.导入RecyclerView ...
- android自定义视频列表,Android仿京东天猫列表页播视频看这一篇就足够了
阅读本文解决什么问题? 解决android 滑动列表页自动播视频中的一些技术难点.助力更好的实现类似需求.不涉及到播放器的具体编解码技术,因为各家用的播放器可能都不一样(其实是我不会~) 何时播视频最 ...
- android ffmpeg 仿剪映播放器 剪辑视频 预览条 快速精准抽帧
android ffmpeg 仿剪映播放器 剪辑视频 预览条 快速精准抽帧 由于本人想学习音视频相关的东西,所以找了剪映作为借鉴,通过仿照剪映的功能学习音视频相关的东西,所以有了这个项目 暂时这个项目 ...
- Android仿抖音上下滑动切换视频
Android仿抖音上下滑动切换视频 https://www.jianshu.com/p/af9c0e46725d 自从各大直播平台可以滑动切换直播间后,公司就出了一大波需求,还要配合各种收费,各种 ...
- php仿微信底部菜单,Android实现简单底部导航栏 Android仿微信滑动切换效果
Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...
- android滑动菜单图标,Android实现简单底部导航栏 Android仿微信滑动切换效果
Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...
- android 底部滑动效果怎么做,Android实现简单底部导航栏 Android仿微信滑动切换效果...
android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义view配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...
最新文章
- 第一讲 NLP和深度学习入门
- linux设置mysql定时任务_原创 Linux下实现Mysql定时任务备份数据
- 使用SQLite学习SQL
- 丑憨批的爬虫笔记1(导学+requests))
- 动态获取textarea后面的p标签_HTML简单标签连起实现的小玩意:
- Windows CMD常用命令大全(值得收藏)
- xp系统 护眼模式
- Datalogic得利捷推出具有强大视觉系统功能的紧凑型智能相机P2X系列
- ubuntu20 隐藏 顶部_ubuntu gnome桌面隐藏顶栏
- java随机点名_javascript实现的一个随机点名功能
- 用命令如何返回上级目录
- 编译程序、解释程序、汇编程序和编译、解释的概念
- 5Gwifi和手机5G区别
- Java 程序员,真的不能去外包吗?
- 2013-8-17 上周工作总结
- java号码分身_电话号码分身问题
- plc c语言 软元件t,三菱PLC软元件的种类及功能大全
- TFN-F7系列光时域反射仪(OTDR)
- json 大括号 转意_json字符串中的大括号转义传到后台_JSON 序列化中的转义和 Unicode 编码...
- uinty中对于物体颜色循环往复
热门文章
- 机器学习项目(四)疫情期间网民情绪识别
- 论文学习11-Adversarial training for multi-context joint entity and relation extraction(实体关系买抽取模型,对抗学习
- 使用ngModel创建组件
- H5 与 IOS的爱恨情仇(兼容问题)
- javascript语法速查表
- webservice 原理
- JS学习笔记-1--基本知识和注意事项
- Flex 学习笔记------FLACC Crossbridge
- 编程之美--读书笔记--返回一个数组中所有元素被第一个元素除的结果
- 【转载】不带www跳转www.设定网站唯一入口,提升权重!