Android xml 效果之 Shape Drawable

最新推荐文章于 2024-05-15 00:31:45 发布

lxmy2012

最新推荐文章于 2024-05-15 00:31:45 发布

阅读量3k

点赞数

分类专栏： android 文章标签： shape drawable corners gradient solid stroke

本文链接：https://blog.csdn.net/lxmy2012/article/details/41631483

版权

android 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

呃，xml 效果包含的东西蛮多的，一不小心，坑好像挖得有点大，看来有必要分成几次来填坑。

Android xml 效果之 Shape Drawable

今天先说 Shape ，可以设置背景、边框、渐变等效果

一、Shape 基本属性

基本属性copy自官方文档，如下：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"]
    android:innerRadius="integer"
    android:innerRadiusRatio="float"
    android:thickness="integer"
    android:thicknessRatio="float"
    android:useLevel="boolean" >
    <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 = [ "rectangle" | "oval" | "line" | "ring" ]

rectangle 矩形，这个是默认值；
oval 椭圆；
line 直线；
ring 圆环；

下面5个属性都是用在圆环 shape="ring" 时

android:innerRadius 内环半径

android:innerRadiusRatio 设置内环半径比例，默认值等于9，内环半径 = 环宽度 / 该值，会被android:innerRadius 覆盖

android:thickness 环的厚度，即内环与外环的距离

android:thicknessRatio 设置环的厚度比例，默认值等于3，环厚度 = 环宽度 / 该值，会被android:thickness 覆盖

android:useLevel 当值为true时，作为一个LeveListDrawable，这里必须为设置为false，不然圆环可能不会出现；LeveListDrawable 是一个坑，待填。

节点 corners 创建圆角，仅用于矩形 shape="rectangle"

android:radius 设置为圆角矩形，该值为圆角半径；

android:topLeftRadius 设置左上角圆角半径；

android:topRightRadius 设置右上角圆角半径；

android:bottomLeftRadius 设置左下角圆角半径；

android:bottomRightRadius 设置右下角圆角半径；

节点 gradient 指定颜色渐变效果

android:angle 渐变的角度，必须是45的倍数，默认值 0 ；

angle=0 从左到右
angle=45 从左下到右上
angle=90 从下到上
angle=135 从右下到左上
angle=180 从右到左
angle=225 从右上到左下
angle=270 从上到下
angle=315 从左上到右下

android:centerX 相对X轴位置，取值 (0 ~ 1.0)

android:centerY 相对Y轴位置，取值 (0 ~ 1.0)

这两个要配合使用，设置渐变的中心点位置

android:startColor 设置渐变的开始颜色

android:centerColor 设置渐变的中间颜色

android:endColor 设置渐变的结束颜色

其中，开始颜色和结束颜色是必须有的，如果二缺一，缺的那个会默认为白色；

如果设置中间颜色，颜色按开始》中间》结束顺序渐变

android:type 渐变图案的类型

linear 线性渐变，默认值，沿着一条轴线（水平或垂直）改变颜色，从起点到终点颜色进行顺序渐变，从一边拉向另一边；
radial 径向渐变，放射性渐变，从内到外的圆形颜色渐变，从中间拉向外面；
sweep 扫描渐变，以右边为起点，按顺时针方向扫描；

android:gradientRadius 仅用于径向渐变 type=“radial" 时，

该值用于设置渐变圆形半径

android:useLevel 当值为true时，作为一个LeveListDrawable ，还是刚才的那个坑，先不填。

节点 padding 设置填充内容边距

这个就很常见了，等同控件的android:padding 属性

android:left 填充左边距

android:top 填充上边距

androdi:right 填充右边距

android:bottom 填充下边距

节点 size 设置尺寸大小

设置宽高为固定值，ImageView控件可能需要用到

android:height 设置高度

android:width 设置宽度

节点 solid 设置纯色填充内容

android:color 设置填充的颜色

节点 stroke 设置边框线

android:width 边框线的宽度，也就是粗细

android:color 边框线的颜色

android:dashGap 设置虚线效果，空白划线长度

android:dashWidth 设置虚线效果，着色划线长度

其它补充：

1. 节点 solid 和节点 gradient 会影响覆盖，如果同时使用，写在前面的会被写在后面的覆盖

2. 翻译有误差，可以参看官方文档

二、效果展示

说了那么多，是时候看下效果了

矩形效果

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />

    <gradient
        android:type="linear"
        android:angle="45"
        android:endColor="@color/red_end"
        android:startColor="@color/red_start" />

    <padding
        android:bottom="10dip"
        android:left="10dip"
        android:right="10dip"
        android:top="10dip" />

    <size
        android:height="100dip"
        android:width="100dip" />

    <stroke
        android:dashGap="10px"
        android:dashWidth="20px"
        android:width="3dip"
        android:color="@color/blue_start" />

</shape>

虚线效果

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >

    <size android:height="10dp" />

    <stroke
        android:dashGap="5dp"
        android:dashWidth="10dp"
        android:width="5dp"
        android:color="@color/blue_start" />

</shape>

虚线补充

虚线效果有个问题，android 4.0 版本后有个Bug，设置虚线会变成实线，参看这里

解决方法是关闭硬件加速

// 在AndroidManifest.xml 设置应用不使用硬件加速，对应用性能有影响，不建议使用
<application
	......
	android:hardwareAccelerated="false"/>
	
// 在使用虚线的控件设置，推荐
<View
    ......
	android:layerType="software"/>

单环效果

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="3"
    android:thickness="10dp"
    android:useLevel="false" >

    <solid android:color="@color/blue_start" />

    <gradient
        android:angle="45"
        android:endColor="@color/red_end"
        android:startColor="@color/red_start" />
    
</shape>

双环效果

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="3"
    android:thickness="15dp"
    android:useLevel="false" >

    <size
        android:height="100dp"
        android:width="10dp" />
    
    <gradient
        android:angle="45"
        android:endColor="@color/white"
        android:startColor="@color/white" />
    
    <stroke
        android:dashGap="0px"
        android:dashWidth="20px"
        android:width="5dip"
        android:color="@color/red_end" />

</shape>

三环效果

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="3"
    android:thickness="15dp"
    android:useLevel="false" >

    <size
        android:height="100dp"
        android:width="10dp" />
    
    <gradient
        android:angle="45"
        android:endColor="@color/red_end"
        android:startColor="@color/red_start" />
    
    <stroke
        android:dashGap="1px"
        android:dashWidth="20px"
        android:width="5dip"
        android:color="@color/blue_start" />

</shape>

除了圆环不太好控制，其它都不是很麻烦

三、最后补充

关于留下来的坑，待填

转载请注明出处：http://blog.csdn.net/lxmy2012/article/details/41631483

XML源码下载

以上