分割线在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>