入门级自定义view 仿IOS风格ViewPager指示器
2017-03-14 本文已影响939人
07c82148bfa4
老规矩,先来看看效果
![](https://img.haomeiwen.com/i2516147/1ead5d89ee61ca4b.png)
- 最近在模仿一个app,效果如上图所示。这个设计来自新海诚的动漫《你的名字》男主使用的一个日记app。
- 网上搜了一下,发现已经有很多大牛做出来了。现在才动手,确实有点晚,自己弄着玩玩吧。
![](https://img.haomeiwen.com/i2516147/afdf3e00378c7c7f.jpg)
- 随便在网上下载了一个类似的Demo看了看发觉头部的仿照IOS风格的ViewPager指示器风格比较独特,搜了下没找到合适的 也懒得找源码了,于是就自己自定义了一个。
![](https://img.haomeiwen.com/i2516147/d850a54744d4f5e1.png)
用到了一些技术
- 贝塞尔曲线
- 用来绘制两边的半圆角矩形,貌似没必要这么复杂,不过一时也没想到好的解决方法,如果你有更好的解决方案,欢迎评论
- 文字居中显示的处理
/**绘制文字*/
Paint.FontMetrics fontMetrics = paint.getFontMetrics();
float top = fontMetrics.top;//为基线到字体上边框的距离,即上图中的top
float bottom = fontMetrics.bottom;//为基线到字体下边框的距离,即上图中的bottom
//基线中间点的y轴计算公式
int baseLineY = (int) (height / 2 - top / 2 - bottom / 2);
- 刚刚入门自定义的同学,感兴趣就去我的GitHub围观源码吧。哈哈!
github.com/mnnyang/IOSIndicator
![](https://img.haomeiwen.com/i2516147/8ea81a40d2941625.jpg)
- 我感觉也没必要动不动就自定义,太麻烦了,如果有更好的解决方案,欢迎评论。