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

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

加一个边框

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    <stroke android:width="2dp" android:color="@color/white" />
</shape>

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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="32dp" />
    <stroke
        android:width="2dp"
        android:color="@color/white" />
</shape>

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

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

一、利用layer-list来实现

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

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

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners android:radius="15dp" />
            <solid android:color="#1b96ff" />
        </shape>
    </item>
</layer-list>

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners android:radius="15dp" />
            <solid android:color="@color/bag_blue" />
        </shape>
    </item>
    //第二条属性
    <item
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp">
        <shape>
            <corners android:radius="12dp" />
            <solid android:color="@color/white" />
        </shape>
    </item>
</layer-list>

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

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

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

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

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners android:radius="15dp" />
            <solid android:color="@color/bag_blue" />
        </shape>
    </item>
   //第二条属性
    <item
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp">
        <shape>
            <corners android:radius="12dp" />
            <solid android:color="@color/white" />
        </shape>
    </item>
    //第三条属性
    <item
        android:left="30dp"
        android:right="30dp">
        <shape>
            <solid android:color="@color/white" />
        </shape>
    </item>
    
</layer-list>

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <corners android:radius="15dp" />
            <solid android:color="@color/bag_blue" />
        </shape>
    </item>
   //第二条属性
    <item
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp">
        <shape>
            <corners android:radius="12dp" />
            <solid android:color="@color/white" />
        </shape>
    </item>
    //第三条属性
    <item
        android:left="30dp"
        android:right="30dp">
        <shape>
            <solid android:color="@color/white" />
        </shape>
    </item>
    //第四条属性
    <item
        android:bottom="30dp"
        android:top="30dp">
        <shape>
            <solid android:color="@color/white" />
        </shape>
    </item>

</layer-list>

这条属性加上我们就大功告成了如下图
在这里插入图片描述
这种方法其实就是通过不断地叠加堆叠出我们想要的效果方法很简单但是需要一些想象力而且弊端也很明显比如四个圆角的边框不够丝滑与实际的效果还是有些出入再比如需要保证背景一致如果你的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中的部分复制它

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
     width="5.55556in" height="5.55556in"
     viewBox="0 0 500 500">
  <path id="选区"
        fill="none" stroke="black" stroke-width="1"
        d="M 85.00,25.14
           C 85.00,25.14 117.00,25.14 117.00,25.14
             117.00,25.14 175.00,25.14 175.00,25.14
             178.84,25.01 182.53,24.78 185.92,27.01
             192.40,31.31 192.44,40.92 185.92,45.26
             182.95,47.27 179.44,46.99 176.00,47.00
             176.00,47.00 96.00,47.00 96.00,47.00
             66.91,47.05 47.05,66.92 47.00,96.00
             47.00,96.00 47.00,176.00 47.00,176.00
             46.99,179.44 47.27,182.95 45.26,185.92
             40.92,192.44 31.31,192.40 27.01,185.92
             24.78,182.53 25.01,178.84 25.00,175.00
             25.00,175.00 25.00,118.00 25.00,118.00
             25.00,88.69 22.72,63.95 47.00,42.17
             52.31,37.41 56.70,34.86 63.00,31.76
             71.93,27.36 75.44,26.87 85.00,25.14 Z
           M 317.00,25.65
           C 317.00,25.65 364.00,25.00 364.00,25.00
             364.00,25.00 394.00,25.00 394.00,25.00
             394.00,25.00 407.00,25.00 407.00,25.00
             427.96,25.03 448.30,34.10 461.10,51.00
             464.82,55.91 468.75,63.23 470.94,69.00
             473.77,76.48 474.99,85.03 475.00,93.00
             475.00,93.00 475.00,175.00 475.00,175.00
             474.99,178.84 475.22,182.53 472.99,185.92
             468.69,192.40 459.08,192.44 454.74,185.92
             452.73,182.95 453.01,179.44 453.00,176.00
             453.00,176.00 453.00,110.00 453.00,110.00
             453.00,90.59 454.43,75.12 438.91,60.17
             423.77,45.59 409.14,47.00 390.00,47.00
             390.00,47.00 324.00,47.00 324.00,47.00
             320.01,46.99 316.42,47.32 313.13,44.57
             305.97,38.58 308.89,29.14 317.00,25.65 Z
           M 33.00,309.65
           C 50.89,306.35 47.00,328.04 47.00,339.00
             47.00,339.00 47.00,390.00 47.00,390.00
             47.00,408.60 45.54,422.95 59.30,437.91
             74.51,454.44 90.71,453.00 111.00,453.00
             111.00,453.00 176.00,453.00 176.00,453.00
             179.44,453.01 182.95,452.73 185.92,454.74
             192.44,459.08 192.40,468.69 185.92,472.99
             182.53,475.22 178.84,474.99 175.00,475.00
             175.00,475.00 114.00,475.00 114.00,475.00
             87.74,475.00 66.91,476.52 46.00,456.91
             40.23,451.50 36.32,446.02 32.76,439.00
             23.50,420.75 25.00,409.56 25.00,390.00
             25.00,390.00 25.00,349.00 25.00,349.00
             25.00,349.00 25.00,325.00 25.00,325.00
             25.01,321.61 24.81,318.13 26.45,315.04
             28.14,311.86 29.88,310.99 33.00,309.65 Z
           M 461.00,309.57
           C 470.80,308.04 474.88,313.91 475.00,323.00
             475.00,323.00 475.00,366.00 475.00,366.00
             475.00,366.00 475.00,394.00 475.00,394.00
             475.00,394.00 475.00,407.00 475.00,407.00
             474.97,427.96 465.90,448.30 449.00,461.10
             444.11,464.80 436.75,468.76 431.00,470.94
             423.82,473.65 414.66,474.99 407.00,475.00
             407.00,475.00 367.00,475.00 367.00,475.00
             367.00,475.00 324.00,475.00 324.00,475.00
             320.03,474.98 316.49,475.02 313.21,472.35
             307.53,467.73 307.96,458.81 314.05,454.74
             317.05,452.73 320.56,453.01 324.00,453.00
             324.00,453.00 404.00,453.00 404.00,453.00
             432.20,452.96 452.96,433.54 453.00,405.00
             453.00,405.00 453.00,334.00 453.00,334.00
             453.00,324.54 450.28,313.79 461.00,309.57 Z" />
</svg>

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

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="500dp"
    android:height="500dp"
    android:viewportWidth="500"
    android:viewportHeight="500">
    <path
        android:fillColor="#10ABF3"
        android:pathData="" />
</vector>

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

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

总结

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

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: android
返回列表

上一篇：C# Cad二次开发新手入门系列教程（一）开发环境搭建

下一篇：常用的几款Vue移动端UI推荐

“【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框” 的相关文章

Android开发学习之路--Activity之Intent1年前 (2023-02-02)
Android开发学习之路--性能优化之布局优化1年前 (2023-02-02)
Android 深入系统完全讲解（19）1年前 (2023-02-02)
Android面经1年前 (2023-02-02)
浅谈Android下的注解1年前 (2023-02-02)
Android 深入系统完全讲解（30）1年前 (2023-02-02)
Android 接入穿山甲激励视频广告步骤与错误总结1年前 (2023-02-02)
基于android手机的健身预约系统APP开发1年前 (2023-02-02)
基于Android的校园跳蚤市场的设计与实现1年前 (2023-02-02)
Android 分区存储1年前 (2023-02-02)

阿里云国际版