android自定义u形线,Android自定义彩色织带分割线
前言
最近开发的一个产品需要涉及到订单,订单页涉及到了一个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将路径的图形剪出来,便成了一个平行四边形,再给它填充个颜色。
在布局文件中使用一下:
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#000"/>
效果如图:
平行四边形的效果就出来了,了解了如何绘制平行四边形,也就相当于写好了砖块,砌成墙自然就不是事了。
2.绘制彩色分割线
首先,我们这个View可以定义的东西应该有如下这几点:
1.可以自定义每个颜色块的大小
2.可以自定义两种颜色
3.可以自定义颜色块之间的间隔
4.平行四边形颜色块倾斜的程度
5.背景色
下面着手来实现这个效果
首先定义一下属性,在attrs.xml中加入如下:
自定义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)
然后再根据奇偶性判断,让两种颜色间隔绘制,完成。
使用
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">
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"
/>
可以看到高度设置为5dp,每个颜色块宽度为15dp,底色为白色,两个颜色块使用两种不同的颜色,效果如下:
android自定义u形线,Android自定义彩色织带分割线相关推荐
- android自定义u形线,Android实战之自定义View折线图
如果你对自定义View还不是很了解,那么这篇文章将从实战的角度带你一步一步的编写出一个符合规范的自定义View. 需求:假设有一个病人,他不定时的将自己的血压值录入到我们的客户端,而我们要做的就是将他 ...
- android 自定义radiobutton 样式,RadioButton自定义点击时的背景颜色
一.应用场景: 在使用 RadioButton 时,有时我们会需要自定义点击时改变背景颜色的效果. 效果图: RadioButton自定义背景颜色.jpg 二.实现步骤: 1.新建一组 RadioBu ...
- android小球移动代码,Android自定义圆形View实现小球跟随手指移动效果
本文实例为大家分享了Android实现小球跟随手指移动效果的具体代码,供大家参考,具体内容如下 一. 需求功能 手指在屏幕上滑动,红色的小球始终跟随手指移动. 实现的思路: 1)自定义View,在on ...
- android 画布实现签名,Android 自定义View手写签名并保存图片
1.自定义View--支撑设置画笔色彩,画笔宽度,画板色彩,铲除画板,查看是否有签名,保存画板图片(仿制粘贴可直接使用) /***CreatedbyYyyyQon2020/3/5. *电子签名*/pu ...
- android canvas绘制圆角_Android自定义View撸一个渐变的温度指示器(TmepView)
秦子帅明确目标,每天进步一点点..... 作者 | andy 地址 | blog.csdn.net/Andy_l1/article/details/82910061 1.概述 自定义View对需要 ...
- android 自定义图片容器,Android应用开发中自定义ViewGroup视图容器的教程
一.概述在写代码之前,我必须得问几个问题: 1.ViewGroup的职责是啥?ViewGroup相当于一个放置View的容器,并且我们在写布局xml的时候,会告诉容器(凡是以layout为开头的属性, ...
- android 实现自定义监听接口,Android在自定义类中实现自定义监听器方式
Android在自定义类中实现自定义监听器方式 发布时间:2020-08-31 06:19:39 来源:脚本之家 阅读:203 作者:Simon_Qi 监听器可以说是Android开发中最常用的东西之 ...
- Android之自定义控件一起制作自定义标签
今天我们要实现的效果如下: 当然列表中的标签显示的个数是可控的,实现个数可控的标签的话,我们就需要自定义View. 我们自定义一个抽象类继承LinearLayout并实现我们定义的接口: BaseTa ...
- android自定义xml弹窗,Android自定义弹窗提醒控件使用详解
Android中原生的Dialog弹窗提醒控件样式单一,有时候并不能满足我们的项目需求,而且一个工程里面有时候会在多处都用到弹窗提醒的功能,代码会出现大量的冗余,工作之余,就自己实现了这么一个弹窗提醒 ...
最新文章
- 提升方法---提升树
- 数据结构源码笔记(C语言):堆排序
- 【构建之法教学项目】一个简单的基于C#的电子商务系统演练场景的代码示例...
- 网络爬虫(一):配置selenium、pycharm(windows平台)
- javafx_JavaFX技巧4:总结
- 汇编语言调用c语言ads,ADS1.2 在汇编代码中调用C函数
- homestead安装swoole扩展
- 小米max刷鸿蒙,小米Max刷recovery教程_小米Max第三方recovery下载
- (双硬盘(SSD+HDD)/单硬盘)双系统win10+ubuntu18.04安装记录
- Windows垃圾清理BAT脚本
- HARK学习(八)--LoadSourceLocation
- 一个人有怎样的心灵,就拥有怎样的世界。----人是自己观念的奴隶
- iPhone5s ios 12.5.4越狱后可以ssh登录但是不能打开界面
- 台湾内存厂商进军NAND市场未果,时机已过仅当利基玩家?
- 张忠谋:摩尔定律将死,物联网是“Next Big Thing”
- java编程入门到精通看什么书,详细说明
- serializeArray()与 serialize()
- Java对List集合进行排序
- 下推式磁悬浮(一):制作清单
- -bash: ./start.sh: /bin/sh^M: bad interpreter: No such file or directory 错误解决方案