Android实现横/竖直虚线（附带源码）

一、项目概述

在许多应用场景中，我们经常会用到横向或竖直的虚线作为分割线、边框或装饰效果。虚线不仅能起到美观的作用，还能帮助用户更直观地理解内容区域的划分。在 Android 开发中，实现虚线效果的方法有很多，例如通过 XML 资源文件定义 shape drawable、使用 Paint 类在自定义 View 中绘制虚线，甚至结合动画效果实现动态虚线。每种方法都有各自的应用场景和优缺点。

本项目主要介绍两种常见的实现横向或竖直虚线的方法：

XML 资源方式：通过定义 shape drawable 及其相关属性来绘制虚线。优点在于无需编写 Java 代码，适合静态装饰；缺点在于灵活性相对较差，无法动态控制虚线的各项参数。

自定义 View 方式：通过扩展 View 类，在 onDraw() 方法中使用 Canvas 和 Paint 绘制虚线。优点在于灵活性高，可以动态调整虚线的宽度、间隔、颜色和方向；缺点是实现过程相对复杂，需要对绘图原理有较深入的了解。

通过这篇文章，读者将全面掌握如何使用上述方法实现横向或竖直虚线效果，同时了解其背后的原理、实现步骤及优化策略。不仅适用于分割线、列表分隔符，还可以用于自定义控件的边框绘制、图表中虚线网格的绘制等多种场景。文章详细探讨了各种技术细节，并给出大量代码示例和注释说明，力求帮助读者从理论到实践全面掌握 Android 虚线绘制技术。

二、相关知识

在介绍具体的实现方法之前，我们需要了解一些与虚线绘制相关的基础知识和技术概念，这将为后续的代码实现打下坚实的基础。

2.1 虚线的概念和应用

虚线（Dashed Line）通常指由一段段线段和间隔（空白）交替组成的线条，它常用于表示分隔、提示、路径或框架边缘。在实际应用中：

横向虚线：一般用于分隔页面中不同的板块，起到装饰和辅助视觉识别的作用。

竖直虚线：常用于分割左右两部分的内容，或作为布局中某个区域的边框效果。

动态虚线：有时需要虚线具有移动或变换效果，以增强界面动感。

在 Android 中，实现虚线的效果不仅能够美化界面，还能提升用户体验，尤其是在设计分割线、进度条、图表或边框的时候，虚线效果都能起到重要作用。

2.2 Android 中的 Drawable 与 Shape

2.2.1 Drawable 资源

在 Android 中，Drawable 是一个用于在屏幕上进行绘图展示的抽象概念，可以是图片、矢量图、形状等。Drawable 可以通过 XML 定义，也可以在代码中动态生成。常见的 Drawable 类型有 BitmapDrawable、NinePatchDrawable、ShapeDrawable 等。

2.2.2 ShapeDrawable 和 XML Shape 资源

XML 文件中定义 shape 是一种非常灵活的绘图方式，通过在 XML 中描述图形的形状、颜色、渐变以及线条等属性，可以快速生成背景、边框和分割线等效果。在实现虚线时，XML shape 资源常用的标签包括 、 等，通过在 标签中配置 dashWidth 和 dashGap 属性，即可轻松绘制出虚线效果。

示例如下：

android:width="2dp"

android:color="#FF0000"

android:dashWidth="10dp"

android:dashGap="5dp" />

在上面的示例中，通过 dashWidth 设置虚线中实线部分的宽度，dashGap 设置虚线中间隔的宽度；stroke 的 width 属性表示整个线条的粗细。

2.3 Canvas 绘制和 Paint 配置

在 Android 的自定义 View 中，Canvas 是用于绘制图形的画布，而 Paint 则包含了绘图时的颜色、样式、线条宽度、虚线效果等信息。使用 Canvas 绘制虚线，一般需要在 Paint 上设置 PathEffect 属性，具体使用 DashPathEffect 完成虚线绘制。

2.3.1 Paint 类

Paint 类是 Android 绘图的重要类之一，其内部封装了颜色、渐变、抗锯齿、字体、线条风格等属性。通过设置 Paint 的相关属性，可以绘制出各种效果的图形。例如：

setColor()：设置线条颜色。

setStrokeWidth()：设置线条宽度。

setStyle()：设置绘制风格，例如 STROKE（只画线）或 FILL（填充）。

setPathEffect()：设置线条的路径效果，此处我们主要用到 DashPathEffect。

2.3.2 DashPathEffect 的使用

DashPathEffect 是一种用于定义虚线效果的 PathEffect，它通过指定一个浮点数组来描述实线与间隔的长度，然后结合 phase 参数控制虚线的偏移量。例如：

java

复制编辑

float[] intervals = new float[]{10, 5}; // 10 为实线部分，5 为间隔 DashPathEffect dashEffect = new DashPathEffect(intervals, 0); // phase 为0，表示从起始点开始 paint.setPathEffect(dashEffect);

这段代码说明了如何在 Paint 中设置虚线效果，当你调用 Canvas.drawLine() 等绘制方法时，系统就会按照给定的虚线规则来绘制线条。通过调整 intervals 数组的值和 phase 参数，可以实现各种不同的虚线样式。

2.4 Android 自定义 View 的原理

在实际开发中，为了实现更灵活的虚线效果，通常会自定义 View 类，在 onDraw() 方法中调用 Canvas 的绘制方法实现具体效果。理解自定义 View 的绘制流程、生命周期和事件处理机制，对于开发高性能和个性化 UI 控件至关重要。

2.4.1 onDraw() 方法

自定义 View 的绘制主要依赖于 onDraw(Canvas canvas) 方法，在这个方法中，开发者可以调用 Canvas 的各种绘制方法（如 drawLine、drawRect、drawPath 等）来呈现自定义效果。需要注意的是，onDraw() 方法会在 View 重绘时被反复调用，因此其中的代码必须尽可能高效，避免影响 UI 流畅性。

2.4.2 自定义 View 中的测量与布局

除了绘制内容，自定义 View 还需要处理自身的测量（onMeasure() 方法）和布局（onLayout() 方法）。在实现虚线效果时，通常需要确定虚线控件的宽度、高度和绘图起始点等信息，这就要求开发者在自定义 View 中合理处理这部分逻辑，确保虚线在不同分辨率和设备上都能正确显示。

三、项目实现思路

针对横向和竖直虚线效果的实现，本项目提供两种主要思路：

XML 定义虚线 Drawable 实现

自定义 View 绘制虚线

下面分别阐述各自的实现步骤和核心思路。

3.1 XML 定义虚线 Drawable 实现

这种方法是利用 Android 系统提供的 shape drawable 来直接在 XML 中定义虚线效果。主要步骤如下：

在 res/drawable 目录下创建 XML 文件（例如 dashed_line.xml）。

在该文件中使用 标签定义一个矩形，并在 标签中配置 width、color、dashWidth 和 dashGap 属性。

在布局文件（例如 activity_main.xml）中，将定义好的 drawable 设置为 View 的背景、分割线或作为 ImageView 的 src 显示。

此方法无需编写 Java 代码，适用于静态显示虚线效果，不需要动态调整参数。

这种方法简单且易于理解，适用于界面中不需要动态变化虚线参数的场景。例如，列表项的分割线、静态边框装饰等。

3.2 自定义 View 绘制虚线

为了获得更多灵活性，本项目还演示了如何通过自定义 View 实现虚线。主要思路如下：

创建一个继承自 View 的自定义类（例如 DashedLineView）。

在该自定义 View 中，重写 onDraw() 方法，使用 Canvas 绘制直线或路径。

创建一个 Paint 对象，并设置线条颜色、宽度和虚线效果（使用 DashPathEffect）。

根据横向或竖直的需要，计算虚线的起始点、终点和整个控件的尺寸，调用 Canvas.drawLine() 绘制直线。

为了适应不同屏幕尺寸和分辨率，合理重写 onMeasure() 方法确保控件尺寸正确。

可以对自定义 View 添加属性支持，在布局文件中通过自定义属性设置颜色、虚线宽度、间隔等参数，从而实现动态配置和复用。

这种方法具有极高的灵活性，不仅支持横线和竖线，还可以在需要时添加动画效果或响应用户操作。适合用于需要动态调整虚线属性、实现复杂绘制逻辑的场景，例如图表中网格线、动态边框效果等。

3.3 关键技术难点与优化措施

在实现过程中，可能会遇到以下几个关键技术难点：

绘制效率：自定义 View 中的 onDraw() 方法可能会被频繁调用，因此要确保绘制代码高效、避免不必要的对象创建。

设备适配：不同屏幕分辨率和密度下，虚线的显示效果可能会出现偏差。需要通过 dp 转换、获取屏幕密度等方法保证效果一致性。

自定义属性解析：在自定义 View 中，如果希望支持 XML 中配置虚线参数，需要自定义属性并在构造函数中解析，这部分代码需要精心设计，保证兼容性与易用性。

复用性和扩展性：为未来需求增加如动画、方向切换等功能，代码设计时应遵循单一职责原则，将绘制、配置和事件处理分离，提升代码的可维护性。

针对这些难点，本项目提出了一系列优化策略，例如：

缓存 Paint 对象和 PathEffect，避免重复创建，提升绘制效率；

在 onMeasure() 中根据屏幕密度动态计算控件尺寸，确保设备适配；

利用 TypedArray 解析自定义属性，提供灵活的参数配置接口；

将绘制逻辑模块化，便于后续扩展或动画效果添加。

四、整合代码

下面给出本项目两种实现横/竖直虚线的完整代码示例，并附上详细注释。代码分为两部分，第一部分为 XML 方式实现虚线，第二部分为自定义 View 实现虚线。

4.1 XML 虚线 Drawable 实现

首先，在 res/drawable 目录下创建文件 dashed_line.xml，代码如下：

android:shape="line">

android:width="2dp"

android:color="#FF5722"

android:dashWidth="10dp"

android:dashGap="5dp" />

接下来，在 activity_main.xml 中使用该 drawable，例如作为分割线控件的背景：

android:id="@+id/parent_layout"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="16dp">

android:id="@+id/text_top"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="上方内容"

android:textSize="18sp"

android:gravity="center"/>

android:id="@+id/dashed_line"

android:layout_width="match_parent"

android:layout_height="2dp"

android:layout_marginVertical="16dp"

android:background="@drawable/dashed_line" />

android:id="@+id/text_bottom"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="下方内容"

android:textSize="18sp"

android:gravity="center"/>

上述代码利用 XML 资源实现了一个横向虚线效果。若需要竖直虚线，只需调整 View 的布局参数，例如将 layout_width 改为 2dp、layout_height 改为 match_parent，并修改布局方向即可。

4.2 自定义 View 实现虚线

接下来介绍使用自定义 View 的方式实现横向或竖直虚线。以下代码展示了一个名为 DashedLineView 的自定义控件，包含完整的绘制逻辑和自定义属性解析。

首先，新建一个自定义控件类 DashedLineView.java，其代码如下

package com.example.dashedline;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.DashPathEffect;

import android.graphics.Paint;

import android.graphics.Path;

import android.util.AttributeSet;

import android.view.View;

/**

* DashedLineView 自定义控件

*

* 用于绘制横向或竖直虚线。支持自定义线条颜色、宽度、虚线实线长度、间隔和方向。

* 通过自定义属性，可以在布局中灵活配置各项参数。

*/

public class DashedLineView extends View {

// 默认属性值

private static final int DEFAULT_COLOR = 0xFF000000; // 默认黑色

private static final float DEFAULT_STROKE_WIDTH = 2f; // 默认线条宽度，单位为像素

private static final float DEFAULT_DASH_WIDTH = 10f; // 默认实线部分长度

private static final float DEFAULT_DASH_GAP = 5f; // 默认间隔长度

private static final int ORIENTATION_HORIZONTAL = 0; // 横向

private static final int ORIENTATION_VERTICAL = 1; // 竖直

// 成员属性

private int mLineColor;

private float mStrokeWidth;

private float mDashWidth;

private float mDashGap;

private int mOrientation; // 0 为横向，1 为竖直

// Paint 对象用于绘制线条

private Paint mPaint;

// Path 对象用于定义绘制路径

private Path mPath;

public DashedLineView(Context context) {

this(context, null);

}

public DashedLineView(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public DashedLineView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

// 初始化自定义属性，从 XML 中解析配置参数

TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DashedLineView);

mLineColor = a.getColor(R.styleable.DashedLineView_lineColor, DEFAULT_COLOR);

mStrokeWidth = a.getDimension(R.styleable.DashedLineView_strokeWidth, DEFAULT_STROKE_WIDTH);

mDashWidth = a.getDimension(R.styleable.DashedLineView_dashWidth, DEFAULT_DASH_WIDTH);

mDashGap = a.getDimension(R.styleable.DashedLineView_dashGap, DEFAULT_DASH_GAP);

mOrientation = a.getInt(R.styleable.DashedLineView_orientation, ORIENTATION_HORIZONTAL);

a.recycle();

// 初始化 Paint 对象并配置属性

mPaint = new Paint();

mPaint.setColor(mLineColor);

mPaint.setStrokeWidth(mStrokeWidth);

mPaint.setStyle(Paint.Style.STROKE);

mPaint.setAntiAlias(true);

// 设置虚线效果，通过 DashPathEffect 实现

mPaint.setPathEffect(new DashPathEffect(new float[]{mDashWidth, mDashGap}, 0));

// 初始化 Path 对象

mPath = new Path();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

// 根据虚线的方向，设置控件尺寸的默认值

int width, height;

if (mOrientation == ORIENTATION_HORIZONTAL) {

// 横向虚线，默认高度由 strokeWidth 决定，宽度为匹配父布局

width = MeasureSpec.getSize(widthMeasureSpec);

height = (int) (mStrokeWidth + getPaddingTop() + getPaddingBottom());

} else {

// 竖直虚线，默认宽度由 strokeWidth 决定，高度为匹配父布局

width = (int) (mStrokeWidth + getPaddingLeft() + getPaddingRight());

height = MeasureSpec.getSize(heightMeasureSpec);

}

// 调用 setMeasuredDimension 设置测量结果

setMeasuredDimension(width, height);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 重置 Path

mPath.reset();

// 根据虚线方向绘制横向或竖直虚线

if (mOrientation == ORIENTATION_HORIZONTAL) {

// 横向虚线：从左到右绘制一条直线

float startX = getPaddingLeft();

float endX = getWidth() - getPaddingRight();

float y = getHeight() / 2f;

mPath.moveTo(startX, y);

mPath.lineTo(endX, y);

} else {

// 竖直虚线：从上到下绘制一条直线

float startY = getPaddingTop();

float endY = getHeight() - getPaddingBottom();

float x = getWidth() / 2f;

mPath.moveTo(x, startY);

mPath.lineTo(x, endY);

}

// 使用 Canvas 绘制 Path

canvas.drawPath(mPath, mPaint);

}

}

此外，为支持 XML 中自定义属性，需要在 res/values 目录下创建 attrs.xml 文件，定义 DashedLineView 的自定义属性：

最后，在布局文件中引用自定义控件。例如，在 activity_main.xml 文件中使用 DashedLineView 显示横向虚线和竖直虚线：

xmlns:custom="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:padding="16dp">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="下面是横向虚线"

android:textSize="18sp"

android:layout_marginBottom="16dp"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

custom:lineColor="#3F51B5"

custom:strokeWidth="4dp"

custom:dashWidth="15dp"

custom:dashGap="8dp"

custom:orientation="horizontal"

android:layout_marginBottom="32dp"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="下面是竖直虚线"

android:textSize="18sp"

android:layout_marginBottom="16dp"/>

android:layout_width="wrap_content"

android:layout_height="150dp"

custom:lineColor="#E91E63"

custom:strokeWidth="4dp"

custom:dashWidth="15dp"

custom:dashGap="8dp"

custom:orientation="vertical"/>

以上代码展示了如何通过 XML 资源和自定义 View 分别实现横向和竖直虚线效果。XML 方式简单易用，而自定义 View 方式则提供了更高的灵活性，可以根据项目需求动态调整参数。

五、代码解读

在本节，我们将详细解读自定义控件 DashedLineView 的各个方法和逻辑，帮助大家深入理解代码实现的原理。

5.1 构造函数和自定义属性解析

在三个构造函数中，我们依次调用最终的构造方法，实现属性的初始化。在构造方法中，通过 TypedArray 对象解析 XML 中定义的自定义属性（如 lineColor、strokeWidth、dashWidth、dashGap 和 orientation）。

如果 XML 中没有定义，则使用默认值。

接着，根据解析的属性值初始化 Paint 对象，调用 setColor()、setStrokeWidth()、setStyle() 等方法，并通过 setPathEffect() 应用 DashPathEffect，从而使绘制的路径呈现虚线效果。

最后，创建一个 Path 对象，用于在 onDraw() 中记录绘图路径。

5.2 onMeasure() 方法

onMeasure() 方法用于测量控件尺寸。根据虚线的方向（横向或竖直），我们设置不同的默认尺寸：

横向虚线控件：宽度通常充满父控件，高度根据线条粗细和内边距确定。

竖直虚线控件：高度通常充满父控件，宽度根据线条粗细和内边距确定。

通过调用 setMeasuredDimension(width, height) 将测量结果返回，确保控件在布局中的尺寸正确。

5.3 onDraw() 方法

onDraw() 方法是自定义 View 绘制的核心。方法流程如下：

首先调用 mPath.reset() 清空之前的绘制路径。

根据控件方向判断：

如果为横向虚线，则计算绘制起点 (startX, y) 与终点 (endX, y)，将 Path 移动到起点，再绘制一条直线到终点。

如果为竖直虚线，则计算起点 (x, startY) 与终点 (x, endY)，同样构造直线路径。

最后，调用 canvas.drawPath(mPath, mPaint) 使用 Paint 对象来绘制路径，由于 Paint 已经设置了虚线效果，因此输出的线条呈现虚线效果。

六、项目总结

本项目详细介绍了在 Android 平台上实现横向和竖直虚线的两种常见方法，并提供了完整代码示例以及详细的注释解读。主要内容总结如下：

6.1 实现方式对比

XML Drawable 方式：

优点：简单、无需 Java 代码、便于快速实现；适用于界面中静态的分割线和边框。

缺点：灵活性较差，无法动态调整参数；仅适用于效果较为固定的场景。

自定义 View 方式：

优点：高灵活性，可通过自定义属性动态调整线条颜色、宽度、虚线长度和间隔；支持横向和竖直虚线切换；便于扩展其他功能如动画效果。

缺点：实现过程较为复杂，对开发者的绘图原理要求较高；需要正确处理控件测量和设备适配等问题。

6.2 性能与适配

在自定义 View 的实现过程中，我们特别注意了以下几个方面：

性能优化：在 onDraw() 方法中避免重复创建对象（如 Paint、Path），通过缓存设置提高绘制效率，确保在频繁重绘时不影响主线程性能。

设备适配：通过 onMeasure() 动态计算控件尺寸，并结合 dp 单位转换，保证虚线在不同屏幕分辨率和密度的设备上都能保持一致效果。

自定义属性支持：利用 TypedArray 解析 XML 自定义属性，使得虚线控件既具备灵活性，也便于在布局文件中直观配置参数。

6.3 实战应用场景

通过本项目的学习，开发者可以在以下场景中应用虚线技术：

分割线：在列表、分组面板中使用虚线分隔不同区域。

边框装饰：为自定义控件增加动态边框，增强视觉效果。

图表绘制：在数据图表中实现网格线、辅助线、提示线等虚线效果。

动画效果：结合自定义 View，可进一步扩展虚线的动态变换，营造出流动或闪烁效果，提升交互体验。

6.4 开发建议与扩展方向

在实际开发中，建议大家在实现虚线效果时：

分层设计：将虚线绘制与业务逻辑解耦，便于维护和复用。

性能测试：对复杂场景下的自定义控件进行性能测试，避免因重绘问题引起卡顿。

扩展功能：在基础虚线实现上加入动画、渐变色、交互事件处理等，丰富控件功能。

代码规范：撰写详细注释，保证代码可读性和团队协作效率，尤其在自定义控件中更需要关注属性解析和绘图逻辑的清晰度。

通过不断实践和总结，开发者能够将虚线效果灵活应用到各类项目中，不仅实现界面美化，还能提升用户体验和应用整体品质。

七、实践建议与开发经验

在开发过程中，我们还总结了以下几点实践建议，供大家参考：

7.1 深入理解 Android 绘图机制

通过大量阅读 Android 官方文档和源码，了解 Canvas、Paint 和 Path 的工作原理。

多练习自定义 View 的绘制，掌握 onMeasure()、onLayout() 与 onDraw() 的关系，提高控件的自适应能力。

7.2 学习利用 XML 资源与自定义属性

熟悉 XML 中 shape drawable 的定义和各种属性的作用，能迅速实现静态绘图效果。

学会通过 attrs.xml 定义自定义属性，并在自定义 View 中解析使用，使得控件更加灵活和易用。

7.3 注重代码性能优化

在 onDraw() 内避免对象频繁创建，尽量利用成员变量缓存 Paint 和 Path 对象。

使用硬件加速和合适的绘图模式，确保在高频率重绘时不卡顿，提高用户体验。

7.4 实现跨项目代码复用

将虚线控件封装为组件，通过自定义属性接口，方便在多个项目中使用。

编写详细文档和注释，便于团队成员理解和扩展功能。

7.5 测试与兼容性

在不同型号和系统版本的设备上测试虚线显示效果，确保各项参数（如 dashWidth、dashGap）符合预期。

注意在不同设备密度下，利用 dp 单位转换确保实际显示效果的一致性。

八、未来展望

在未来的工作中，虚线效果的实现不仅可以局限于分割线、边框装饰等静态效果，还可以进行更多动态扩展：

动画虚线：结合 ValueAnimator 或 ObjectAnimator，实现虚线颜色渐变或 dash phase 动态偏移，营造动态流动效果。

交互响应：在用户交互中，动态改变虚线属性，例如在点击、滑动时改变虚线粗细或颜色，提升用户反馈效果。

多控件协同：将虚线与其他自定义控件组合使用，例如结合图表控件实现虚线网格、辅助线等，打造功能更丰富的交互界面。

此外，伴随着 Android 新特性的不断引入，诸如 Jetpack Compose 等新的 UI 框架也为绘制虚线提供了更简洁、声明式的实现方式。开发者可以关注最新技术动态，逐步将传统 View 技术与现代开发方式相结合，不断提升项目的技术含量和用户体验。

九、知识拓展与参考文献

为了更全面地掌握本项目中涉及的知识，建议大家参考以下文献和资料：

Android 官方开发者文档

涵盖 Canvas、Paint、Path、Drawable 和自定义 View 的详细介绍，是理解绘图机制的必读文档。

《第一行代码：Android》

本书详细讲解了 Android UI 开发和自定义控件的实现方法，非常适合初学者和进阶开发者。

《Android 源码设计模式》

本书介绍了 Android 源码中的设计模式和架构思想，对于理解复杂控件的设计非常有帮助。

博客与社区文章

如 CSDN、掘金等社区中，许多开发者分享了虚线实现、性能优化的实践经验，可作为补充阅读材料。

开源项目与 GitHub 仓库

查看一些优秀的开源 UI 库，了解其在实现类似虚线等效果时的设计理念和优化方式。

通过大量阅读和实践，你将对 Android 绘图机制、自定义控件开发和 UI 交互设计有更全面的认识，从而在开发中灵活运用各种技巧，打造出高质量的应用界面。