时间:2021-05-19
前言
最近开发的一个产品需要涉及到订单,订单页涉及到了一个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将路径的图形剪出来,便成了一个平行四边形,再给它填充个颜色。
在布局文件中使用一下:
效果如图:
平行四边形的效果就出来了,了解了如何绘制平行四边形,也就相当于写好了砖块,砌成墙自然就不是事了。
2.绘制彩色分割线
首先,我们这个View可以定义的东西应该有如下这几点:
1.可以自定义每个颜色块的大小
2.可以自定义两种颜色
3.可以自定义颜色块之间的间隔
4.平行四边形颜色块倾斜的程度
5.背景色
下面着手来实现这个效果
首先定义一下属性,在attrs.xml中加入如下:
自定义View代码:
其中,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,底色为白色,两个颜色块使用两种不同的颜色,效果如下:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了Android自定义SpaceItemDecoration分割线的具体代码,供大家参考,具体内容如下此线是在RecyclerView中的Gr
体验了一下美团外卖的底部导航栏,感觉动画很流畅,分割线被顶起,还有图标的动画,可能用的lottie,觉得分割线被顶起可以自己写动画,所以试着写了一下。想自定义v
androidRecyclerView不像过去的ListView那样随意的设置水平方向的分割线,如果要实现RecyclerView的水平/垂直分割线,则需要继承
word分割线设置方法: 1、首先打开word空白文档; 2、直线分割线,先输入三个减号、按回车键即可。 3、波浪线分割线,先输入三个波浪号,按回车键即可
很多人在使用WPS打印预览的时候看到预览图上会显示出分割线,为了预览效果更好我们可以将分割线取消掉,那么怎么样取消打印分割线呢?下面一起来看看吧。如图:WPS教