这里给出的是shape中定义矩形的相关代码:
(1)矩形效果1
1)效果图:
2)shape中的代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00ff00"/>
</shape>
3)xml布局文件中引用自定义shape
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shape_test"
android:text="只加了填充色的矩形"/>
- 在引用shape的时候,将shape用作tv的背景色
注意:下面的几个示例代码中,改变的只是shape中的代码,xml中引用时的代码不改变,所以,下面的示例代码中只给出效果图和shape代码
(2) 矩形效果2
1)效果图
2)shape中的代码
示例代码1 :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00ff00"/>
<!--矩形每个角的弧度半径都定义为8 -->
<corners android:radius="8dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
示例代码2 :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00ff00"/>
<!--矩形每个角的弧度半径都定义为8 -->
<corners android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 以上两种示例代码效果相同,方式1 统一设置每个角半径,方式2 分别设置角半径;如果要求的效果中角半径不一致的时候,使用方式2 ,如果要求的效果中角半径一致,推荐方式1
(3)矩形效果3
1)效果图 –左侧圆角,右侧依旧是直角
2)shape中的代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00ff00"/>
<corners android:bottomLeftRadius="8dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="8dp"
android:topRightRadius="0dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 想改变哪个角的弧度,就设置对应的数据,如果不想改变,就设置为0dp;或者,直接不写不想改变角度的那一项,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00ff00"/>
<corners android:bottomLeftRadius="8dp"
android:topLeftRadius="8dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
(4)矩形效果4
1)效果图
2)shape中的代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00ff00"/>
<!--矩形每个角的弧度半径都定义为8 -->
<corners android:radius="8dp"/>
<!--控制内容与该shape的边距-->
<padding
android:bottom="5dp"
android:left="15dp"
android:right="15dp"
android:top="5dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 给shape增加padding节点,控制内容与shape图形的边距。
3)xml布局文件中引用自定义shape
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shape_test"
android:text="添加了填充色,圆角,padding的矩形"/>
- 1
- 2
- 3
- 4
- 5
- 我们并没有给TextView设置padding值,效果图中的文字与图形的边距,就是通过shape中的padding节点控制的
(5)矩形效果5
1)效果图
2)shape中的代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--矩形每个角的弧度半径都定义为8 -->
<corners android:radius="8dp"/>
<!--加一个普通的边线-->
<stroke
android:width="3dp"
android:color="#ff0000"/>
<!--控制内容与该shape的边距-->
<padding
android:bottom="5dp"
android:left="15dp"
android:right="15dp"
android:top="5dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- stroke边线的宽度(说是“厚度”更好理解)定义为3dp,颜色使用16进制颜色值,其实也可以引用color文件中的颜色
(6)矩形效果6
1)效果图
2)shape中的代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00ff00"/>
<!--矩形每个角的弧度半径都定义为8 -->
<corners android:radius="8dp"/>
<!--加虚边线-->
<stroke
android:width="3dp"
android:color="#ff0000"
android:dashGap="5dp"
android:dashWidth="35dp"/>
<!--控制内容与该shape的边距-->
<padding
android:bottom="5dp"
android:left="15dp"
android:right="15dp"
android:top="5dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- dashWidth 表示每个线段的长度
- dashGap 表示线段之间的间隔
(7)矩形效果7
1)效果图
2)shape中的代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--矩形每个角的弧度半径都定义为8 -->
<corners android:radius="8dp"/>
<!--固定色-->
<solid android:color="#c4ff00"/>
<!--渐变色-->
<gradient
android:endColor="#00ff00"
android:startColor="#fff"
/>
<!--solid 和 gradient不能同时使用,同时使用时后定义的会覆盖先定义的-->
<!--加虚边线-->
<stroke
android:width="3dp"
android:color="#ff0000"
android:dashGap="5dp"
android:dashWidth="35dp"/>
<!--控制内容与该shape的边距-->
<padding
android:bottom="5dp"
android:left="15dp"
android:right="15dp"
android:top="5dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 我们添加了gradient节点,指定了起始渐变色和终止渐变色,并没有指定渐变的类型
- 没有指定渐变类型的时候,默认是linear线性渐变,而且渐变角度angle 为0,也就是从左向右渐变
- gradient和solid共存时,后定义的会覆盖先定义的
(8)矩形效果8
1)效果图
2)shape中的代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--矩形每个角的弧度半径都定义为8 -->
<corners android:radius="8dp"/>
<!--固定色-->
<solid android:color="#c4ff00"/>
<!--渐变色-->
<gradient
android:angle="180"
android:endColor="#00ff00"
android:startColor="#fff"
/>
<!--solid 和 gradient不能同时使用,同时使用时后定义的会覆盖先定义的-->
<!--加虚边线-->
<stroke
android:width="3dp"
android:color="#ff0000"
android:dashGap="5dp"
android:dashWidth="35dp"/>
<!--控制内容与该shape的边距-->
<padding
android:bottom="5dp"
android:left="15dp"
android:right="15dp"
android:top="5dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 更改了渐变色的渐变角度angle,该属性只有在渐变类型type是linear时才有效(不指定type时,默认linear),而且必须是45的倍数
- 代码中指定angle为180,表示从右向左渐变
- angle的取值以及对应的渐变方向:
- 0 从左到右
- 45 左下到右上
- 90 下到上
- 135 右下到左上
- 180 从右到左
- 225 右上到左下
- 270 上到下
- 315 左上到右下
- 360 效果同0 从左往右
(9)矩形效果9
1)效果图–圆角,虚边线,padding
2)shape中的代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--矩形每个角的弧度半径都定义为8 -->
<corners android:radius="8dp"/>
<!--加虚边线-->
<stroke
android:width="3dp"
android:color="#ff0000"
android:dashGap="5dp"
android:dashWidth="35dp"/>
<!--控制内容与该shape的边距-->
<padding
android:bottom="5dp"
android:left="15dp"
android:right="15dp"
android:top="5dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
(10)矩形效果10
1)效果图
2)shape中的代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--矩形每个角的弧度半径都定义为8 -->
<corners android:radius="8dp"/>
<!--渐变色-->
<gradient
android:endColor="#00ff00"
android:gradientRadius="500dp"
android:startColor="#fff"
android:type="radial"/>
<!--加虚边线-->
<stroke
android:width="3dp"
android:color="#ff0000"
android:dashGap="5dp"
android:dashWidth="35dp"/>
<!--控制内容与该shape的边距-->
<padding
android:bottom="5dp"
android:left="15dp"
android:right="15dp"
android:top="5dp"/>
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 这里将渐变的类型设置成了radial 放射渐变,使用radial时必须设置gradientRadius 渐变半径,
-
gradientRadius的取值类型有三种, dimension,float,fraction,上面的效果图是取的dimension
-
下面的效果图是当gradientRadius取 float类型的500时的效果
(11)矩形效果11 –扫描渐变
1)效果图
2)shape中的代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--矩形每个角的弧度半径都定义为8 -->
<corners android:radius="8dp"/>
<!--渐变色-->
<gradient
android:endColor="#00ff00"
android:startColor="#fff"
android:type="sweep"/>
<!--加虚边线-->
<stroke
android:width="3dp"
android:color="#ff0000"
android:dashGap="5dp"
android:dashWidth="35dp"/>
<!--控制内容与该shape的边距-->
<padding
android:bottom="5dp"
android:left="15dp"
android:right="15dp"
android:top="5dp"/>
</shape>
- 这里将渐变类型设置成了sweep扫描渐变