作者简介

本篇来自 徐爱卿 的投稿，分享了自己实现的一个导航条，效果不错，希望大家喜欢！

徐爱卿 的博客地址：

http://www.jianshu.com/u/1c0aa

前言

老早就想写这篇博客了，demo早就完工了，博客到现在才写，惭愧。忘记什么时候开始看微博时，无意中注意到微博的导航条，好有趣，就无聊的拖过来拖过去。不多说，上图。文章末尾有福利哦

可以看下微博，自己滑动试一试。

看到上面的黄色的条条，可长可短，邪恶~两个TAB页，关注和热门。几个特点：

• 关注页面滑到页面的一半宽度以上时会自动切换到热门页面，这是ViewPager的特性。

• 关键看黄条的长度。当关注页面滑动一半时，黄条的长度到达“热门”两个字的接近右边，不会变长。反之，亦然。

• 选中的页面的字体大小与颜色均有变化。

• 黄色线的颜色是渐变的（可以自己认真看下微博导航条的颜色）

开车啦~

看下我的实现：

基础版

升级版

开撸

导航条的整体构造

制作导航条的TextView

导航条的滑动

我们从上到下看看这个导航条是怎么制作的。对于这个，我们可以使用现成的 HorizontalScrollView。也就是这个水平滑动的 ScollView。使用 TextView 填充 HorizontalScrollView 时，会出现两种情况：

分析：

• 根据计算所有 TextView的长度 + TextView的左右边距 与 屏幕宽度 比较，判断 TextView 的总长度大于小于屏幕宽度。

• 导航条上面的分类字数较少时，没有盛满，我们要首先计算平分的每个 TextView 字体的宽度，然后指定 TextView 的左右边距。

• 字数长时，我们设置 TextView 的左右边距为默认边距

这是实现类：

public class ViewPagerTitle extends HorizontalScrollView

根据 TextView 的实际长度计算其左右边距代码：

再看看其他一些方法：

黄色的线-DynamicLine

可以看到黄色的线并不是一条线，而是一个圆角矩形。这就可以使用drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint) 这个API。

关键点在于，黄色圆角矩形的移动，只要更改圆角矩形的起始X坐标与终止X坐标。这样就可以让黄色条条进行移动了

来自定义一个 DynamicLine 继承 View，代码及说明如下：

我们把 DynamicLine 放到 activity 中添加下面代码，测试一下，效果：

有渐变色，有效果。可以，没问题。

后面我们需要知道当 viewpager 切换时动作与 DynamicLine 的 startX 与 stopX 的具体对应关系。可以使用 ViewPager的addOnPageChangeListener(OnPageChangeListener listener) 方法。

public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener

最终实现

最后

其实，整个文章的难点在于如何设计 DynamicLine,刚开始想着很简单 ，但是真到你自己去写写，很多问题。比如，如何确定滑动时的 DynamicLine 位置，以及当一个 TextView 被选中时，它的字体宽度是变大了，这个时候 DynamicLine 的起末位置怎么办 等等。不信，大神你撸一把试试。

为了方便使用 ，对上面的代码优化了，自定义了属性，上到了GitHub，可以查看最新 Dev 分支。更多详细使用方式见下面！

https://github.com/xujianhui404/ViewPagerFlexTitle/tree/dev-1.0.1

福利：看着下面这个APP火了，闲着没事，抓包自己搞了一个，也算是高仿了

设置动态壁纸

https://github.com/xujianhui404/livewallpaper