目录
-
1.shape简介
-
2.shape属性详解
-
3.shape简单使用
具体操作
一、shape简介
设置shape属性的路径：
drawable->new->Drawable resource file
image.png
设置File name->点击ok
image.png
shape的形状，默认为矩形，可以设置为:
矩形（rectangle）、椭圆形(oval)、线性形状(line)、环形(ring)
二、shape属性详解
1.属性基本语法实例
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
<corners //圆角属性
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient //渐变属性
android:angle="integer"
android:centerX="integer"
android:centerY="integer"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding //边距属性
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size //大小属性
android:width="integer"
android:height="integer" />
<solid //填充属性
android:color="color" />
<stroke //描边属性
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
2.shape基本属性介绍
- corner 定义圆角的大小
| corners(定义圆角） | 作用域 |
|---|---|
android:radius="10dp" |
全部的圆角半径 |
android:topRightRadius="5dp" |
右上角的圆角半径 |
android:topLeftRadius="5dp" |
左上角的圆角半径 |
android:bottomLeftRadius="5dp" |
左下角的圆角半径 |
android:bottomRightRadius="5dp" |
右下角的圆角半径 |
- solid 填充颜色
| solid（填充颜色) | 作用域 |
|---|---|
android:color="#ffff00" |
内部填充颜色 |
- gradient 渐变
| gradient（渐变） | 作用域 |
|---|---|
android:type=["linear" \ "radial"\ "sweep"] |
共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变 |
android:angle="90" |
渐变角度，必须为45的倍数，0为从左到右，90为从上到下 |
android:centerX="0.5" |
渐变中心X的相当位置，范围为0～1 |
android:centerY="0.5" |
渐变中心Y的相当位置，范围为0～1 |
android:startColor="#24e9f2" |
渐变开始点的颜色 |
android:centerColor="#2564ef" |
渐变中间点的颜色，在开始与结束点之间 |
android:endColor="#25f1ef" |
渐变结束点的颜色 |
android:gradientRadius="5dp" |
渐变的半径，只有当渐变类型为radial时才能使用 |
android:useLevel="false" |
使用LevelListDrawable时就要设置为true。设为false时才有渐变效果 |
- padding 定义内部边距
| padding (内部边距) | 作用域 |
|---|---|
android:left="10dp" |
左内边距 |
android:top="10dp" |
上内边距 |
android:right="10dp" |
右内边距 |
android:bottom="10dp" |
下内边距 |
- stroke 描边
| stroke（描边） | 作用域 |
|---|---|
android:width="1dp" |
描边的宽度 |
android:color="#ff0000" |
描边的颜色 |
| -------以下两个属性设置虚线 ------- | |
android:dashWidth="1dp" |
虚线的宽度，值为0时是实线 |
android:dashGap="1dp" |
虚线的间隔 |
- size 定义图形大小
| size（图形大小） | 作用域 |
|---|---|
android:width="50dp" |
宽度 |
android:height="50dp" |
高度 |
三、shape简单使用
-
案例一
新建shape_rectangle.xml文件
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="5dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:bottomRightRadius="15dp" />
<gradient
android:startColor="#ff0000"
android:endColor="#00ff00"
android:angle="90"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp"/>
<size
android:width="200dp"
android:height="200dp"/>
<solid
android:color="@color/colorAccent"/>
<stroke
android:width="2dp"
android:color="@color/colorAccent"/>
</shape>
在布局中引用shape_rectangle.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shape_rectangle"/>
</LinearLayout>
-
案例二-（shape的嵌套）
新建btn_shape_color.xml文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--无效状态 深灰色-->
<item android:state_enabled="false">
<shape android:shape="oval">
<solid android:color="#2E3031"/>
<corners android:radius="30dp"/>
</shape>
</item>
<!--默认状态 圆角 矩形-->
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#3889ED"/>
</shape>
</item>
</selector>
在布局中引用btn_shape_color.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/btn_shape_color"/>
</LinearLayout>
