查看: 1022|回复: 0

[手机开发] Android自定义彩色织带分割线

发表于 2017-8-1 08:00:04

前言

最近开发的一个产品需要涉及到订单,订单页涉及到了一个UI元素,类似饿了么的订单页以及支付宝口碑外卖订单页的彩带(通俗点讲就是一条两种颜色相间而成的分割线):


可以看到,风格基本都是以两种颜色为主相间拼接,至于长度则完全由屏幕宽度来决定,因此如果想要通过设计成图片素材来作为ImageView的背景的方式实现的话,效果并不理想,因为图片的宽度完全无法确定。所以本文通过自定义View的方式,绘制出这样一个彩带的效果。

实现

1.Android中如何绘制四边形

  1. public class ColourLineView extends View{
  2. public ColourLineView(Context context) {
  3. super(context, null);
  4. }
  5. public ColourLineView(Context context, AttributeSet attrs) {
  6. super(context, attrs, 0);
  7. }
  8. public ColourLineView(Context context, AttributeSet attrs, int defStyleAttr) {
  9. super(context, attrs, defStyleAttr);
  10. }
  11. @Override
  12. protected void onDraw(Canvas canvas) {
  13. super.onDraw(canvas);
  14. int width = getWidth();
  15. int height = getHeight();
  16. Path path = new Path();
  17. canvas.save();
  18. path.reset();//重置路径
  19. path.moveTo(width/2, 0);//左上点
  20. path.lineTo(0, height);//左下点
  21. path.lineTo(width-width/2, height);//右下点
  22. path.lineTo(width, 0);//右上点
  23. canvas.clipPath(path);//截取路径所绘制的图形
  24. canvas.drawColor(Color.RED);
  25. path.reset();//重置路径,准备绘制第三种颜色的平行四边形
  26. canvas.restore();
  27. }
  28. }
复制代码

主要看onDraw方法,可以看到首先获取View的宽和高,然后建立路径对象path,接着先将path的起点移动到(控件宽的二分之一处,0)处:


接着由该点向(0, 控件高)处绘制一条直线:


接着由(0, 控件高)向(控件宽的二分之一处,高度)绘制一条直线:


接着由(控件宽的二分之一处,高度)向(控件宽, 0)绘制一条直线:


路径绘制完毕,调用clipPath将路径的图形剪出来,便成了一个平行四边形,再给它填充个颜色。

在布局文件中使用一下:

  1. <com.example.yang.statubardemo.ColourLineView
  2. android:layout_width="80dp"
  3. android:layout_height="80dp"
  4. android:background="#000"/>
复制代码

效果如图:


平行四边形的效果就出来了,了解了如何绘制平行四边形,也就相当于写好了砖块,砌成墙自然就不是事了。

2.绘制彩色分割线

首先,我们这个View可以定义的东西应该有如下这几点:
1.可以自定义每个颜色块的大小
2.可以自定义两种颜色
3.可以自定义颜色块之间的间隔
4.平行四边形颜色块倾斜的程度
5.背景色

下面着手来实现这个效果
首先定义一下属性,在attrs.xml中加入如下:

  1. <declare-styleable name="ColourLineView">
  2. <!--线条高度-->
  3. <attr name="line_height" format="dimension"/>
  4. <!--第一种颜色块的宽度-->
  5. <attr name="item_width" format="dimension"/>
  6. <!--第二种颜色块的宽度-->
  7. <attr name="separation_width" format="dimension"/>
  8. <!--平行四边形倾斜的程度-->
  9. <attr name="lean_degree" format="dimension"/>
  10. <!--第一种颜色-->
  11. <attr name="first_color" format="color"/>
  12. <!--第二种颜色-->
  13. <attr name="second_color" format="color"/>
  14. <!--线条底色-->
  15. <attr name="canvas_color" format="color"/>
  16. </declare-styleable>
复制代码

自定义View代码:

  1. **
  2. * Created by IT_ZJYANG on 2017/2/9.
  3. */
  4. public class ColourLineView extends View{
  5. //线条高度
  6. private float line_height;
  7. //每个颜色块的宽度
  8. private float item_width;
  9. //每两个颜色快之间的间距
  10. private float separation_width;
  11. //平行四边形倾斜的程度
  12. private float lean_degree;
  13. //第一种颜色块的颜色
  14. private int first_color;
  15. //第二种颜色块的颜色
  16. private int second_color;
  17. //线条底色
  18. private int canvas_color;
  19. public ColourLineView(Context context) {
  20. super(context, null);
  21. }
  22. public ColourLineView(Context context, AttributeSet attrs) {
  23. super(context, attrs);
  24. initAttr(context, attrs);
  25. }
  26. public ColourLineView(Context context, AttributeSet attrs, int defStyleAttr) {
  27. super(context, attrs, defStyleAttr);
  28. initAttr(context, attrs);
  29. }
  30. public void initAttr(Context context, AttributeSet attrs){
  31. TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ColourLineView);
  32. line_height = typedArray.getDimension(R.styleable.ColourLineView_line_height, 20);
  33. item_width = typedArray.getDimension(R.styleable.ColourLineView_item_width, 20);
  34. separation_width = typedArray.getDimension(R.styleable.ColourLineView_separation_width, 20);
  35. lean_degree = typedArray.getDimension(R.styleable.ColourLineView_lean_degree, 5);
  36. first_color = typedArray.getColor(R.styleable.ColourLineView_first_color, Color.RED);
  37. second_color = typedArray.getColor(R.styleable.ColourLineView_second_color, Color.GREEN);
  38. canvas_color = typedArray.getColor(R.styleable.ColourLineView_canvas_color, Color.WHITE);
  39. typedArray.recycle();
  40. }
  41. @Override
  42. protected void onDraw(Canvas canvas) {
  43. super.onDraw(canvas);
  44. Path path = new Path();
  45. int lineWidth = getWidth();
  46. int lineHeight = getHeight();
  47. int count = (item_width + separation_width == 0) ? 0 : lineWidth / (int) (item_width + separation_width) + 1;
  48. for(int i=0; i < count; i++){
  49. canvas.save();
  50. path.reset();//重置路径
  51. path.moveTo(lean_degree + (item_width + separation_width) * i, 0);//左上点
  52. path.lineTo((item_width + separation_width) * i, lineHeight);//左下点
  53. path.lineTo(item_width * (i + 1) + separation_width * i, lineHeight);//右下点
  54. path.lineTo(lean_degree + item_width * (i + 1) + separation_width * i, 0);//右上点
  55. canvas.clipPath(path);//截取路径所绘制的图形
  56. if(i % 2 == 0){
  57. canvas.drawColor(first_color);
  58. }else{
  59. canvas.drawColor(second_color);
  60. }
  61. canvas.restore();
  62. }
  63. }
  64. }
复制代码

其中,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)

然后再根据奇偶性判断,让两种颜色间隔绘制,完成。

使用

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. xmlns:app="http://schemas.android.com/apk/res-auto"
  6. android:orientation="vertical"
  7. android:gravity="center"
  8. tools:context="com.example.zjyang.statubardemo.MainActivity">
  9. <com.example.zjyang.statubardemo.ColourLineView
  10. android:layout_width="match_parent"
  11. android:layout_height="5dp"
  12. android:background="#fff"
  13. app:first_color="@color/colorAccent"
  14. app:second_color="@color/colorPrimary"
  15. app:item_width="15dp"
  16. />
  17. </LinearLayout>
复制代码

可以看到高度设置为5dp,每个颜色块宽度为15dp,底色为白色,两个颜色块使用两种不同的颜色,效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条