Android开发之实现横向、竖向的虚线分割线（有图为证）

分割线在Android开发中经常能用到，感觉实现也很简单，可是真正到了写代码实现的时候，并不是自己想象的那么容易，竟然发现有点点难度。

这篇文章要实现的效果如下图：

分为横竖向的虚实线，实线分割线很容易实现，难就难在竖向的虚线实现。这篇文章也主要是介绍怎么实现竖向的虚线。

一、实线

首先贴出横竖向实线的代码：在values/styles.xml文件中，这里放在styles.xml是为了方便引用，避免写过多的重复代码。

    <style name="horizontal_line_style">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">1px</item>
        <item name="android:background">@color/red</item>
    </style>

    <style name="vertical_line_style">
        <item name="android:layout_width">1px</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:background">@color/red</item>
    </style>

实线的实现，就三行代码，颜色自定义。

使用方式：

    <View
        style="@style/vertical_line_style"/>


    <View
        style="@style/horizontal_line_style"/>

二、虚线

1.横向的虚线：horizontal_dotted_line.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <!-- 破折线的宽度为dashWith，破折线之间的空隙的宽度为dashGap，当dashGap=0dp时，为实线-->
    <stroke
        android:width="0.5dp"
        android:color="@color/red"
        android:dashWidth="4dp"
        android:dashGap="3dp" />
    <size android:height="1px" />

</shape>

同样的在styles.xml中使用方便引用：

<style name="horizontal_dotted_line_style">
     <item name="android:layout_width">match_parent</item>
     <item name="android:layout_height">2px</item>
     <item name="android:background">@drawable/horizontal_dotted_line</item>
     <item name="android:layerType">software</item>
</style>

<View
    style="@style/horizontal_dotted_line_style"/>

 在布局中使用横向虚线需要注意android:layout_height的值的问题，需要大于其设置的高度，不然显示不出来。

2.竖向的虚线：vertical_dotted_line.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--注意上下左右方向问题-->
    <!--这里思路相当于一个只显示一条边的矩形虚线边框-->
    <item
        android:bottom="-0.5dp"
        android:right="-0.5dp"
        android:top="-0.8dp">
        <shape>
            <!--设置背景透明-->
            <solid android:color="@color/transparent" />
            <!--破折线的宽度为dashWith，破折线之间的空隙的宽度为dashGap，当dashGap=0dp时，为实线-->
            <stroke
                android:width="0.5dp"
                android:color="@color/red"
                android:dashWidth="4dp"
                android:dashGap="3dp"/>
            <size android:height="1px" />
        </shape>
    </item>
</layer-list>

在网上找竖向的虚线实现方式时，有看到说将横向的虚线旋转九十度，在布局中使用后发现有些问题，在代码中设置的宽度为虚线的高度，无法满足需求。

同样在styles.xml中引用：

    <style name="vertical_dotted_line_style">
        <item name="android:layout_width">1px</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:background">@drawable/vertical_dotted_line</item>
        <item name="android:layerType">software</item>
    </style>

在Android中画虚线需要设置android:layerType的值为software,否则显示为一条直线。

最后贴上第一张图所示的布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="1"/>

        <View
            style="@style/vertical_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="2"/>

        <View
            style="@style/vertical_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="3"/>

        <View
            style="@style/vertical_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="4"/>

    </LinearLayout>

    <View
        style="@style/horizontal_line_style"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="5"/>

        <View
            style="@style/vertical_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="6"/>

        <View
            style="@style/vertical_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="7"/>

        <View
            style="@style/vertical_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="8"/>

    </LinearLayout>

    <View
        style="@style/horizontal_line_style"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="一"/>

        <View
            style="@style/vertical_dotted_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="二"/>

        <View
            style="@style/vertical_dotted_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="三"/>

        <View
            style="@style/vertical_dotted_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="四"/>

    </LinearLayout>

    <View
        style="@style/horizontal_dotted_line_style"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="五"/>

        <View
            style="@style/vertical_dotted_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="六"/>

        <View
            style="@style/vertical_dotted_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="七"/>

        <View
            style="@style/vertical_dotted_line_style"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textSize="28dp"
            android:text="八"/>

    </LinearLayout>

</LinearLayout>