Android Shape使用 改变样式
2019-07-16 本文已影响0人
xiesen
使用
在 drawable 新建 一个 xml 文件
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<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>
这里面已经列出了所有的shape属性。
从 android:shape=["rectangle" | "oval" | "line" | "ring"]
这里可以看出，shape可以画四种图形，分别是：矩形（rectangle）、椭圆（oval）、线（line）、圆环（ring）。
Shape效果图.png
矩形（rectangle）
直角矩形：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorPrimary"></solid>
</shape>
圆角矩形：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"></corners>
<solid android:color="@color/colorPrimary"></solid>
<padding android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp"></padding>
</shape>
corners：圆角大小。
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer"
android:radius：表示4个角的圆角大小；
还可以分别设置四个角的，使用下面四个属性：android:topLeftRadius、android:topRightRadius、android:bottomLeftRadius、android:bottomRightRadius分别表示：左上、右上、左下、右下。
<padding android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp"></padding>
padding：设置内边距。
无填充带边框：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"></corners>
<padding android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp"></padding>
<stroke android:width="5dp"
android:color="@color/colorAccent"></stroke>
</shape>
stroke
android:width：边框大小
android:color：边框颜色
渐变：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorPrimary"></solid>
<padding android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp"></padding>
<!--angle 渐变角度,0:左到右;90:下到上;180:右到左;270:上到下-->
<gradient android:startColor="@android:color/white"
android:endColor="@android:color/black"
android:angle="0"></gradient>
</shape>
gradient：
android:startColor：渐变起始颜色
android:endColor：渐变结束颜色
android:angle：渐变角度：0:左到右;90:下到上;180:右到左;270:上到下
椭圆（oval）
一般用来画圆。
纯色的圆：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorPrimary"></solid>
<size android:height="100dp"
android:width="100dp"></size>
</shape>
size的height和width设置为一样大小就是一个圆了。
然后直接使用solid填充颜色即可。
渐变效果：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:height="100dp"
android:width="100dp"></size>
<gradient android:centerX="0.5"
android:centerY="0.5"
android:type="sweep"
android:startColor="@color/colorPrimary"
android:endColor="@color/colorAccent"></gradient>
</shape>
android:centerX：表示渐变的X轴起始位置，范围0-1，0.5表示圆心。
android:centerY：表示渐变的Y轴起始位置，范围0-1，0.5表示圆心。
android:type：渐变类型，有三种
分别是：
linear 线性渐变，默认的渐变类型
radial 放射渐变，设置该项时，android:gradientRadius也必须设置
sweep 扫描性渐变
线（line）
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="1dp"
android:color="@color/colorAccent"
android:dashGap="3dp"
android:dashWidth="4dp"></stroke>
<size android:height="3dp"></size>
</shape>
线是居中显示的。
android:width：填充颜色的高度
android:dashGap：虚线间距宽度
android:dashWidth：虚线宽度
<size android:height="3dp"></size>：line的高度，size大小必须大于android:width
圆环（ring）
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:thickness="10dp">
<!--useLevel需要设置为false-->
<solid android:color="@color/colorAccent"></solid>
</shape>
android:thickness：圆环宽度
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:thickness="10dp">
<!--useLevel需要设置为false-->
<solid android:color="@color/colorAccent"></solid>
<gradient android:startColor="@color/colorAccent"
android:endColor="@color/colorPrimary"
android:type="sweep"></gradient>
</shape>
以上只是简单的介绍了一下shape的用户，里面有很多属性还没有用到，需要大家自己去实践一下，写出来看到效果才能更好的理解。
引用
<!--注意 android:background="@drawable/btn_selector"样式位置-->
<Button
android:id="@+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/btn_selector"
android:text="@string/hello_world" />
Button点击实现另一种背景
drawable目录下新建一个selector文件btn_selector.xml，大家应该秒懂这个文件的内容和意思吧！当按钮正常没有被按下的时候显示一个背景，按下的时候则显示另外一个颜色的背景，这样可以使用户得知按钮被按下了。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Button正常状态下的背景 -->
<!-- android:drawable="@drawable/btn_bg_normal"在 drawable 新建 一个 xml 文件自定义样式 -->
<item android:drawable="@drawable/btn_bg_normal" android:state_pressed="false"/>
<!-- Button按下时的背景 -->
<!-- android:drawable="@drawable/btn_bg_pressed"在 drawable 新建 一个 xml 文件自定义样式 -->
<item android:drawable="@drawable/btn_bg_pressed" android:state_pressed="true"/>
</selector>
