Android shape属性详细整理

于 2015-07-09 23:43:25 发布
阅读量676 收藏
点赞数
分类专栏： android 文章标签： Android shape 自定义背景 图片
本文介绍如何利用Android的Shape资源创建各种UI元素，包括按钮背景、虚线、渐变线等，并展示了如何通过Shape实现视图背景的选择器效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

有时候 ，为了满足一些需求，我们要用到 shape 去定义 一些背景，shape 的用法 跟图片一样 ，可以给View设置 android:background=”@drawable/shape”, 定义的shape 文件，放在 res/shape 目录下

通常我们可以用shape 做 button 的背景选择器，也可以做切换tab 时，底部的下划线。

先看我们用shape 都可以做什么

[XML]  纯文本查看  复制代码
?
1
2
3
4
5
6
7
8
<? xml version = "1.0" encoding = "utf-8" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android" >
     < gradient
   android:type = "linear"
   android:angle = "0"
   android:endColor = "#F028A2"
   android:startColor = "#2A99F3" />
</ shape >
shape 都能做什么图

先看看shape 都能做什么图


shape下面 一共有6个子节点， 常用的 就只有 四个，padding 和size 一般用不到。

corners ———-圆角

gradient ———-渐变

padding ———-内容离边界距离

size ————大小

solid ———-填充颜色

stroke ———-描边


[XML]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<? xml version = "1.0" encoding = "utf-8" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android" >
     <!-- 圆角 -->
     < corners
   android:radius = "9dp"
   android:topLeftRadius = "2dp"
   android:topRightRadius = "2dp"
   android:bottomLeftRadius = "2dp"
   android:bottomRightRadius = "2dp" /> <!-- 设置圆角半径 -->
     <!-- 渐变 -->
     < gradient
   android:startColor = "@android:color/white"
   android:centerColor = "@android:color/black"
   android:endColor = "@android:color/black"
   android:useLevel = "true"
   android:angle = "45"
   android:type = "radial"
   android:centerX = "0"
   android:centerY = "0"
   android:gradientRadius = "90" />
     <!-- 间隔 -->
     < padding
   android:left = "2dp"
   android:top = "2dp"
   android:right = "2dp"
   android:bottom = "2dp" /> <!-- 各方向的间隔 -->
     <!-- 大小 -->
     < size
   android:width = "50dp"
   android:height = "50dp" /> <!-- 宽度和高度 -->
     <!-- 填充 -->
     < solid
   android:color = "@android:color/white" /> <!-- 填充的颜色 -->
     <!-- 描边 -->
     < stroke
   android:width = "2dp"
   android:color = "@android:color/black"
   android:dashWidth = "1dp"
   android:dashGap = "2dp" />
</ shape >
shape 做虚线

拿shape 做虚线,shape 设置为line ， stroke 是描边属性，其中 dashGap dashWidth 两个属性彼此一起存在才生效。

dashGap ：两段之间的空隙宽度、dashWidth ：一段线的宽度

[XML]  纯文本查看  复制代码
?
1
2
3
4
5
6
7
8
< shape xmlns:android = "http://schemas.android.com/apk/res/android"
     android:shape = "line" >
     < stroke
   android:dashGap = "3dp"
   android:dashWidth = "8dp"
   android:width = "1dp"
   android:color = "#009999" />
</ shape >
shape做渐变实线

拿shape做渐变实线

gradient 表示渐变

angle 渐变角度，45的倍数。

startColor endColor centerColor 起 止 中 的颜色


[XML]  纯文本查看  复制代码
?
1
2
3
4
5
6
7
8
< shape xmlns:android = "http://schemas.android.com/apk/res/android" >
 
     < gradient
         android:type = "linear"
         android:angle = "0"
         android:endColor = "#F028A2"
         android:startColor = "#2A99F3" />
</ shape >
shape 做view背景选择器

shape 做view背景选择器


这里注意 ，item 的 state_pressed=true 是选择状态，按下，另一个不设置 就是 正常状态。

solid ：是填充颜色

corners：设置 四个角的弧度


[XML]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<? xml version = "1.0" encoding = "utf-8" ?>
< selector xmlns:android = "http://schemas.android.com/apk/res/android" >
     < item android:state_pressed = "true"  >
         < shape xmlns:android = "http://schemas.android.com/apk/res/android"
             android:shape = "rectangle" >
             <!--填充色  -->
             < solid
   android:color = "#ffffff" /> 
             <!-- 描边 --> 
             <!-- dashGap：- 与- 虚线之间的间隔  dashWidth: 实线的宽度width： color:-->
          <!--       <stroke             
   android:dashGap="10dp"
   android:dashWidth="5dp"
   android:width="1dip"
   android:color="#d3d3d3"
   /> -->
             <!-- 圆角 --> 
             < corners
   android:topRightRadius = "10dp"    
   android:bottomLeftRadius = "10dp"  
   android:topLeftRadius = "10dp"   
   android:bottomRightRadius = "10dp"   
   />
         </ shape >
     </ item >
     < item >
         <!--shape:oval 椭圆     rectangle:方形    line：线性-->
         < shape xmlns:android = "http://schemas.android.com/apk/res/android"
             android:shape = "rectangle" >
             < gradient 
   android:startColor = "#55B4FE" 
   android:endColor = "#3d8FFB"
   android:type = "linear" />
             <!-- 描边 --> 
          <!--       <stroke
                android:dashGap="10dp"
   android:dashWidth="5dp"
   android:width="1dip"
   android:color="#d3d3d3"
   /> -->
             <!-- 圆角  上下左右四个角 弧度--> 
             < corners
   android:topRightRadius = "10dp"    
   android:bottomLeftRadius = "10dp"  
   android:topLeftRadius = "10dp"   
   android:bottomRightRadius = "10dp"   
   />  
         </ shape >
     </ item >
</ selector >
shape 做矩形

shape 做矩形


android:shape=”rectangle”选为矩形

[XML]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<? xml version = "1.0" encoding = "utf-8" ?>
< shape  xmlns:android = "http://schemas.android.com/apk/res/android"
     android:shape = "rectangle" >
     <!-- 渐变 -->
     < gradient
   android:type = "linear"
   android:startColor = "@android:color/holo_blue_bright"
   android:centerColor = "@android:color/holo_green_dark"
   android:endColor = "@android:color/holo_red_light"
   android:useLevel = "true"
   android:angle = "45" />
     <!-- 填充 -->
<!--     <solid
   android:color="@android:color/white"/>填充的颜色 -->
     <!-- 描边 -->
     < stroke
   android:width = "2dp"
   android:color = "@android:color/black" />
</ shape >
shape 作描边矩形 和 椭圆

shape 作描边矩形 和 椭圆

这里注意shape

android:shape=”oval” 椭圆


[XML]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
<? xml version = "1.0" encoding = "utf-8" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android"
   android:shape = "rectangle" >
   <!-- 填充 -->
   < solid
     android:color = "@android:color/holo_blue_bright" /> <!-- 填充的颜色 -->
   <!-- 描边 -->
   < stroke
     android:width = "2dp"
     android:color = "@android:color/black"
     android:dashWidth = "1dp"
     android:dashGap = "2dp" />
   < corners
     android:topLeftRadius = "20dp"           
android:topRightRadius = "20dp"         
android:bottomLeftRadius = "20dp" 
android:bottomRightRadius = "20dp"
     android:radius = "50dp" />
</ shape >
[XML]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
<? xml version = "1.0" encoding = "utf-8" ?>
< shape xmlns:android = "http://schemas.android.com/apk/res/android"
   android:shape = "oval" >
   <!-- 填充 -->
   < solid
     android:color = "@android:color/holo_orange_light" /> <!-- 填充的颜色 -->
   <!-- 描边 -->
   < stroke
     android:width = "2dp"
     android:color = "@android:color/black" />
</ shape >

ShapeDemo代码： http://download.youkuaiyun.com/detail/u011733020/8880615

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值