Android Drawable - Shape

Posted 2022-11-15 winfredzen

Shape

具体的可参考官方文档的解释形状可绘制对象

文件位置：res/drawable/filename.xml
编译资源类型：GradientDrawable
文件引用：
In Java: R.drawable.filename
In XML: @[package:]drawable/filename

语法

<?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="float"
        android:centerY="float"
        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>

---

内容参考：

• Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

线

实线line_solid.xml:

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

    <stroke android:width="2dp" android:color="#ff0000"/>

</shape>

虚线line_dash.xml

• android:dashWidth - 每段破折线的长度
• android:dashGap - 每段破折线之间的间隔

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

    <stroke android:width="2dp" android:color="#ff0000" android:dashGap="5dp" android:dashWidth="10dp"/>

</shape>

布局文件及效果

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="实线"
        android:textAlignment="center"
        android:background="@drawable/line_solid"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="虚线"
        android:textAlignment="center"
        android:background="@drawable/line_dash"/>


</LinearLayout>

矩形

android:shape="rectangle"，solid表示的是用于填充形状的纯色

矩形带边框

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

    <stroke android:color="#ffff0000" android:width="2dp"/>

    <solid android:color="#ff00ffff" />

</shape>

圆角矩形

<corners>为形状产生圆角。仅当形状为矩形时适用

• android:radius - 所有角的半径
• android:topLeftRadius - 左上角的半径
• android:topRightRadius - 右上角的半径
• android:bottomLeftRadius - 左下角的半径
• android:bottomRightRadius - 右下角的半径

如下的rect_rounded_left_right_arc_border.xml：

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

<!--    <size android:width="50dp" android:height="10dp" />-->

    <stroke android:color="#ffff0000" android:width="2dp"/>

    <solid android:color="#8000ff00" />

    <corners android:radius="50dp" />

</shape>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="圆角矩形-左右两边都是半圆弧-带边框"
        android:gravity="center"
        android:layout_marginTop="10dp"
        android:background="@drawable/rect_rounded_left_right_arc_border"/>

渐变

gradient: 设置形状的渐变颜色，可以是线性渐变、辐射渐变、扫描性渐变

• android:type 渐变的类型
  • linear 线性渐变，默认的渐变类型
  • radial 放射渐变，设置该项时，android:gradientRadius也必须设置
  • sweep 扫描性渐变
• android:startColor 渐变开始的颜色
• android:endColor 渐变结束的颜色
• android:centerColor 渐变中间的颜色
• android:angle 渐变的角度，线性渐变时才有效，必须是45的倍数，0表示从左到右，90表示从下到上
• android:centerX 渐变中心的相对X坐标，放射渐变时才有效，在0.0到1.0之间，默认为0.5，表示在正中间
• android:centerY 渐变中心的相对X坐标，放射渐变时才有效，在0.0到1.0之间，默认为0.5，表示在正中间
• android:gradientRadius 渐变的半径，只有渐变类型为radial时才使用
• android:useLevel 如果为true，则可在LevelListDrawable中使用

参考Android Shape, Selector Examples中的例子：

定义一个gradient.xml

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

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

</shape>

    <TextView
        android:layout_margin="10dp"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/gradient"/>

其它的渐变可以参考：

• Android Shape Drawable Examples

padding

<padding>要应用到包含视图元素的内边距（这会填充视图内容的位置，而非形状）

参考Drawables

如下的solid_color_shape.xml，当有padding的时候

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="4dp" />
    <stroke android:width="4dp" android:color="#C1E1A6" /> 
    <solid android:color="#118C4E"/> 
    <padding android:left="20dp" android:top="20dp" 
             android:right="20dp" android:bottom="20dp" /> 
</shape>

当注释掉padding

ring

shape根元素有些属性只适用于ring类型

• android:innerRadius 内环的半径
• android:innerRadiusRatio 浮点型，以环的宽度比率来表示内环的半径，默认为3，表示内环半径为环的宽度除以3，该值会被android:innerRadius覆盖
• android:thickness 环的厚度
• android:thicknessRatio 浮点型，以环的宽度比率来表示环的厚度，默认为9，表示环的厚度为环的宽度除以9，该值会被android:thickness覆盖
• android:useLevel 一般为false，否则可能环形无法显示，只有作为LevelListDrawable使用时才设为true

参考：

• Android样式的开发:shape篇
• Android Shape Drawable Examples

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="20dp"
    android:shape="ring"
    android:thickness="10dp"
    android:useLevel="false">
    <solid android:color="@color/colorPrimary" />
    <padding android:bottom="50dp"
        android:left="16dp"
        android:right="16dp"
        android:top="50dp"/>
</shape>

其它例子

1.Android Shape Drawables Tutorial