【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框

您所在的位置:网站首页 左右框框的四字词语是什么 【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框

【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框

2024-07-13 12:56| 来源: 网络整理| 查看: 265

加一个边框

如下图所示,这是安卓中最基础的一个边框 在这里插入图片描述 它的代码是这样实现的

如果要给它加一个圆角,他会变成这样 在这里插入图片描述 实现它的代码也很简单,如下:

依旧很简单对吧,那么如果是下面这样的边框呢 在这里插入图片描述 我们只要四个角有边框,这样的边框恐怕无法用上面的stroke来实现,那么我们遇到这样的需求该怎么办呢

答:找UI给切图 (bushi)(使用切图会导致APP的体积膨胀,所以能不使用最好不用),作为一个立志写出最厉害的Bug的安卓初级开发工程师,本着万事不求人的态度(其实是因为社恐 ),也为了帮助没有UI的独立开发者,我找到了如下两种方法实现这样复杂的边框。

一、利用layer-list来实现

我们都知道,layer-list具有一个很有意思的特性,就是后添加的属性会覆盖之前添加的属性,利用这个特性,我们可以完成很多奇思妙想,话不多说我们直接上代码

首先,我们在drawable目录下新建一个Drawable Resource File,记得选择layer-list,当然不选择也没有关系,我们可以进去修改。

建好文件后我们先添加第一条属性:

首先呢,我们给这个边框打底,实现的效果大概是这样,我们得到了一个蓝底的圆角矩形 在这里插入图片描述 接着,在这个背景的基础上,我们再加一条属性:

//第二条属性

加上这一条属性,我们就可以得到一个蓝色的边框,如下图,这里有几个点要注意,

一是,android:bottom="6dp"这几条属性可以通过改变里面的取值来改变边框的粗细,我这里为了看出来效果调了大小

二是,第二条属性的圆角矩形的圆角要适当调小,看起来会更加美观

三是,第二条属性的颜色是白色而不是透明,所以如果你的例如activity的xml文件的背景不是白色,这里也要修改成对应的颜色,不然就会有些奇怪

在这里插入图片描述 接下来我们添加第三条属性:

//第二条属性 //第三条属性

现在看起来就初具雏形了 在这里插入图片描述 这条属性是添加了一个上下与第一条一致,左右比第一条属性短的白色的矩形,大概就是下图我用红框标出来的部分,现在是不是大概知道我要做什么了呢(第三条属性中的 android:left=“30dp” 用来控制圆角边框的长度,也是可以根据自己的实际情况修改): 在这里插入图片描述 接下来就是最后一步了

//第二条属性 //第三条属性 //第四条属性

这条属性加上,我们就大功告成了,如下图: 在这里插入图片描述 这种方法其实就是通过不断地叠加,堆叠出我们想要的效果,方法很简单,但是需要一些想象力,而且弊端也很明显,比如四个圆角的边框不够丝滑,与实际的效果还是有些出入,再比如需要保证背景一致,如果你的activity的背景是图片就没有什么好办法了

那么,有没有更好的办法呢?有

二、使用矢量图

实际上面给的这张图的效果就是我用矢量图实现的,要使用矢量图,我们需要使用GIMP工具,下载地值如下:http://www.gimp.org/

在这里插入图片描述 下载安装好后(安装时自定义安装可以选择中文),我们要先拿到svg文件,没有UI的同学可以去阿里的矢量图标库:https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a,搜索全屏就能找到类似这样效果的矢量图标了,如图: 在这里插入图片描述

这里我们选择SVG下载(注意下载的大小,这里我选输入了500,后面还要用到),下载好后,我们打开上面安装过的GIMP,单击打开选项,然后选择我们下载的svg文件(当然你也可以直接把文件拖进来)

在这里插入图片描述

选择完文件后会弹出这样一个窗口,我们单击确认

在这里插入图片描述

这时svg就导入进来了,接着我们单击左边工具栏的魔法笔,选择合并到当前选取模式,如下图:

在这里插入图片描述

接着我们依次单击四个边框(顺序不重要,只要四个都单击到就可以),如下图: 在这里插入图片描述

这时右边就会展示我们选择的路径,确认路径无误后,我们单击选择,单击到路径,如下图:

在这里插入图片描述

接着右键生成的选区,选择导出路径

在这里插入图片描述

在导出文件时,我们手动输入 .xml后缀,如下图:

在这里插入图片描述 接着,我们把生成的xml文件拖入Android studio,注意我们只要 d中的部分,复制它:

接着我们在drawable目录下新建一个Drawable Resource File,这次我们选择vector 在这里插入图片描述 接着开始敲代码

注意这里的viewportHeight和viewportWidth的值,要设置成我们下载时选择的大小,设置太小就不能看到它的预览图了,(android:fillColor=“#10ABF3” 控制我们绘制的路径的颜色,注意这里不能引入外部的资源(如@color/white),会报错)最后我们把上面复制的 d 中的数据复制到android:pathData中就大功告成了 在这里插入图片描述

使用矢量图好处多多,他不会随大小的改变而变模糊,而且他是透明的,但是缺点就是我们可能需要找到合适的svg,当然GIMP也可以直接识别png中的路径,就是有些麻烦,而且图片不清晰的话,路径会有些损失。

总结

总的来说,我们借助上面的两种方法可以应付大部分的场景,在实际应用中要灵活切换,当然有更好的实现方法欢迎大家在评论区留言交流 本文参考: Android 使用Vector XML文件创建矢量图片资源



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3