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>