Android Shape的使用详解

概念

什么是Shape

官方的话来说，这是在 XML 中定义的一般形状。指向 GradientDrawable 的资源指针

Shape可以用来做什么？

1. 快速实现一些基本图形
   • 方型：rectangle，这也是默认的形状
   • 椭圆型/圆：oval
   • 线性：line环：
   • ring，为环的时候还有些针对它才使用的一些属性.
2. 快速实现一些圆角，渐变（线性渐变，径向渐变，扫描渐变），阴影等效果
3. 代替图片设置为View的背景
4. 可以减少apk大小(Drawble比图片文件小)
5. 还可以减少内存占用
6. 方便修改与维护

Shape的一些基础属性

• solid ：填充形状的纯色
  • android:color : 填充颜色
• corners：形状圆角设置，仅当形状为矩形时适用
  • android:radius : 所有角都进行圆角处理半径，如果有单独设置某个角，这个属性则会被覆盖
  • android:topLeftRadius ： 左上圆角
  • android:topRightRadius ： 右上圆角
  • android:bottomLeftRadius ： 左下圆角
  • android:bottomRightRadius ： 右下圆角
• padding ：与包含视图元素的内边距
  • android:left : 左内边距
  • android:top ： 上内边距
  • android:right ：右内边距
  • android:bottom ：下内边距
• size ： 形状的大小，可以通过这里来设置形状大小
  • android:width 宽度
  • android:height 高度
    注意：默认根据这里设置的大小来等比缩放至容器大小。 在ImageView中可设置android:scaleType 设置为 “center” 来限制缩放
• stroke ：描边，就是最外面一层边线，可以是实线也可以是虚线（当父节点shape为line时必须设置该子节点）
  • android:width ：线宽
  • android:color ：颜色
    以下两个属性是把边框线设置成虚线
  • android:dashWidth ：虚线的间距。仅在设置了 android:dashGap 时有效
  • android:dashGap : 虚线的厚度大小。仅在设置了 android:dashWidth 时有效
    注意：不论android:dashWidth和android:dashGap哪个设置成0dp边线都会是实线
• gradient：渲染器
  • android:angle ： 整型。渐变的角度（度）。0 为从左到右，90 为从上到上。必须是 45 的倍数。默认值为 0 ，仅在 android:type="linear " 时适用
  • android:centerX ： 浮点型。渐变中心的相对 X 轴位置 (0 - 1.0)
  • android:centerY ： 浮点型。渐变中心的相对 Y 轴位置 (0 - 1.0)
  • android:centerColor ：颜色。起始颜色与结束颜色之间的可选颜色
  • android:startColor ： 颜色。起始颜色
  • android:endColor ： 颜色。结束颜色
  • android:type ：要应用的渐变图案的类型
    • linear ：线性渐变。这是默认值，通过调整android:angle 实现水平渐变、垂直渐变、对角线渐变
    • radial ： 径向渐变。起始颜色为中心颜色
    • sweep ： 流线型渐变
  • android:gradientRadius ： 浮点型。渐变的半径。仅在 android:type=“radial” 时适用
• 注意事项
  • 针对gradient属性：android:centerX android:centerY在设置为android:type="radial"和android:type="sweep "时适用
  • 对于环Ring，Shape还存在一些特性的属性设置
    • android:innerRadius : 尺寸。环内部（中间的孔）的半径，以尺寸值或尺寸资源表示
    • android:innerRadiusRatio : 浮点型。环内部的半径，以环宽度的比率表示。例如，如果 android:innerRadiusRatio=“5”，则内半径等于环宽度除以 5。此值被 android:innerRadius覆盖。默认值为 9
    • android:thickness : 尺寸。环的厚度，以尺寸值或尺寸资源表示
    • android:thicknessRatio : 浮点型。环的厚度，表示为环宽度的比率。例如，如果 android:thicknessRatio=“2”，则厚度等于环宽度除以 2。此值被 android:innerRadius 覆盖。默认值为 3
    • android:useLevel : 布尔值。如果这用作 LevelListDrawable，则此值为“true”。这通常应为“false”，否则形状不会显示

使用

• Shape标签
  • android：shape 通过该字段可以设置绘制图形的类型，示例中设置为矩形

<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
</shape>

• 绘制线line

  • 绘制实线

    <shape
        android:shape="line"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="2px"
            android:color="#ffff0000"
            ></stroke>
    </shape>
    

  • 绘制虚线

    注意：绘制虚线 不显示或者显示为实线的解决方案
      1、如果不显示---检查view的高度是否大于虚线的高
      2、如果显示为实线---这个涉及系统版本 有以下两种方案   
            a、动态解决方案：通过代码设置view.setLayerType(View.LAYER_TYPE_SOFTWARE, null)
    ​        b、静态解决方案：在AndroidManifest.xml中android:hardwareAccelerated="false" 加到相应的Activity处即可，或者给view设置android:layerType为software
    
    

    <shape
        android:shape="line"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="1px"
            android:color="#ffff0000"
            android:dashGap="10px"
            android:dashWidth="15px"
            ></stroke>
    </shape>
    

  • 显示效果
    

• 绘制矩形

  • 绘制实线无颜色填充矩形–指定大小

    	<!-- 实线边框 -->
    	<shape
    	    android:shape="rectangle"
    	    xmlns:android="http://schemas.android.com/apk/res/android">
    	    <stroke
    	        android:width="2px"
    	        android:color="#ffff0000"
    	        ></stroke>
    	    <size
    	        android:width="800dp"
    	        android:height="30dp"></size>
    	</shape>
    	```
    

  • 绘制虚线无颜色填充矩形

    <!-- 虚线边框 -->
    <shape
        android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="2px"
            android:color="#ffff0000"
            android:dashWidth="10px"
            android:dashGap="5px"
            ></stroke>
    </shape>
    

  • 绘制实线有颜色填充矩形

    <!-- 实线边框+内部填充 -->
    <shape
        android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="2px"
            android:color="#ffff0000"
            ></stroke>
        <solid
            android:color="#ff009fff"></solid>
    </shape>
    

  • 绘制虚线有颜色填充矩形

    <!-- 虚线边框+内部填充 -->
    <shape
        android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="2px"
            android:color="#ffff0000"
            android:dashWidth="10px"
            android:dashGap="5px"
            ></stroke>
        <solid
            android:color="#ff009fff"></solid>
    </shape>
    

  • 绘制圆角实线有颜色填充矩形

    <!-- 实线边框+内部填充+全部圆角 -->
    <shape
        android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="2px"
            android:color="#ffff0000"
            ></stroke>
        <solid
            android:color="#ff009fff"></solid>
        <corners
            android:radius="10dp"></corners>
    </shape>
    

  • 指定上半区圆角矩形

    <!-- 实线边框+内部填充+左上角圆角+右上角圆角 -->
    <shape
        android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="2px"
            android:color="#ffff0000"
            ></stroke>
        <solid
            android:color="#ff009fff"></solid>
        <corners
            android:topLeftRadius="5dp"
            android:topRightRadius="5dp"></corners>
    </shape>
    

  • 左半区圆角无描边有颜色填充矩形

    <!-- 无边框+内部填充+左上角圆角+左下角圆角 -->
    <shape
        android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <solid
            android:color="#ff009fff"
            ></solid>
        <corners
            android:bottomLeftRadius="5dp"
            android:topLeftRadius="5dp"
            ></corners>
    </shape>
    

  • 描边指定左半区圆角矩形–从左至右线性渐变

    <!-- 实线边框+内部填充+左上角圆角+左下角圆角+从左至右线性渐变 -->
    <shape
        android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="2px"
            android:color="#ffff0000"
            ></stroke>
        <solid
            android:color="#ff009fff"
            ></solid>
        <corners
            android:bottomLeftRadius="5dp"
            android:topLeftRadius="5dp"
            ></corners>
        <!--angle="0"是从左至右，angle="180"是从右至左  -->
        <gradient
            android:type="linear"		       
            android:angle="0"
            android:startColor="@color/colorAccent"
            android:endColor="@color/colorPrimary"
            ></gradient>
    </shape>
    

  • 描边指定左半区圆角矩形–从上至下线性渐变

    <!-- 实线边框+内部填充+左上角圆角+左下角圆角+从上至下线性渐变 -->
    <shape
        android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="2px"
            android:color="#ffff0000"
            ></stroke>
        <solid
            android:color="#ff0009fff"
            ></solid>
        <corners
            android:bottomLeftRadius="5dp"
            android:topLeftRadius="5dp"
            ></corners>
         <!--angle="90"是从上至下，angle="270"是从下至上  -->
        <gradient
            android:type="linear"		       
            android:angle="90"
            android:startColor="@color/colorAccent"
            android:endColor="@color/colorPrimary"
            ></gradient>
    </shape>
    

  • 描边指定左半区圆角矩形–对角线线性渐变

    <!-- 实线边框+内部填充+左上角圆角+左下角圆角+对角线渐变 -->
    <shape
        android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="2px"
            android:color="#ffff0000"
            ></stroke>
        <solid
            android:color="#ff009fff"
            ></solid>
        <corners
            android:bottomLeftRadius="5dp"
            android:topLeftRadius="5dp"
            ></corners>
         <!--angle="45"是从左上角至右下角，angle="135"是从右下角至左上角，依次类推45的倍数  -->
        <gradient
            android:type="linear"
            android:angle="45"
            android:startColor="@color/colorAccent"
            android:endColor="@color/colorPrimary"
            ></gradient>
    </shape>
    

  • 描边指定左半区圆角矩形–径向渐变

    <shape
        android:shape="rectangle"
        xmlns:android="http://schemas.android.com/apk/res/android">
        <stroke
            android:width="2px"
            android:color="#ffff0000"
            ></stroke>
        <solid
            android:color="#ff009fff"
            ></solid>
        <corners
            android:bottomLeftRadius="5dp"
            android:topLeftRadius="5dp"
            ></corners>
        <gradient
            android:type="radial"
            android:centerX="0.5"
            android:centerY="0.5"
            android:startColor="@color/colorAccent"
            android:endColor="@color/colorPrimary"
            android:gradientRadius="100dp"
            ></gradient>
    </shape>
    

  • 矩形带中间颜色值–流线型渐

    <shape
          android:shape="rectangle"
          xmlns:android="http://schemas.android.com/apk/res/android">
          <stroke		          android:width="2px"
              android:color="#ffff0000"
              ></stroke>
          <solid
              android:color="#ff009fff"
              ></solid>
          <corners
              android:bottomLeftRadius="5dp"
              android:topLeftRadius="5dp"
              ></corners>
          <gradient
              android:type="sweep"
              android:centerX="0.5"
              android:centerY="0.5"
              android:centerColor="#78D9FF"
              android:startColor="@color/colorAccent"
              android:endColor="@color/colorPrimary"
              ></gradient>
      </shape>
    

    • x

• 绘制圆

    					x	x