shape 简单使用

shape 表示图形的形状，通过 shape 创建的 Drawable 其实体类是 GradientDrawable

shape 形状

• line：直线

• oval: 椭圆

• rectangle: 矩形（默认）

• ring: 圆环

shape 标签

• corners

  表示 shape 的四个角的角度，用 px 表示，只适用于 矩形 shape。

  • 属性

    <corners 
        android:topRightRadius 设定左上角的角度
        android:topLeftRadius 设定右上角的角度
        android:bottomRightRadius 设定右下角的角度       
        android:bottomLeftRadius 设定左下角的角度
        android:radius 为四个角同时设定相同的角度，优先级较低，会被其他四个属性覆盖/>
    

  • 示例

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
        <!-- 角度 -->
        <corners
            android:bottomLeftRadius="0dp"
            android:bottomRightRadius="160dp"
            android:radius="5dp"
            android:topLeftRadius="80dp"
            android:topRightRadius="40dp"/>
        <!-- 填充色 -->
        <solid android:color="@color/red"/>
    </shape>
    

shape_corners.png

• gradient

  gradient 表示渐变效果，与 solid 互相排斥，solid 表示纯色填充。

  • 属性

    <gradient
        android:centerX 渐变的中心点的横坐标
        android:centerY 渐变的中心点的纵坐标
        android:startColor 渐变的起始色
        android:endColor 渐变的结束色
        android:centerColor 渐变的中间色
        android:gradientRadius 渐变半径，仅当 android:type="radial" 有效
        android:type 渐变类别，有 linear (线性渐变)、radial (径向渐变 )、sweep (扫描线渐变)，默认是 线性渐变
        android:useLevel 一般为 false，当 Drawable 作为 StateListDrawable 使用时为 true
        android:angle 渐变的角度，默认为 0，取值必须为 45 的倍数，0 表示从左到右边，90 表示从下到上/>
    

  • 示例

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
         android:shape="rectangle">
        <!-- 渐变 -->
        <gradient
          android:startColor="@color/red"
          android:centerColor="@color/yellow"
          android:endColor="@color/blue"
          android:gradientRadius="200dp"
          android:type="xxx"/>
    </shape>
    

    1. linear

       
       gradinet_linear.png

  2. radial

     
     gradient_raidal.png

     注： 当渐变类型为 radial，必须配合 android:gradientRadius 才会生效。

  3. sweep gradient_sweep.png

• padding

  padding 表示 View 内部的距离，等价于 View 的 android:paddingXXX属性。

  • 属性

    <padding
        android:top 距离顶部
        android:bottom 距离底部
        android:left 距离左侧
        android:right 距离右侧/>
    

  • 示例

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
        <!-- 间隔 -->
        <padding
            android:bottom="100dp"
            android:left="40dp"
            android:right="8dp"
            android:top="50dp"/>
        <!-- 填充色 -->
       <solid android:color="@color/blue"/>
    </shape>
    

shape_padding.png

• size

  size 表示 shape 的宽高

  • 属性

    <size
        android:width 
        android:height/>
    

  • 示例

    1. 定义 shape 资源

        <?xml version="1.0" encoding="utf-8"?>
       <shapexmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
            <!-- 填充色 -->
            <solid android:color="@color/yellow"/>
           <!-- 大小 -->
           <size
               android:width="100dp"
               android:height="20dp"/>
        </shape>
       

    2. 布局引用

        <?xml version="1.0" encoding="utf-8"?>
        <android.support.constraint.ConstraintLayout
        ...>
       
              <Button
               android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:background="@drawable/shape_size"
              android:text="幼儿园"
              android:textColor="@color/red"
              app:layout_constraintBottom_toBottomOf="parent"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toTopOf="parent"/>
       </android.support.constraint.ConstraintLayout>
       

shape_size.png

注： size 指的是 shape 的大小，作为 View 的背景使用，shape　会被拉伸至 View 的大小，接下来看例子。

3. 修改布局中 Button 的宽高为 300 dp

shape_size_300.png

• solid

  表示纯色填充

  • 属性

    <solid android:color 指定 shape 中填充的颜色/>
    

• stroke

  表示 shape 的描边

  • 属性

    <stroke
        android:width  描边的宽度
        android:color  描边的颜色
        android:dashGap 虚线的线段之间的间隔
        android:dashWidth 虚线的线段的宽度/>
    

  • 示例

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
        <!-- 填充色 -->
        <solid android:color="@color/yellow"/>
        <!-- 描边 -->
        <stroke
            android:color="@color/red"
            android:dashWidth="50dp"
            android:dashGap="100dp"
            android:width="2dp"/>
    </shape>
    

shape_stroke.png

注： 如果 android:dashWidth 或 android:dashGap 有一个为 0，虚线效果将不会生效。

以上都是基于 矩形 的 shape 操作，接下来看看其他的 形状

---

1. line

• line 的用来画分割线的，可以画实线和虚线。需要配合 stroke 和 size 使用。

  • 示例

    <?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/red"/>
       <!-- View 的高度 -->
       <size android:height="200dp" />
    </shape>
    

  • 布局引用

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
      ...>
    
          <ImageView
              android:id="@+id/iv_left"
              android:layout_width="0dp"
              android:layout_height="wrap_content"
              android:background="@drawable/shape_line"
              android:layerType="software"
              app:layout_constraintLeft_toLeftOf="parent"
              app:layout_constraintRight_toLeftOf="@id/iv_right"
              app:layout_constraintTop_toTopOf="parent"/>
    
          <ImageView
              android:id="@+id/iv_right"
              android:layout_width="0dp"
              android:layout_height="200dp"
              android:background="@color/yellow"
              app:layout_constraintLeft_toRightOf="@id/iv_left"
              app:layout_constraintRight_toRightOf="parent"
              app:layout_constraintTop_toTopOf="parent"/>
      
    </android.support.constraint.ConstraintLayout>
    

shape_line.png

通过对比左右两个 ImaggeView 可以清楚的看到，在 shape 中指定的 size 高度为 200dp，左边的 ImageView 引用这个 shape，显示的高度就是 200dp。

• 画线时，有几点特性需要注意：

  • 只能画水平线，不能画横线

  • 线的高度是通过 stroke 的 android:width 属性指定

  • size 的 android:height 指定的是引用该 shape 的 View 的高度

  • size 的 android:height 必须大于 stroke 的 android:width 才会显示

  • 线在 View 显示的范围内居中显示

  • 线左右两边会留有空白，线越粗，空白越大

  • 引用虚线的 View，必须添加 android:layerType="software" 属性，否则虚线不显示

2. oval

• oval 是用来画椭圆的，一般画正圆比较常用

  • 示例

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
        <!-- 大小 -->
        <size
            android:width="100dp"
            android:height="100dp"/>
        <!-- 填充色 -->
    <solid android:color="@color/red"/>
    </shape>
    

shape_oval.png

3. ring

• 针对 ring 这个形状，有五个特殊的属性

  • 属性

    • android:innerRadius 圆环内半径

    • android:innerRadiusRatio 内半径占整个 Drawable 的比例，默认为 9，和 android:innerRadius 同时存在，会被覆盖

    • android:thickness 圆环的厚度

    • android:thicknessRatio 厚度占整个 Drawable 的比例，默认为 3,和android:thickness 同时存在，会被覆盖

    • android:useLevel 一般为 false ，否则圆环可能无法显示

  • 示例

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:innerRadius="30dp" // 圆环的内半径
        android:shape="ring"
        android:thickness="10dp" // 圆环的厚度
        android:useLevel="false">
            <!-- 填充色 -->
            solid android:color="@color/blue" />
    </shape>
    

  shape_ring.png

参考资料

1. Android 开发艺术探索
2. ANDROID样式的开发:SHAPE篇
   感谢以上作者的辛勤付出。