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

这篇具有很好参考价值的文章主要介绍了【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

加一个边框

如下图所示，这是安卓中最基础的一个边框
【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框
它的代码是这样实现的

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

如果要给它加一个圆角，他会变成这样
【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框
实现它的代码也很简单，如下：

<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>

依旧很简单对吧，那么如果是下面这样的边框呢
【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框
我们只要四个角有边框，这样的边框恐怕无法用上面的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>

首先呢，我们给这个边框打底，实现的效果大概是这样，我们得到了一个蓝底的圆角矩形
【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框
接着，在这个背景的基础上，我们再加一条属性：

<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文件的背景不是白色，这里也要修改成对应的颜色，不然就会有些奇怪

【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框
接下来我们添加第三条属性：

<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>

现在看起来就初具雏形了
【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框
这条属性是添加了一个上下与第一条一致，左右比第一条属性短的白色的矩形，大概就是下图我用红框标出来的部分，现在是不是大概知道我要做什么了呢（第三条属性中的 android:left=“30dp” 用来控制圆角边框的长度，也是可以根据自己的实际情况修改）：
【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框
接下来就是最后一步了

<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>

这条属性加上，我们就大功告成了，如下图：
【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框
这种方法其实就是通过不断地叠加，堆叠出我们想要的效果，方法很简单，但是需要一些想象力，而且弊端也很明显，比如四个圆角的边框不够丝滑，与实际的效果还是有些出入，再比如需要保证背景一致，如果你的activity的背景是图片就没有什么好办法了

那么，有没有更好的办法呢？有

二、使用矢量图

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

【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框
下载安装好后（安装时自定义安装可以选择中文），我们要先拿到svg文件，没有UI的同学可以去阿里的矢量图标库：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a，搜索全屏就能找到类似这样效果的矢量图标了，如图：
【和UI斗智斗勇的日子】Android实现一个只有四个圆角有边框的边框

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