仿爱奇艺 / 腾讯视频 ViewPager 导航条实现

本贴最后更新于 2493 天前,其中的信息可能已经时移俗易

仿爱奇艺/腾讯视频 ViewPager 导航条实现,支持自定义导航条高度,宽度,颜色变化,字体大小变化。支持多种滚动模式,支持自定义每个 TabView 的样式。项目地址:github.com/KCrason/Dyn…

一、如何引入 DynamicPagerIndicator?

在module的build.gradle 添加:
compile 'com.kcrason:dynamicpagerindicator:1.0.0'
3.0以上gradle版本为:
implementation 'com.kcrason:dynamicpagerindicator:1.0.0'

二、如何使用?

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() 返回自定义 ViewTextView(该 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"
            />

作者:KCrason
链接:https://juejin.im/post/5a67cd096fb9a01cbf3880c4
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖
  • ViewPager
    3 引用

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...