shape绘制形状基础详细解析

Posted 2022-01-07 橘子先生z

android 的样式主要则是通过 shape、selector、layer-list、level-list、style、theme、layer、bitmap 等组合实现
这篇文章主要介绍最基础的形状定义工具shape

1.Android develelopers官方解释
Defines a generic graphical “shape.”

Any Shape can be drawn to a Canvas with its own draw() method, but more graphical control is available if you instead pass it to a ShapeDrawable.

Custom Shape classes must implement clone() and return an instance of the custom Shape class.
翻译：定义通用图形“形状”。
任何形状都可以通过它自己的draw()方法绘制到画布上，但如果你把它传递给一个ShapeDrawable，就可以使用更多的图形控件。
自定义Shape类必须实现clone()并返回自定义Shape类的一个实例。
2.定义与使用shape
2.1定义shape
定义Shape需要在res/drawable/目录下建一个XML资源文件

2.2使用shape

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shape"
        android:src="@drawable/shape"/>

一般通过设置background和src依靠layout布局中控件进行引用，把定义好的Shape设置为背景。因为APP界面中的元素，都是通过控件进行展示的，形状也是一种绘图元素，必须依附于控件。
3.Shape一共支持四种形状

①line : 线形，可以画实线或者虚线

②oval : 椭圆形，可以画正圆或者椭圆

③rectangle : 矩形，默认的形状，可以画出直角矩形、圆角矩形、弧形等

④ring : 环形，可以画环形进度条
4.属性介绍

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/black"/>
    <!-- 矩形的填充色 -->
    <corners android:radius="2dp"/>
    <!-- 矩形的圆角弧度 -->
    <stroke android:width="2dp"/>
    <!--矩形的外边框-->
    <gradient android:angle="90"/>
    <!--设置形状的渐变颜色，可以是线性渐变、辐射渐变、扫描性渐变-->
    <padding android:top="2dp"/>
    <!--设置内容与形状边界的内间距，可分别设置左右上下的距离 -->
    <size android:width="20dp"/>
    <!--形状宽和高 -->
</shape>

(1)solid : 设置形状填充的颜色，只有android:color一个属性 
- android:color 填充的颜色
 
(2)padding: 设置内容与形状边界的内间距，可分别设置左右上下的距离
android:left 左内间距
android:right 右内间距
android:top 上内间距
android:bottom 下内间距
 
(3)gradient: 设置形状的渐变颜色，可以是线性渐变、辐射渐变、扫描性渐变
android:type 渐变的类型
linear 线性渐变，默认的渐变类型
radial 放射渐变，设置该项时，android:gradientRadius也必须设置
sweep 扫描性渐变
android:startColor 渐变开始的颜色
android:endColor 渐变结束的颜色
android:centerColor 渐变中间的颜色
android:angle 渐变的角度，线性渐变时才有效，必须是 45 的倍数，0 表示从左到右，90 表示从下到上
android:angle属性的值决定了颜色渐变的角度(环绕控件中间来扭转响应的度数)
0：从左到右颜色由浅到深变化（下面也是由浅到深变化）

45：从左下角到右上角

90：从下到上颜色

135：从右下角到左上角

180：从右到左

225：从右上角到左下角

270：从下到上

315：从左上角到右下角

360：从左到右

android:centerX 渐变中心的相对X坐标，放射渐变时才有效，在0.0 到 1.0 之间，默认为 0.5，表示在正中间
android:centerY 渐变中心的相对X坐标，放射渐变时才有效，在 0.0到1.0之间，默认为0.5，表示在正中间
android:gradientRadius 渐变的半径，只有渐变类型为 radial 时才使用
android:useLevel 如果为 true，则可在 LevelListDrawable 中使用
 
(4)corners: 设置圆角，只适用于rectangle类型，可分别设置四个角不同半径的圆角，即当<shape>标签中的android:shape=rectangle时有效
android:radius 圆角半径，如果只设置这一个，代表四个方向的圆角都设置为该圆角半径，但可以被每个特定的圆角属性重写
android:topLeftRadius 左上角的半径
android:topRightRadius 右上角的半径
android:bottomLeftRadius 左下角的半径
android:bottomRightRadius 右下角的半径
 
(5)stroke: 设置描边，可描成实线或虚线。
android:color 描边的颜色
android:width 描边的宽度
// 以下两个属性设置虚线 
android:dashWidth 设置虚线时的横线长度，值为0时是实线 
android:dashGap 虚线的间隔

(6)size
android:width 设置shape的宽度
android:height  设置shape的高度

 
//以下为只在ring中可以使用
android:innerRadius 内环的半径

android:innerRadiusRatio 浮点型， 默认值为9。环的内半径表示为环的宽度的比率。 例如,  如果innerRadiusRatio=9，那么内半径等于环的宽度除以9。如果定义了innerRadius，这个值将被忽略。该值会被 android:innerRadius 覆盖。例如，如果android:innerRadiusRatio=5，表示内环半径等于环的宽度除以5。

android:thickness 环的厚度

android:thicknessRatio 
浮点型，默认值为3。环的厚度表示为环的宽度的比率。例如, 如果厚度比=3，那么厚度等于环的宽度除以3。如果定义了thickness，这个值将被忽略。该值会被 android:thickness覆盖

android:useLevel 一般为 false，否则可能环形无法显示，只有作为LevelListDrawable 使用时才设为 true

stroke属性解释：见下图

5.工作常用形状
5.1 圆角shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/black"/>
    <corners android:radius="15dp"/>
</shape>

这是最简单的也是最常用的

5.2 画下划线虚线

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

    <size android:height="1dp"/>
    <stroke
        android:dashGap="3dp"
        android:dashWidth="5dp"
        android:width="1dp"
        android:color="@color/black" />
</shape>

引用

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="2dp"
        android:background="@drawable/shape"/>

注意：设置的 view 的高度必须比 shape 虚线的高度高。不然不会显示，需要将 view 中的 layout_height 设置的比 shape中( size的height) 虚线的高度大就可以了。为了这问题也困惑了很久，我感觉这可能和View的绘制有关，如果 view 的高度比 shape 虚线小，也并不符合现实。也希望看到这篇文章的对这个问题有自己见解的大佬可以在评论区留下你的理解。

但其实意识到刚才高度的问题，但运行到真机时，在真机上依然不是虚线，而显示的是一条实线。通过查找原因，发现原因在于 Android 3.0 之后，系统默认关闭了硬件加速功能。所以你可以在代码中使用以下方法。

view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
在xml中添加一句代码android:layerType=“software”

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="2dp"
        android:background="@drawable/shape"
        android:layerType="software"/>

5.3 圆环

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="100dp"
    android:shape="ring"
    android:thickness="50dp"
    android:useLevel="false">
    <gradient
        android:centerColor="@color/cardview_light_background"
        android:centerY="0.4"
        android:endColor="@color/design_default_color_surface"
        android:startColor="@color/black" />
</shape>