Android drawable之shape

<?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>

就是这么直接, 所有的用法都在这里了, 可以翻墙的同学可以直接看这个

  • shape标签
    首先看一下shape标签, 有一个shape属性, 默认是rectangle, 用的最多也是rectangle, 还有oval(椭圆), line(线), ring(环形);
  • corners
    接着看一下<corners>标签, 该标签当且仅当矩形时有用, 设置矩形的圆角
    radius属性设置四个角的半径, 但是会被其他四个的属性覆盖掉, 其他四个属性就是设置具体角的的圆角半径
    可以看一下简单例子:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置背景色 -->
    <solid
        android:color="#E0FFFF"
        />

    <!-- 设置圆角 -->
    <corners
        android:radius="20dp"
        />
</shape>

然后添加一个按钮添加上去这个背景:

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/etc"
        android:padding="20dp"
        android:text="按钮"
        android:textSize="20sp"/>
效果图

也可以设置这样

<corners    android:topLeftRadius="30dp"    android:topRightRadius="30dp"    />
效果图
  • gradient标签
    angle: 整形, 渐变的角度. 0表示从左到右, 90为从上到下, 必须是45的倍数, 默认值为0;
    centerX:浮点型。渐变中心的相对 X 轴位置 (0 - 1.0)。
    centerY:浮点型。渐变中心的相对 Y 轴位置 (0 - 1.0)。
    startColor, centerColor, endColor: 设置相应的颜色
    type: 要应用的渐变团的类型, 有效值为:
说明
"linear" 线性渐变。这是默认值。
"radial" 径向渐变。起始颜色为中心颜色。
"sweep" 流线型渐变。

当类型为radial是, 还有一个属性为gradientRadius, 为浮点型, 设置渐变的半径
看几个简单效果:

<!-- 设置渐变 -->
    <gradient
        android:angle="90"
        android:endColor="#F0FFF0"
        android:startColor="#00FF7F"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#FFF0F5"
        />
效果图

设置为径向渐变的话:

<!-- 设置渐变 -->
    <gradient
        android:type="radial"
        android:gradientRadius="80dp"
        android:angle="90"
        android:endColor="#FFDAB9"
        android:startColor="#00FF7F"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#FFFF00"
        />
效果图

流线型的话

 <!-- 设置渐变 -->
    <gradient
        android:type="sweep"
        android:angle="90"
        android:endColor="#FFDAB9"
        android:startColor="#00FF7F"
        android:centerX="0.5"
        android:centerY="0.5"
        android:centerColor="#FFFF00"
        />
效果
  • padding 标签
    有left, right, top, bottom四个属性.没什么好说的
  • size标签
    有height和width属性, 也没有什么好说的
  • solid标签
    之前已经用到了, 只有color一个属性, 用来填充颜色的.
  • stroke
    形状的笔画中线
    width: 线宽
    color: 颜色
    dashGap: 每个短划线的间距, 只有设置了dashWidth才有效
    dashWidth: 每个短划线的大小, 只有设置了dashGap才有效
    一个例子:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <padding android:left="7dp"
             android:top="7dp"
             android:right="7dp"
             android:bottom="7dp" />
    <corners android:radius="8dp" />
    <stroke
        android:width="3dp"
        android:color="#00CED1"
        android:dashGap="15dp"
        android:dashWidth="20dp"/>
</shape>
效果

除了矩形, 其他三种的也是类似的, 自己可以尝试出各种效果,
只不过当shape类型为ring时, 还有几个额外的属性

  • innerRadius: 尺寸。环内部(中间的孔)的半径
  • innerRadiusRatio:浮点型。环内部的半径,以环宽度的比率表示,例如,如果 android:innerRadiusRatio="5",则内半径等于环宽度除以 5。此值被android:innerRadius覆盖。默认值为 9。
  • thickness: 尺寸。环的厚度,
  • thicknessRatio: 浮点型。环的厚度,表示为环宽度的比率。例如,如果 android:thicknessRatio="2",则厚度等于环宽度除以 2。此值被android:innerRadius
    覆盖。默认值为 3。

来看一个效果:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:innerRadiusRatio="3"
       android:shape="ring"
       android:thicknessRatio="9"
       android:useLevel="false">
    <gradient
        android:endColor="#2F90BD"
        android:startColor="#FFFFFF"
        android:type="sweep" />
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
</shape>
效果
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容