Android使用shape属性绘制边框内渐变色

先上效果图

这是使用AndroidStudio绘制的带有渐变色的边框背景致

实现方法

项目中由于UI设计需求，必要给按钮、控件设置带有背景致效果的。以下是UI效果图。

这里我们使用shape属性来绘制背景效果。
shape属性介绍

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     android:shape=["rectangle" | "oval" | "line" | "ring"] > // 定义形状
5.     <corners //圆角属性
6.         android:radius="integer"
7.         android:topLeftRadius="integer"
8.         android:topRightRadius="integer"
9.         android:bottomLeftRadius="integer"
10.         android:bottomRightRadius="integer" />
11.     <gradient //渐变属性
12.         android:angle="integer"
13.         android:centerX="integer"
14.         android:centerY="integer"
15.         android:centerColor="integer"
16.         android:endColor="color"
17.         android:gradientRadius="integer"
18.         android:startColor="color"
19.         android:type=["linear" | "radial" | "sweep"]
20.         android:useLevel=["true" | "false"] />
21.     <padding //边距属性
22.         android:left="integer"
23.         android:top="integer"
24.         android:right="integer"
25.         android:bottom="integer" />
26.     <size //大小属性
27.         android:width="integer"
28.         android:height="integer" />
29.     <solid //填充属性
30.         android:color="color" />
31.     <stroke //描边属性
32.         android:width="integer"
33.         android:color="color"
34.         android:dashWidth="integer"
35.         android:dashGap="integer" />
36. </shape>

复制代码

Shape可以定义控件的一些展示效果，比方圆角，渐变，添补，描边，大小，边距；shape子标签就可以实现这些效果，shape子标签有下面几个属性：
corners，
gradient，
padding，
size，
solid，
stroke：
corners（圆角）
代码

layer-list 是用来创建 图层列表的，通过它能创建出一些特殊的 drawable

1. <?xml version="1.0" encoding="utf-8"?>
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3.     <!--顶部的渐变色-->
4.     <item
5.         android:gravity="top">
6.         <shape
7.             xmlns:android="http://schemas.android.com/apk/res/android"
8.             android:shape="rectangle">
9.             <gradient
10.                 android:type="linear"
11.                 android:angle="90"
12.                 android:startColor="#0077b3c7"
13.                 android:endColor="#9077b3c7"
14.                 android:useLevel="false"/>
16.             <size
17.                 android:width="100dp"
18.                 android:height="10dp" />
19.         </shape>
20.     </item>
22.     <!--左侧的渐变色-->
23.     <item
24.         android:gravity="left">
25.         <shape
26.             xmlns:android="http://schemas.android.com/apk/res/android"
27.             android:shape="rectangle">
28.             <gradient
29.                 android:type="linear"
30.                 android:angle="0"
31.                 android:startColor="#9077b3c7"
32.                 android:endColor="#0077b3c7"
33.                 android:useLevel="false"/>
34.             <size
35.                 android:width="10dp"
36.                 android:height="100dp" />
37.         </shape>
38.     </item>
40.     <!--右侧的渐变色-->
41.     <item
42.         android:gravity="right">
43.         <shape
44.             xmlns:android="http://schemas.android.com/apk/res/android">
45.             <gradient
46.                 android:type="linear"
47.                 android:angle="180"
48.                 android:startColor="#9077b3c7"
49.                 android:endColor="#0077b3c7"
50.                 android:useLevel="false"/>
52.             <size
53.                 android:width="10dp"
54.                 android:height="100dp"/>
55.         </shape>
56.     </item>
58.     <!--底部的渐变色-->
59.     <item
60.         android:gravity="bottom">
61.         <shape
62.             xmlns:android="http://schemas.android.com/apk/res/android">
63.             <gradient
64.                 android:type="linear"
65.                 android:angle="90"
66.                 android:centerX="0"
67.                 android:centerY="0"
68.                 android:startColor="#9077b3c7"
69.                 android:endColor="#0077b3c7"
70.                 android:useLevel="false"/>
72.             <size
73.                 android:width="100dp"
74.                 android:height="10dp" />
75.         </shape>
76.     </item>
78.     <!--边框线-->
79.     <item>
80.         <shape
81.             xmlns:android="http://schemas.android.com/apk/res/android"
82.             android:shape="rectangle">
83.             <stroke
84.                 android:width="1dp"
85.                 android:color="@color/button_text_color"/>
86.         </shape>
87.     </item>
88. </layer-list>

复制代码

绘制完毕后，直接到代码中引用即可
效果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。