【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框 |
您所在的位置:网站首页 › 左右框框的四字词语是什么 › 【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框 |
加一个边框
如下图所示,这是安卓中最基础的一个边框 如果要给它加一个圆角,他会变成这样 依旧很简单对吧,那么如果是下面这样的边框呢 答:找UI给切图 (bushi)(使用切图会导致APP的体积膨胀,所以能不使用最好不用),作为一个立志写出最厉害的Bug的安卓初级开发工程师,本着万事不求人的态度(其实是因为社恐 ),也为了帮助没有UI的独立开发者,我找到了如下两种方法实现这样复杂的边框。 一、利用layer-list来实现我们都知道,layer-list具有一个很有意思的特性,就是后添加的属性会覆盖之前添加的属性,利用这个特性,我们可以完成很多奇思妙想,话不多说我们直接上代码 首先,我们在drawable目录下新建一个Drawable Resource File,记得选择layer-list,当然不选择也没有关系,我们可以进去修改。 建好文件后我们先添加第一条属性: 首先呢,我们给这个边框打底,实现的效果大概是这样,我们得到了一个蓝底的圆角矩形 加上这一条属性,我们就可以得到一个蓝色的边框,如下图,这里有几个点要注意, 一是,android:bottom="6dp"这几条属性可以通过改变里面的取值来改变边框的粗细,我这里为了看出来效果调了大小 二是,第二条属性的圆角矩形的圆角要适当调小,看起来会更加美观 三是,第二条属性的颜色是白色而不是透明,所以如果你的例如activity的xml文件的背景不是白色,这里也要修改成对应的颜色,不然就会有些奇怪
现在看起来就初具雏形了 这条属性加上,我们就大功告成了,如下图: 那么,有没有更好的办法呢?有 二、使用矢量图实际上面给的这张图的效果就是我用矢量图实现的,要使用矢量图,我们需要使用GIMP工具,下载地值如下:http://www.gimp.org/
这里我们选择SVG下载(注意下载的大小,这里我选输入了500,后面还要用到),下载好后,我们打开上面安装过的GIMP,单击打开选项,然后选择我们下载的svg文件(当然你也可以直接把文件拖进来) 选择完文件后会弹出这样一个窗口,我们单击确认 这时svg就导入进来了,接着我们单击左边工具栏的魔法笔,选择合并到当前选取模式,如下图: 接着我们依次单击四个边框(顺序不重要,只要四个都单击到就可以),如下图: 这时右边就会展示我们选择的路径,确认路径无误后,我们单击选择,单击到路径,如下图: 接着右键生成的选区,选择导出路径 在导出文件时,我们手动输入 .xml后缀,如下图:
接着我们在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 |