Android繪制豎直虛線完美解決方案—自定義View
開發(fā)中我們經(jīng)常會遇到繪制虛線的需求，一般我們使用一個drawable文件即可實現(xiàn)浩考，下面我會先列舉常規(guī)drawable文件的實現(xiàn)方式。
使用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中設(shè)置的虛線寬度 -->
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_marginTop="50dp"
android:background="@drawable/imaginary_line"
android:layerType="software" />
這里我們需要注意一下幾點，第一最好設(shè)置android:layerType="software"屬性冀自，第二View的高度拇惋，最好大于drawable中設(shè)置的虛線高度秤涩。不然都可能導(dǎo)致虛線不顯示。
使用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>
可以看出，實質(zhì)上是通過View動畫钓瞭，對水平方向的View進行了旋轉(zhuǎn)操作驳遵。
具體使用如下：跟水平方向使用方式一樣。
<View
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentRight="true"
android:background="@drawable/vertical_imaginary_line"
android:layerType="software" />
因為View是先繪制水平方向的虛線山涡，然后進行旋轉(zhuǎn)堤结，所以豎直虛線默認就會有偏移量，我們需要手動的去調(diào)整位置鸭丛。
實現(xiàn)效果如下所示：
image
單個虛線還好說竞穷，如果需要繪制圖表的網(wǎng)格線之類的需求，那就要欲哭無淚了鳞溉。
自定義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的具體實現(xiàn)：
自定義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獲取到我們設(shè)置的自定義屬性值呆贿，并給各個屬性設(shè)置默認值嚷兔；接著初始化我們的畫筆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" />
效果圖如下所示：
image
參考：
Android豎虛線繪制
