Android Shape 使用总结

安卓开发宝典文章列表：

• 比ExpandableListView更强大的分组列表实现
• 约束布局实战
• shape使用总结

源码地址（喜欢的话请给颗star）

前言

近年来手机配置是越来越高，我依稀记得我第一台安卓手机只有512内存，但是那时候用着还是那么流畅。然而今天我们的手机动辄就是3G/4G内存，尽管配置变高了，但是应用对手机配置要求也越来越高，现在的应用都是二十几M，甚至一百M。安装包太大的弊端不多赘述，我们今天就来聊聊如何利用shape减少图片资源占比。

shape属性总结

• 填充

  <solid
        android:color="@android:color/white"/><!-- 填充的颜色 -->

• 间隔：设置四个方向上的间隔

  <!-- 间隔 -->
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp"/><!-- 各方向的间隔 -->

• 大小

  <!-- 大小 -->
    <size
        android:width="50dp"
        android:height="50dp"/><!-- 宽度和高度 -->

• 圆角：同时设置五个属性，则Radius属性无效

  android:Radius="20dp"                           <!-- 设置四个角的半径-->
  android:topLeftRadius="20dp"              <!-- 设置左上角的半径 -->
  android:topRightRadius="20dp"           <!-- 设置右上角的半径 -->
  android:bottomLeftRadius="20dp"      <!-- 设置右下角的半径 -->
  android:bottomRightRadius="20dp"    <!-- 设置左下角的半径-->

• 描边：dashWidth和dashGap属性，只要其中一个设置为0dp，则边框为实现边框

  android:width="20dp"                     <!-- 设置边边的宽度 -->
  android:color="@android:color/black"  <!-- 设置边边的颜色 -->
  android:dashWidth="2dp"                      <!-- 设置虚线的宽度 -->
  android:dashGap="20dp"                      <!-- 设置虚线的间隔宽度-->

• 渐变：gradient用以定义渐变色，可以定义两色渐变和三色渐变，及渐变样式。
  

  <gradient  
    android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变   
    android:angle="integer"     //渐变角度，必须为45的倍数，0为从左到右，90为从上到下   
    android:centerX="float"     //渐变中心X的相当位置，范围为0～1   
    android:centerY="float"     //渐变中心Y的相当位置，范围为0～1   
    android:startColor="color"   //渐变开始点的颜色   
    android:centerColor="color"  //渐变中间点的颜色，在开始与结束点之间   
    android:endColor="color"    //渐变结束点的颜色   
    android:gradientRadius="float"  //渐变的半径，只有当渐变类型为radial时才能使用   
    android:useLevel=["true" | "false"] />  //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果

  实例(后续会不断更新)

  
  

  实例
• 圆形背景

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="@dimen/shape_height"
        android:height="@dimen/shape_height" />
    <solid android:color="@color/colorAccent" />
  </shape>

• 圆角矩形

  <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="8dp" />
    <size
        android:width="@dimen/shape_width"
        android:height="@dimen/shape_height" />
    <solid android:color="@color/colorAccent" />
  </shape>

• 圆柱

  <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent" />
    <size
        android:width="@dimen/shape_width"
        android:height="@dimen/shape_height" />
    <corners android:radius="40dp" />
  </shape>

• 环形

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <size
        android:width="@dimen/shape_height"
        android:height="@dimen/shape_height" />
    <stroke
        android:width="10dp"
        android:color="@color/colorAccent" />
  </shape>

• 矩形边框

  <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size
        android:width="@dimen/shape_height"
        android:height="@dimen/shape_height" />
    <stroke
        android:width="10dp"
        android:color="@color/colorAccent" />
  </shape>

• 线性渐变

  <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:endColor="#ff4081"
        android:startColor="#00ff4081"
        android:type="linear" />
  </shape>

• 放射渐变（亲测在5.0设备以下无效果）

  <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:endColor="#ff4081"
        android:startColor="#00ff4081"
        android:type="linear" />
  </shape>

• 渐变（三色）

  <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:startColor="#ff0000"
        android:type="linear" />
  </shape>

• 扫描渐变

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:startColor="#ff0000"
        android:type="sweep" />
  </shape>

• 发光边框

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <stroke
                android:width="4dp"
                android:color="#0C00F9" />
            <corners android:radius="2dp" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape>
            <stroke
                android:width="4dp"
                android:color="#FFF" />
            <corners android:radius="2dp" />
        </shape>
    </item>
    <item
        android:bottom="6dp"
        android:left="6dp"
        android:right="6dp"
        android:top="6dp">
        <shape>
            <stroke
                android:width="3dp"
                android:color="#0C00F9" />
            <corners android:radius="2dp" />
        </shape>
    </item>
  </layer-list>

小结

安卓开发宝典会持续更新，欢迎大家在评论区提出自己想要实现的功能或者界面，我会尽我所能实现并分享出来。谢谢支持！如果觉得对您有帮助，可以打赏的哦！！！