Android shape drawable XML 可绘制图形的创建与使用

以你之姓@ 2021-09-22 05:24 237阅读 0赞

本文链接: [http://blog.csdn.net/xietansheng/article/details/54599454][http_blog.csdn.net_xietansheng_article_details_54599454]

## 1. 各属性的配置语法 ##

在项目 `res/drawable` 文件夹中创建一个以 shape 为根节点的 XML 文件，基本语法如下:

<?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape=["rectangle" | "oval" | "line" | "ring"]  // 4种形状分别为: 矩形、椭圆、线、圆环
        android:innerRadius="integer"          // 形状为圆环时的 圆环内半径
        android:thickness="integer"            // 形状为圆环时是 圆环的厚度 (外半径 - 内半径)
        android:useLevel=["true" | "false"]>   // 通常为 false, 否则可能图形不显示
        
        
        <size android:width="integer" android:height="integer" />
        
        
        <solid android:color="color" />
        
         
        <gradient
            android:startColor="color"        // 渐变的开始颜色
            android:centerColor="integer"     // 渐变的中间过渡颜色
            android:endColor="color"          // 渐变的结束颜色
            android:centerX="float"           // 渐变开始的中心点X坐标(相对于形状的宽度), 值范围 0.0 ~ 1.0
            android:centerY="float"           // 渐变开始的中心点Y坐标(相对于形状的高度), 值范围 0.0 ~ 1.0
            android:angle="integer"           // 渐变方向的角度, 0 为从左到右, 90 为从下到上, 该值必须为 45 的倍数
            android:gradientRadius="integer"  // 渐变的圆半径, 仅在 android:type="radial" 时适用
            android:type=["linear" | "radial" | "sweep"]  // 渐变的类型, 分别为: 线性渐变(默认)、径向渐变、流线型渐变
            android:useLevel=["true" | "false"] />        // 如果形状用作 LevelListDrawable, 则此值为 true; 一般为false
        
        
        <stroke
            android:width="integer"           // 边框的厚度
            android:color="color"             // 边框的颜色
            android:dashWidth="integer"
            android:dashGap="integer" />
        
        
        <corners
            android:radius="integer"                 // 统一设置4个角的角度半径, 会被下面具体某个角覆盖
            android:topLeftRadius="integer"          // 左上角 角度半径
            android:topRightRadius="integer"         // 右上角 角度半径
            android:bottomLeftRadius="integer"       // 左下角 角度半径
            android:bottomRightRadius="integer" />   // 右下角 角度半径
        
        
        <padding android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" />
            
    </shape>

PS: 以上元素或属性不需要全部使用，某些元素和属性之间存在冲突或被替换或无效，根据具体选择的形状配置使用。

## 2. 配置形状的引用 ##

1、在项目 `res/drawable` 文件夹下创建文件 `my_shape.xml` :

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    
        
        <stroke android:color="#00FF00" android:width="5dp"/>
    
        
        <solid android:color="#FF0000"/>
    
    </shape>

**PS**: 如果需要空心的形状，则必须指明 solid 颜色为透明色，否则某些机器系统中可能会出现黑底。

2、在项目 `res/layout` 布局文件中引用:

## 3. 具体形状的配置 ##

1、矩形 ( rectangle )

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    
        
        <stroke android:color="#00FF00" android:width="3dp"/>
    
        
        <gradient android:startColor="#FF0000" android:centerColor="#FFFF00" android:endColor="#0000FF" android:angle="90"/>
    
        
        <corners android:bottomLeftRadius="20dp" android:topRightRadius="20dp"/>
    
    </shape>

![矩形][SouthEast]

--------------------

2、椭圆 ( oval )

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    
        
        <size android:width="200dp" android:height="130dp"/>
    
        
        <stroke android:color="#00FFFF" android:width="1dp"/>
    
        
        <gradient android:startColor="#FF0000" android:centerColor="#FF00FF" android:endColor="#FFFF00" android:type="sweep"/>
    
    </shape>

![椭圆][SouthEast 1]

--------------------

3、线段( line )

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    
        
        <size android:width="200dp" android:height="100dp"/>
    
        
        <stroke android:color="#000000" android:width="5dp"/>
    
    </shape>

![线段][SouthEast 2]

--------------------

4、圆环 ( ring )

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadius="90dp" android:thickness="5dp" android:useLevel="false">
    
        
        <solid android:color="#FF0000"/>
    
    </shape>

PS: 通过配置空心椭圆也可以达到圆环的效果

![圆环][SouthEast 3]

--------------------

![18975746.asp][]

[http_blog.csdn.net_xietansheng_article_details_54599454]: http://blog.csdn.net/xietansheng/article/details/54599454
[SouthEast]: /images/20210920/e2eeb4c7d57247a0b91573f759fd3afd.png
[SouthEast 1]: /images/20210920/d53371ae0e234db2b37be963d07b170f.png
[SouthEast 2]: /images/20210920/ddfdac05698a4e95baa884d8b191c231.png
[SouthEast 3]: /images/20210920/0fcb01e9efda4fabac3316fbce3328be.png
[18975746.asp]: http://img.users.51.la/18975746.asp