Android ViewPagerIndicator下划线颜色、样式设置

最新推荐文章于 2024-08-10 08:36:05 发布

Rex_Code

最新推荐文章于 2024-08-10 08:36:05 发布

阅读量1w

点赞数 6

分类专栏：原创 android 文章标签： android library viewpagerindicator-as版

本文链接：https://blog.youkuaiyun.com/csdn2314/article/details/75576849

版权

原创同时被 2 个专栏收录

51 篇文章

订阅专栏

android

16 篇文章

订阅专栏

ViewPagerIndicator GitHub地址。
笔者是刚学安卓的菜鸟一枚，有错或者不好的地方请多指教。

本文主要讲怎么把 ViewPagerIndicator 导入到 Android Studio 和自定义样式（类似网易新闻）。

导入到 Android Studio：

首先在GitHub上把框架下载下来，下载好解压后，里面应该有个 library 的文件夹，接下来就是把它导入到 Android Studio；
在Android Studio 里面点 import module，笔者是Mac，Windows的AS路径应该差不多吧

3.在弹出的界面中，把上面提到的 library 文件夹导进来，点右边的 … 按钮直接导进来
这里写图片描述

4.然后就是点击下一步、最后点 Finish 就可以了，到现在就基本导入完成了。如果报错，跟着提示来就好了，基本上Android Studio都会帮我们搞好；报错的话应该都是没有添加依赖，添加依赖就好了，如下图所示：
这里写图片描述

设置样式（类似网易新闻）

怎么使用ViewPagerIndicator，大家应该都会吧，比较简单，网上有很多教程的……
首先是在Layout 文件的代码如下图所示：
这里写图片描述

然后在对应的Java文件中通过 findViewById 找到两个控件关联起来就可以了，官网也有介绍：
这里写图片描述

记得要给你的ViewPager 设置 PageAdapter ，实在不会用的可以上网查下怎么用。

接下来介绍大家比较关心的自定义样式问题：

效果图

在 styles.xml文件中添加style即可，如下图所示：
这里写图片描述

先说标题的选中与未选中颜色的设置，主要是设置 textColor，用一个selector 来完成，在drawable文件夹下创建一个selector ，代码截图如下(截图里的颜色是笔者自定义的，大家也可以自定义喜欢的颜色)：
这里写图片描述

然后是下划线和选中时的设置，如果不想要下划线，直接把 background 这一项注释掉就好，也是一个selector

这里写图片描述

设置下划线基本就是这样了，注意了：不能用颜色来代替，用颜色来代替没有效果，要用.9图片来进行设置（防止拉伸变形），图片的高度可以直接叫UI切小一点的图片就可以。笔者刚开始也不知道怎么自定义下划线的颜色，网上找了半天，很多人都没有说明，直接贴代码，也没有对应的图片，很多新手都没搞明白怎么设置。图片和 selector的代码大家在下载的时候都在官方的Demo里面了，都可以在Demo里面找到。

这里写图片描述

官方的Demo如下图所示：
这里写图片描述

大家可以直接拷贝官方Demo的代码，和拿官方Demo里面的图片进行测试。有什么不懂得可以留言，如果笔者恰好懂得话，会回复大家的。

写的不好，高手勿喷，谢谢。

custom_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Non focused states -->
    // 分割线
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_unselected" />
    // 选中 凸起的分割线
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_selected" />

    <!-- Focused states -->
    <!--<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_unselected_focused" />-->
    <!--<item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/custom_tab_indicator_selected_focused" />-->

    <!-- Pressed 点击时候的背景 -->
    <!--&lt;!&ndash;    Non focused states &ndash;&gt;-->
    <!--<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_unselected_pressed" />-->
    <!--<item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_selected_pressed" />-->

    <!--    Focused states -->
    <!--<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_unselected_pressed" />-->
    <!--<item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/custom_tab_indicator_selected_pressed" />-->

</selector>