Android绘制竖直虚线完美解决方案—自定义View

简介: 开发中我们经常会遇到绘制虚线的需求,一般我们使用一个drawable文件即可实现,下面我会先列举常规drawable文件的实现方式。

Android绘制竖直虚线完美解决方案—自定义View

开发中我们经常会遇到绘制虚线的需求,一般我们使用一个drawable文件即可实现,下面我会先列举常规drawable文件的实现方式。

使用drawable绘制水平虚线

水平方向的虚线最好绘制,drawable文件如下所示:

drawable/imaginary_line.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">

    <stroke
        android:width="1dp"
        android:color="#000"
        android:dashWidth="5dp"
        android:dashGap="2dp" />

</shape>

在布局中使用如下:

<!-- 这里的高度必须大于drawable中设置的虚线宽度 -->
<View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:layout_marginTop="50dp"
    android:background="@drawable/imaginary_line"
    android:layerType="software" />

这里我们需要注意一下几点,第一最好设置android:layerType="software"属性,第二View的高度,最好大于drawable中设置的虚线高度。不然都可能导致虚线不显示。

使用drawable绘制竖直方向虚线

与水平方向虚线相比,竖直方向虚线就麻烦的多了,而且有很多缺陷。

drawable代码如下所示:

drawable/vertical_imaginary_line.xml:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:toDegrees="90">
    <shape android:shape="line">
        <stroke
            android:width="1dp"
            android:color="#000"
            android:dashWidth="5dp"
            android:dashGap="2dp" />
    </shape>
</rotate>

可以看出,实质上是通过View动画,对水平方向的View进行了旋转操作。

具体使用如下:跟水平方向使用方式一样。

 <View
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_alignParentRight="true"
    android:background="@drawable/vertical_imaginary_line"
    android:layerType="software" />

因为View是先绘制水平方向的虚线,然后进行旋转,所以竖直虚线默认就会有偏移量,我们需要手动的去调整位置。

实现效果如下所示:

单个虚线还好说,如果需要绘制图表的网格线之类的需求,那就要欲哭无泪了。

自定义DividerView

接下来祭出我们的大杀器自定义View。

先定义下需求,我们的虚线需要支持自定义背景色,支持自定义虚线宽度,支持水平和竖直方向,支持虚线的dash宽度和dash间隔,所以我们的自定义属性就如下所示:

attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 垂直方向的虚线 -->
    <declare-styleable name="DividerView">
        <!-- 虚线颜色 -->
        <attr name="divider_line_color" format="color"/>
        <!-- 虚线宽度 -->
        <attr name="dashThickness" format="dimension"/>
        <!-- 虚线dash宽度 -->
        <attr name="dashLength" format="dimension"/>
        <!-- 虚线dash间隔 -->
        <attr name="dashGap" format="dimension"/>
        <!-- 虚线朝向 -->
        <attr name="divider_orientation" format="enum">
            <enum name="horizontal" value="0"/>
            <enum name="vertical" value="1"/>
        </attr>
    </declare-styleable>
</resources>

接下来我们看下DividerView的具体实现:
自定义View的第一步,通常是获取自定义的属性值,具体如下所示:

public DividerView(Context context, AttributeSet attrs) {
    super(context, attrs);
    int dashGap, dashLength, dashThickness;
    int color;

    TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DividerView, 0, 0);

    try {
        dashGap = a.getDimensionPixelSize(R.styleable.DividerView_dashGap, 5);
        dashLength = a.getDimensionPixelSize(R.styleable.DividerView_dashLength, 5);
        dashThickness = a.getDimensionPixelSize(R.styleable.DividerView_dashThickness, 3);
        color = a.getColor(R.styleable.DividerView_divider_line_color, 0xff000000);
        orientation = a.getInt(R.styleable.DividerView_divider_orientation, ORIENTATION_HORIZONTAL);
    } finally {
        a.recycle();
    }

    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setColor(color);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeWidth(dashThickness);
    mPaint.setPathEffect(new DashPathEffect(new float[]{dashGap, dashLength,}, 0));
}

我们通过TypedArray获取到我们设置的自定义属性值,并给各个属性设置默认值;接着初始化我们的画笔paint。

初始化工作完毕后,就是绘制工作了,代码如下所示:

@Override
protected void onDraw(Canvas canvas) {
    if (orientation == ORIENTATION_HORIZONTAL) {
        float center = getHeight() * 0.5f;
        canvas.drawLine(0, center, getWidth(), center, mPaint);
    } else {
        float center = getWidth() * 0.5f;
        canvas.drawLine(center, 0, center, getHeight(), mPaint);
    }
}

具体使用如下所示:

横向虚线:

<com.tinytongtong.dividerviewdemo.DividerView
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_marginTop="50dp"
    android:layerType="software"
    custom:dashGap="4dp"
    custom:dashLength="1dp"
    custom:dashThickness="1dp"
    custom:divider_line_color="#ef5350"
    custom:divider_orientation="horizontal" />

竖向虚线:

<com.tinytongtong.dividerviewdemo.DividerView
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_alignParentRight="true"
    android:layout_marginRight="50dp"
    android:layerType="software"
    custom:dashGap="4dp"
    custom:dashLength="1dp"
    custom:dashThickness="1dp"
    custom:divider_line_color="#ef5350"
    custom:divider_orientation="vertical" />

效果图如下所示:

DividerView项目地址

参考:
Android竖虚线绘制

相关文章
|
4天前
|
Android开发
Android面试题之自定义View注意事项
在Android开发中,自定义View主要分为四类:直接继承View重写onDraw,继承ViewGroup创建布局,扩展特定View如TextView,以及继承特定ViewGroup。实现时需注意:支持wrap_content通过onMeasure处理,支持padding需在onDraw或onMeasure/onLayout中处理。避免在View中使用Handler,使用post系列方法代替。记得在onDetachedFromWindow时停止线程和动画以防止内存泄漏。处理滑动嵌套时解决滑动冲突,并避免在onDraw中大量创建临时对象。
14 4
|
2天前
|
Android开发
Android面试题之View的invalidate方法和postInvalidate方法有什么区别
本文探讨了Android自定义View中`invalidate()`和`postInvalidate()`的区别。`invalidate()`在UI线程中刷新View,而`postInvalidate()`用于非UI线程,通过消息机制切换到UI线程执行`invalidate()`。源码分析显示,`postInvalidate()`最终调用`ViewRootImpl`的`dispatchInvalidateDelayed`,通过Handler发送消息到UI线程执行刷新。
11 1
|
7天前
|
前端开发 API Android开发
Android自定义View之Canvas一文搞定
这篇文章介绍了Android自定义View中如何使用Canvas和Paint来绘制图形。Canvas可理解为画布,用于绘制各种形状如文字、点、线、矩形、圆角矩形、圆和弧。常见API包括`drawText()`、`drawPoint()`、`drawLine()`、`drawRect()`等。文章还提到了Canvas的保存、恢复、平移和旋转方法,通过绘制钟表盘的例子展示了如何实际应用。总结关键点:Canvas与Paint结合用于图像绘制,掌握Canvas的基本绘图函数及坐标变换操作是自定义View的关键。
7 0
Android自定义View之Canvas一文搞定
|
7天前
|
消息中间件 前端开发 Android开发
Android面试题自定义View之Window、ViewRootImpl和View的三大流程
Android开发中,View的三大核心流程包括measure(测量)、layout(布局)和draw(绘制)。MeasureSpec类在测量过程中起到关键作用,它结合尺寸大小和模式(EXACTLY、AT_MOST、UNSPECIFIED)来指定View应如何测量。onMeasure方法用于自定义View的测量,布局阶段,ViewGroup调用onLayout确定子元素位置,而draw阶段按照特定顺序绘制背景、内容、子元素和装饰。整个流程始于ViewRootImpl的performTraversals,该方法触发测量、布局和绘制。
13 0
|
13天前
|
XML 数据格式
Android-自定义三角形评分控件
Android-自定义三角形评分控件
11 0
|
13天前
Android-自定义流布局标签
Android-自定义流布局标签
10 0
|
13天前
|
Android开发
Android自定义之高仿淘宝下拉刷新
Android自定义之高仿淘宝下拉刷新
13 0
|
13天前
|
Android开发
Android自定义之QQ身边的人
Android自定义之QQ身边的人
|
13天前
|
Android开发
Android自定义一个属于自己的刻度尺
Android自定义一个属于自己的刻度尺
11 0
|
13天前
|
Android开发
Android自定义一个属于自己的时间钟表
Android自定义一个属于自己的时间钟表
12 0