您的位置:首页 > 其它

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

2018-01-17 16:13 513 查看
最近在弄公司项目,在弄“我的二维码界面”时,总觉得界面太单调,不够美观,如下图左侧。

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

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



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



实现这个效果的时候,我觉得自定义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",不然的话,只会显示实线。
以上,主要通过三个资源文件的编写,完成了一个类邮编分割线效果的布局实现。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息