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

张子羽

已于 2023-04-18 18:55:02 修改

阅读量4k

点赞数 9

分类专栏：安卓和UI斗智斗勇的日子文章标签： android

于 2022-08-19 10:52:37 首次发布

本文链接：https://blog.csdn.net/m0_48189512/article/details/126417764

版权

安卓同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

和UI斗智斗勇的日子

3 篇文章 0 订阅

订阅专栏

加一个边框

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

<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文件创建矢量图片资源

张子羽

关注

9
点赞
踩
33

收藏

觉得还不错? 一键收藏
0
评论
【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框

只要四个角有边框，我们遇到这样的需求该怎么办呢答：~~找UI给切图~~ （bushi）（使用切图会导致APP的体积膨胀，所以能不使用最好不用），作为一个立志写出最厉害的Bug的安卓初级开发工程师，本着万世不求人的态度（~~其实是因为社恐~~ ），也为了帮助没有UI的独立开发者，我找到了如下两种方法实现这样复杂的边框。
复制链接

扫一扫

专栏目录