安卓开发——类似邮票分割线效果（虚线、半圆）

最近在弄公司项目，在弄“我的二维码界面”时，总觉得界面太单调，不够美观，如下图左侧。

总想给平淡的白色区域加点元素，后来就想到邮票分割线效果（我也不知道该怎么描述这个效果），如下图右侧。

对比看一看，改过后的好看多了。下面我将讲解如何加上这个效果。

这个效果的核心就是这个部分：两侧的内嵌半圆+中间的虚线

实现这个效果的时候，我觉得自定义view需要写代码，不想弄，便选择使用shape资源文件的方式来完成。

1、layout布局文件

<LinearLayout
            android:id="@+id/layout_dotted"
            android:layout_width="match_parent"
            android:layout_height="16dp"
            android:orientation="horizontal">
            <View
                android:layout_width="8dp"
                android:layout_height="16dp"
                android:background="@drawable/bg_semi_circle_right"/>
            <View
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:layout_gravity="center_vertical"
                android:layerType="software"
                android:background="@drawable/bg_dotted_line"/>
            <View
                android:layout_width="8dp"
                android:layout_height="16dp"
                android:background="@drawable/bg_semi_circle_left"/>
</LinearLayout>

布局很简单，就是一个横向的LinearLayout，包裹三个View，重点在于三个View的backgroud资源文件。

2、两个半圆资源文件：bg_semi_circle_left.xml、bg_semi_circle_right.xml

先弄左半圆（即上图右侧内嵌半圆），res/drawable下新建 bg_semi_circle_left.xml ,内容:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#eee"/>
    <corners
        android:topLeftRadius="16dp"
        android:topRightRadius="0dp"
        android:bottomLeftRadius="16dp"
        android:bottomRightRadius="0dp"/>

</shape>

接下来是右半圆，同样res/drawable下新建 bg_semi_circle_right.xml，内容：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#eee"/>
    <corners
        android:topLeftRadius="0dp"
        android:topRightRadius="16dp"
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="16dp"/>
</shape>

3、虚线资源文件：bg_dotted_line.xml
res/drawable下新建 bg_dotted_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="#eee"
        android:dashGap="5dp"
        android:dashWidth="5dp"/>
</shape>

注意，想要虚线效果出来，相应的View还有设置android:layerType="software"，不然的话，只会显示实线。

以上，主要通过三个资源文件的编写，完成了一个类邮编分割线效果的布局实现。

安卓开发——类似邮票分割线效果（虚线、半圆）

猜你喜欢