安卓开发——类似邮票分割线效果(虚线、半圆)
2018-01-17 16:13
513 查看
最近在弄公司项目,在弄“我的二维码界面”时,总觉得界面太单调,不够美观,如下图左侧。
总想给平淡的白色区域加点元素,后来就想到邮票分割线效果(我也不知道该怎么描述这个效果),如下图右侧。
对比看一看,改过后的好看多了。下面我将讲解如何加上这个效果。
这个效果的核心就是这个部分:两侧的内嵌半圆+中间的虚线
实现这个效果的时候,我觉得自定义view需要写代码,不想弄,便选择使用shape资源文件的方式来完成。
1、layout布局文件
布局很简单,就是一个横向的LinearLayout,包裹三个View,重点在于三个View的backgroud资源文件。
2、两个半圆资源文件:bg_semi_circle_left.xml、bg_semi_circle_right.xml
先弄左半圆(即上图右侧内嵌半圆),res/drawable下新建 bg_semi_circle_left.xml ,内容:
接下来是右半圆,同样res/drawable下新建bg_semi_circle_right.xml,内容:
3、虚线资源文件:bg_dotted_line.xml
res/drawable下新建bg_dotted_line.xml,内容:
注意,想要虚线效果出来,相应的View还有设置android:layerType="software",不然的话,只会显示实线。
以上,主要通过三个资源文件的编写,完成了一个类邮编分割线效果的布局实现。
总想给平淡的白色区域加点元素,后来就想到邮票分割线效果(我也不知道该怎么描述这个效果),如下图右侧。
对比看一看,改过后的好看多了。下面我将讲解如何加上这个效果。
这个效果的核心就是这个部分:两侧的内嵌半圆+中间的虚线
实现这个效果的时候,我觉得自定义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",不然的话,只会显示实线。
以上,主要通过三个资源文件的编写,完成了一个类邮编分割线效果的布局实现。
相关文章推荐
- weex开发实战(5)--利用wxc-tabbar实现类似安卓fragment分页效果
- 安卓开发加载中效果类似progressDialog效果加载动画
- 安卓开发20:动画之Animation 详细使用-主要通过java代码实现动画效果
- 安卓开发动画效果
- 安卓原理写类似QQ侧滑效果
- 安卓开发笔记——PopupWindow,做出如弹出框效果
- 安卓开发中非常炫的效果集合
- 安卓开发时间轴的实现界面效果
- 安卓TV开发(六) 移动智能终端UI之实现类似GridView的焦点控制FocusView框架
- android应用开发,类似美团商品详情下拉,顶部图片放大的效果
- 安卓应用开发实战:[2]修改程序名称&标题我们首先看一下程序没修改之前的应用名称和标题的显示效果,可见默认是用工程名字来命名的。
- 安卓开发中非常炫的效果集合
- 安卓开发中非常炫的效果集合
- 安卓原理写类似QQ侧滑效果
- 安卓开发-动画效果学习
- iOS开发之类似安卓的Toast短暂提示框
- 安卓开发20:动画之Animation 详细使用-主要通过java代码实现动画效果
- Android开发之-类似iPhone弹性效果的BounceListView
- 安卓开发-设置RadioButton的点击效果
- 安卓开发中非常炫的效果集合