前言
最近开发的一个产品需要涉及到订单，订单页涉及到了一个ui元素，类似饿了么的订单页以及支付宝口碑外卖订单页的彩带（通俗点讲就是一条两种颜色相间而成的分割线）：
可以看到，风格基本都是以两种颜色为主相间拼接，至于长度则完全由屏幕宽度来决定，因此如果想要通过设计成图片素材来作为imageview的背景的方式实现的话，效果并不理想，因为图片的宽度完全无法确定。所以本文通过自定义view的方式，绘制出这样一个彩带的效果。
实现
1.android中如何绘制四边形
我要评论
public class colourlineview extends view{
public colourlineview(context context) {
super(context, null);
}
public colourlineview(context context, attributeset attrs) {
super(context, attrs, 0);
}
public colourlineview(context context, attributeset attrs, int defstyleattr) {
super(context, attrs, defstyleattr);
}
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas);
int width = getwidth();
int height = getheight();
path path = new path();
canvas.save();
path.reset();//重置路径
path.moveto(width/2, 0);//左上点
path.lineto(0, height);//左下点
path.lineto(width-width/2, height);//右下点
path.lineto(width, 0);//右上点
canvas.clippath(path);//截取路径所绘制的图形
canvas.drawcolor(color.red);
path.reset();//重置路径，准备绘制第三种颜色的平行四边形
canvas.restore();
}
}
主要看ondraw方法，可以看到首先获取view的宽和高，然后建立路径对象path，接着先将path的起点移动到（控件宽的二分之一处，0）处：
接着由该点向（0， 控件高）处绘制一条直线：
接着由（0， 控件高）向（控件宽的二分之一处，高度）绘制一条直线：
接着由（控件宽的二分之一处，高度）向（控件宽， 0）绘制一条直线：
路径绘制完毕，调用clippath将路径的图形剪出来，便成了一个平行四边形，再给它填充个颜色。
在布局文件中使用一下：
<com.example.yang.statubardemo.colourlineview android:layout_width="80dp" android:layout_height="80dp" android:background="#000"/>
效果如图：
平行四边形的效果就出来了，了解了如何绘制平行四边形，也就相当于写好了砖块，砌成墙自然就不是事了。
2.绘制彩色分割线
首先，我们这个view可以定义的东西应该有如下这几点：
1.可以自定义每个颜色块的大小
2.可以自定义两种颜色
3.可以自定义颜色块之间的间隔
4.平行四边形颜色块倾斜的程度
5.背景色
下面着手来实现这个效果
首先定义一下属性，在attrs.xml中加入如下：
<declare-styleable name="colourlineview"> <!--线条高度--> <attr name="line_height" format="dimension"/> <!--第一种颜色块的宽度--> <attr name="item_width" format="dimension"/> <!--第二种颜色块的宽度--> <attr name="separation_width" format="dimension"/> <!--平行四边形倾斜的程度--> <attr name="lean_degree" format="dimension"/> <!--第一种颜色--> <attr name="first_color" format="color"/> <!--第二种颜色--> <attr name="second_color" format="color"/> <!--线条底色--> <attr name="canvas_color" format="color"/> </declare-styleable>
自定义view代码：
**
* created by it_zjyang on 2017/2/9.
*/
public class colourlineview extends view{
//线条高度
private float line_height;
//每个颜色块的宽度
private float item_width;
//每两个颜色快之间的间距
private float separation_width;
//平行四边形倾斜的程度
private float lean_degree;
//第一种颜色块的颜色
private int first_color;
//第二种颜色块的颜色
private int second_color;
//线条底色
private int canvas_color;
public colourlineview(context context) {
super(context, null);
}
public colourlineview(context context, attributeset attrs) {
super(context, attrs);
initattr(context, attrs);
}
public colourlineview(context context, attributeset attrs, int defstyleattr) {
super(context, attrs, defstyleattr);
initattr(context, attrs);
}
public void initattr(context context, attributeset attrs){
typedarray typedarray = context.obtainstyledattributes(attrs, r.styleable.colourlineview);
line_height = typedarray.getdimension(r.styleable.colourlineview_line_height, 20);
item_width = typedarray.getdimension(r.styleable.colourlineview_item_width, 20);
separation_width = typedarray.getdimension(r.styleable.colourlineview_separation_width, 20);
lean_degree = typedarray.getdimension(r.styleable.colourlineview_lean_degree, 5);
first_color = typedarray.getcolor(r.styleable.colourlineview_first_color, color.red);
second_color = typedarray.getcolor(r.styleable.colourlineview_second_color, color.green);
canvas_color = typedarray.getcolor(r.styleable.colourlineview_canvas_color, color.white);
typedarray.recycle();
}
@override
protected void ondraw(canvas canvas) {
super.ondraw(canvas);
path path = new path();
int linewidth = getwidth();
int lineheight = getheight();
int count = (item_width + separation_width == 0) ? 0 : linewidth / (int) (item_width + separation_width) + 1;
for(int i=0; i < count; i++){
canvas.save();
path.reset();//重置路径
path.moveto(lean_degree + (item_width + separation_width) * i, 0);//左上点
path.lineto((item_width + separation_width) * i, lineheight);//左下点
path.lineto(item_width * (i + 1) + separation_width * i, lineheight);//右下点
path.lineto(lean_degree + item_width * (i + 1) + separation_width * i, 0);//右上点
canvas.clippath(path);//截取路径所绘制的图形
if(i % 2 == 0){
canvas.drawcolor(first_color);
}else{
canvas.drawcolor(second_color);
}
canvas.restore();
}
}
}
其中，initattr方法就不多说了，就是单纯的获取attr里面的属性值，关键看ondraw中的代码，我们要实现多个平行四边形间隔着绘制，那首先需要计算出有多少个平行四边形，将每一个【颜色块+间距】作为一个小部分，然后以整体的宽度/【颜色块+间距】得出有多少个，然后通过for循环绘制出每一个item，关键在于如何定位平行四边形的四个端点，下面举个例子说明一下思路：
当i = 0，也就是第一个颜色块，那么其左上角一定是（lean_degree，0），左下角为（0，line_height），右上角肯定是左上角+颜色块宽度，所以为（lean_degree+item_width, 0），同理右下角肯定是左下角+颜色块宽度，所以为（item_width, line_height）。
当i = 1，也就是第二个颜色块，此时需要注意，左上角需要在刚才第一个的基础上加上第一个【颜色块+间距】的值，也就是（lean_degree+ (item_width + separation_width) *1，0），左下角则为（(item_width + separation_width) *1，line_height），右下和右上同理只是在左上左下的基础上加上item_width。
.............
.............
.............
当i = i时，四个点也就成了：
（lean_degree + (item_width + separation_width) * i , 0）
（(item_width + separation_width) * i , lineheight）
（item_width * (i + 1) + separation_width * i , lineheight）
（lean_degree + item_width * (i + 1) + separation_width * i , 0）
然后再根据奇偶性判断，让两种颜色间隔绘制，完成。
使用
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:gravity="center" tools:context="com.example.zjyang.statubardemo.mainactivity"> <com.example.zjyang.statubardemo.colourlineview android:layout_width="match_parent" android:layout_height="5dp" android:background="#fff" app:first_color="@color/coloraccent" app:second_color="@color/colorprimary" app:item_width="15dp" /> </linearlayout>
可以看到高度设置为5dp，每个颜色块宽度为15dp，底色为白色，两个颜色块使用两种不同的颜色，效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
android:screenOrientation=“portrait“ 一直警告报红
Codeforces C. A Cookie for You (模拟 / 分类 / 贪心) (Round #654 Div.2)
DialogFragment弹窗（带黑色透明背景和不带黑色透明背景）
网友评论