Android你必懂的-Shape篇

关于Shape的使用，简单来说说吧，
shape作为Android程序员你也是一定会用到的一个工具。
用官方的话来说，这是在 XML 中定义的一般形状。指向 GradientDrawable 的资源指针。

Shape可以绘制几种图形：

• 方型：rectangle，这也是默认的形状
• 原型：oval
• 线性：line
• 环：ring，为环的时候还有些针对它才使用的一些属性

我们用到的属性

• solid :用于填充形状的纯色
• corners:为形状产生圆角。仅当形状为矩形时适用
  • android:radius : 所有角都进行圆角处理半径，如果有单独设置某个角，这个属性则会被覆盖
  • android:topLeftRadius ： 左上圆角
  • android:topRightRadius ： 右上圆角
  • android:bottomLeftRadius ： 左下圆角
  • android:bottomRightRadius ： 右下圆角
• padding : 要应用到包含视图元素的内边距(这会填充视图内容的位置如textview那么就是和文字都内编剧距离，而非形状)
  • android:left : 左内边距
  • android:top ： 上内边距
  • android:right ：右内边距
  • android:bottom ：下内边距
• size ： 形状的大小，可以通过这里来设置形状大小，默认根据这里设置的大小来等比缩放至容器大小。在ImageView中可设置android:scaleType 设置为 "center" 来限制缩放。
• stroke ： 描边，就是最外面一层边线，可以是实线也可以是虚线
  • android:width ：线宽
  • android:color ：颜色
  • android:dashWidth ：虚线的间距。仅在设置了 android:dashGap 时有效
  • android:dashGap : 虚线的厚度大小。仅在设置了 android:dashWidth 时有效
• gradient ：形状渐变颜色。
  • android:angle ： 整型。渐变的角度（度）。0 为从左到右，90 为从上到上。必须是 45 的倍数。默认值为 0。
  • android:centerX ： 浮点型。渐变中心的相对 X 轴位置 (0 - 1.0)。
  • android:centerY ： 浮点型。渐变中心的相对 Y 轴位置 (0 - 1.0)。
  • android:centerColor ：颜色。起始颜色与结束颜色之间的可选颜色
  • android:endColor ： 颜色。结束颜色
  • android:gradientRadius ： 浮点型。渐变的半径。仅在 android:type="radial" 时适用。
  • android:startColor ： 颜色。起始颜色
  • android:type ：要应用的渐变图案的类型
    • linear ：线性渐变。这是默认值
    • radial ： 径向渐变。起始颜色为中心颜色。
    • sweep ： 流线型渐变

矩形(rectangle)

image

就像上图一样，我们可以弄出这一类甚至更多(颜色我是用的新建项目自带的，难看，吐槽我比较懒吧- 。-)，我们是通过如下方式弄成的

• 一般矩形：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--定义颜色-->
    <solid android:color="@color/colorAccent" />
</shape>

• 圆角矩形(省去外层代码，与第一段相同)

 <solid android:color="@color/colorAccent" />
    <corners android:radius="5dp" />

• 圆弧矩形(其实把圆角加大就能达到)

<solid android:color="@color/colorAccent" />
    <corners android:radius="10dp" />

• 带padding的矩形(如一开始定义所说，padding是与内容的内边距，看到了吧)

 <solid android:color="@color/colorAccent" />
    <padding android:right="20dp"
        android:top="20dp"/>

• 半圆弧矩形(就是只定义上半部分圆角)

<solid android:color="@color/colorAccent" />
    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />

• 加描边(使用stroke)

 <solid android:color="@color/colorAccent" />
    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />

    <stroke
        android:width="2dp"
        android:color="@color/colorPrimary" />

• 加虚线(stroke开启虚线)

<solid android:color="@color/colorAccent" />

    <stroke
        android:width="2dp"
        android:color="@color/colorPrimary"
        android:dashGap="1dp"
        android:dashWidth="2dp" />

• 颜色渐变(打开gradient)

<solid android:color="@color/colorAccent" />

    <gradient
        android:centerColor="@color/colorAccent"
        android:centerX="0.2"
        android:centerY="0.5"
        android:endColor="@color/colorPrimary"
        android:startColor="@color/colorPrimary" />

圆形(oval)

矩形就是在最外层设置android:shape="oval"

image

• 0 ：默认，只用了一个颜色，也就是默认就包括控件大小
• 1 ： 添加了上和右的padding
• 2 ： size属性宽高相同，当然你的控件也设置了宽高相同，毕竟会根据空间宽高等比缩放嘛，我控件是用的TextView
• 3 ： solid不设置颜色，也就是镂空，然后再一个stroke描边
• 4 ： 同3，不过描边设置为虚线
• 5 ： 加了一个渐变，这里渐变type选择使用radial，所以也需要加一下渐变的半径即gradientRadius

如5：

<size
        android:width="20dp"
        android:height="20dp" />

    <gradient
        android:centerColor="@color/colorAccent"
        android:centerX="0.2"
        android:centerY="0.5"
        android:gradientRadius="10dp"
        android:endColor="@color/colorPrimary"
        android:startColor="@color/colorPrimary"
        android:type="radial" />

线条(line)

线条就是shape设置为line,就和前面说的一样，此形状需要 <stroke> 元素定义线宽，主要是用做分割线。

line主要依靠size和stroke属性来控制。

image

例如第二条线xml:

<size
        android:width="100dp"
        android:height="2dp" />
    <stroke
        android:width="2dp"
        android:color="@color/colorAccent"
        android:dashGap="2dp"
        android:dashWidth="1dp" />

注：1.如果size宽不设置(高不用设置，高度依靠stroke的width控制)，那么view控件宽度为wrap_content的话会不显示哦。因为view宽度就没了，自然也就看不见了

环(ring)

对于环，能看到有一些属性是单独针对它的(设置位置跟shape=ring同级)：

• 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”，否则形状不会显示。

image

1. 第一个就只有size和solid
2. 第二个设置了android:innerRadius="5dp"
   android:thickness="1dp"，看起来小了许多
3. 第三个就只设置了gradient
4. 第四个只设置了stroke
5. 第五个设置了stoke和gradient

如第2个：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    android:innerRadius="5dp"
    android:thickness="1dp">
    <size
        android:width="30dp"
        android:height="30dp" />
    <solid android:color="@color/colorAccent" />
</shape>

注:和oval一样的，如果不设置size，修饰的view需要设置宽高，否则不会显示哦，不过在设置了stroke的时候，可以不用设置size

shape大概就这么多，咱们可以通过shape来给各个控件设置背景，用这几种来选择已经能满足大部分需求。shape还能被其他组合使用比如selector里放到item中，来完成点击/焦点/选中效果切换等