来,先看下效果图:
怎么样?漂亮吧,上面是一个标题栏,下面是一个弧形的 View,标题栏和弧形 View 从左到右都有一个线性的渐变色,类似于手机 QQ 顶部的渐变效果,关于弧形的这种效果,使用的场景还是比较普遍的,小面我们就一起来看看如何绘制吧。
1.先自定义一个 ArcView
创建一个类 ArcView 继承于 View,然后我们重写其三个构造方法,还有 onMeasure() 和 onDraw() 方法,这都是自定义 View 最基本的写法,比较简单这里就不详细说了, onMeasure() 用于测量 View 的宽高尺寸,onDraw() 就是具体的绘制过程了,具体的绘制思路是:我们在 onMeasure()方法中拿到测量出来的宽和高,然后再 onDraw() 中初始化一个画笔,我们可以创建一个 LinearGradient 对象,然后调用设置画笔的 setShader() 方法就可以达到画笔渐变色的效果,然后再创建一个 Rect 对象,这里只是创建了一个矩形对象,要想绘制弧形,我们还需要设置绘制的路径,创建一个 Path 对象,分别调用 moveTo() 方法,和 quadTo() 方法,moveTo ()不会进行绘制,只用于移动移动画笔,一般和其他方法配合使用,这里和 quadTo() 方法配合使用,而 quadTo() 用于绘制圆滑的曲线,即贝塞尔曲线。mPath.quadTo(x1, y1, x2, y2) 其中x1、y1 为控制点,x2、y2 为结束点。有了路径之后我们就可以轻而易举地绘制出一个弧形了,完整的代码请看下面:
1 | /** |
我这里只定义了弧形的高度和背景颜色这两个自定义属性,其中还有渐变颜色的开始色值和结束色值,还有是否需要渐变等属性,都可以定义为自定义的属性,方便直接在布局文件中灵活进行配置,以适应不同的需求,也比较简单,我这里为了就不实现了。
2.自定义一个通用的 titlebar
这样做我们可以提高代码的复用性,可以将一些功能封装进去,也更好地体现了封装的思想,实现也比较简单,使用 LayoutInflater 加载了一个布局文件,然后将 文字,字体大小,字体颜色和 title 背景色等定义成了自定义的属性,方便在布局文件中进行设置,另外我们内部默认处理了点击返回按钮的事件,对于需要其他特殊情况下返回按钮的处理,我们也定义了一个接口,方便外部使用接口来自行进行处理,代码也非常简单,看下面:
1 | /** |
因为这里为了和绘制的弧形协调,我将 title 布局的背景设置了一个渐变的 shape 。
3.将布局延伸到系统状态栏
Android 5.0 之后我们可以设置 Activity 的布局延伸到系统状态栏中,这样我们页面看起来更美观和协调,设置也比较简单,直接贴代码了:
1 | @Override |
另外在布局文件中也可以设置,只需在你 App 引用的主题中添加一行代码即可:
注意:因为这个属性是 5.0 之后才有的,在实际开发中需要做兼容处理,代码中设置时需要判断一下版本,布局文件中可以新建一个 values-v21 文件夹做兼容处理。
如果你的 title 的文字跑到状态栏里了,那样会很丑,在 title 布局的根标签中添加下面一行代码就可以了:
1 | android:fitsSystemWindows="true" |
这行代码的意思就是不占用系统状态栏的空间。
好了,所有绘制工作都已经完成了,是不是非常简单呢?如果觉得不错的话,欢迎点赞、评论和转发,你们的支持是我坚持不懈的动力!