Drawable资源之shape与Java代码

XML中shape资源

shape有6个属性：

• corners：设置圆角，即四个角的弧度
• gradient：颜色渐变
• padding：间隔，xml里经常用到，不比多解释
• size：长宽
• solid：填充物，只有一个属性 -> 颜色
• stroke：设置图片边缘颜色

官方文档描述

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

一共四中shape种类：["rectangle" | "oval" | "line" | "ring"]

corners

创建圆角的形状。仅适用于当其形状是一个长方形

android:radius="20dp"  为角的弧度，值越大角越圆。
android:topRightRadius="20dp"  右上角
android:bottomLeftRadius="20dp"   左下角
android:topLeftRadius="1dp"   左上角
android:bottomRightRadius="0dp"   you右下角

gradient

指定一个渐变颜色的形状。

android:startColor  起始颜色
android:endColor  结束颜色
android:centerColor  中心颜色
android:angle  渐变角度，必须为45的整数倍。
android:type  渐变模式默认为linear，即线性渐变，可以指定渐变为径向渐变，android:type="radial"
android:gradientRadius="50"  径向渐变需要指定半径
android:useLevel 值为true或false，至今不知道有什么作用

padding

定义内容离边界的距离

android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp"

size

The size of the shape形状的长宽

android:height="100dp"
android:width="100dp"

solid

A solid color to fill the shape.填充颜色

android:color  指定填充的颜色

stroke

A stroke line for the shape.图形边缘画线

android:width="2dp"  描边的宽度
android:color="#FFFFFF"  描边的颜色
android:dashWidth  虚线中这样一个'-'横线的宽度
android:dashGap  两个'-'之间的距离

Java代码中实现shape效果

RoundRectShape 圆角矩形形状

//{l,l,t,t,r,r,b,b}
//每两个值（即一对数值，我这里将其理解为坐标x,y）代表一个角的弧度，按照一贯的顺序：左上右下
//这个坐标（x,y）就是形成圆弧的圆心或者椭圆的中心点，
float[] outerR = {100, 40, 100, 40, 50, 50, 50, 50};
float[] innerR = {20, 20, 20, 20, 20, 20, 20, 20};
RectF inset = new RectF(100, 80, 60, 40);

//当inset==null时，innerR参数会被忽略
//当inset != null,innerR == null时，innerR默认全部赋值为0处理
RoundRectShape roundRectShape = new RoundRectShape(outerR, inset, innerR);

ShapeDrawable roundRecDr = new ShapeDrawable(roundRectShape);
Paint paint = roundRecDr.getPaint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL);

btnShape.setBackgroundDrawable(roundRecDr);

• outerR: 外部边界的圆度弧度参数，8个数值来表示。

  每两个值（即一对数值，我这里将其理解为坐标x,y）代表一个角的弧度，按照一贯的顺序：左上右下

  1 2 左上角； 3 4 右上角； 5 6 右下；7 8 左下，如果没弧度的话，传入null即可。

  这个坐标（x,y）就是形成圆弧的圆心或者椭圆的中心点，具体如下图：

  [图片上传失败...(image-c96e80-1576730987177)]

• inset：指定外部矩形4条边 与内部矩形的4条边的个距离，也用RectF的方式指定

  具体表现，可参考下文效果图

• innerR: 用法同第一个参数，代表内部圆角的绘制情况

上述代码效果图：

view_shape_display.png

备注：此处代码效果，丢失按钮默认的阴影效果

GradientDrawable

private void gradientDr() {

        GradientDrawable drawable = new GradientDrawable(GradientDrawable.Orientation.LEFT_RIGHT,
                new int[]{Color.RED, Color.GREEN});
        //call require API 16+ ,设置渐变的方向
//        drawable.setOrientation(GradientDrawable.Orientation.LEFT_RIGHT);
        //设置填充色
//        drawable.setColor(Color.RED);
        // call require API 16+ ,设置渐变的颜色
//        drawable.setColors(new int[]{Color.RED, Color.GREEN});
        //设置渐变规则，包含LINEAR_GRADIENT 线性, RADIAL_GRADIENT 径向渐变, SWEEP_GRADIENT，default is LINEAR_GRADIENT
        drawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);
        //设置渐变的中心，即渐变的开始位置，SWEEP_GRADIENT 或者 RADIAL_GRADIENT时才有效
        drawable.setGradientCenter(0.8f, 0.5f);
        //设置渐变的半径，只有RADIAL_GRADIENT时才有效
        drawable.setGradientRadius(600);
        //call require API 21+ ,设置不同状态下的颜色
//        drawable.setColor(createColorStateList(0xffffffff,0xffffff00,0xff0000ff,0xffff0000));
        //设置抖动
//        drawable.setDither(false);
        //设置圆角
        //drawable.setCornerRadius(40);//每个角的弧度相同
        drawable.setCornerRadii(new float[]{100, 40, 100, 40, 50, 50, 50, 50});//可以分别设置每个角的弧度
        //设置边框 宽度、颜色
        drawable.setStroke(10, Color.BLACK);

        btnGradient.setBackgroundDrawable(drawable);

//        drawable.mutate();
    }

    /**
     * 对TextView设置不同状态时其文字颜色。
     */
    private ColorStateList createColorStateList(int normal, int pressed, int focused, int unable) {
        int[] colors = new int[]{pressed, focused, normal, focused, unable, normal};
        int[][] states = new int[6][];
        states[0] = new int[]{android.R.attr.state_pressed, android.R.attr.state_enabled};
        states[1] = new int[]{android.R.attr.state_enabled, android.R.attr.state_focused};
        states[2] = new int[]{android.R.attr.state_enabled};
        states[3] = new int[]{android.R.attr.state_focused};
        states[4] = new int[]{android.R.attr.state_window_focused};
        states[5] = new int[]{};
        ColorStateList colorList = new ColorStateList(states, colors);
        return colorList;
    }

    /**
     * 设置Selector。
     */
    public static StateListDrawable newSelector(Context context, int idNormal, int idPressed, int idFocused,
                                                int idUnable) {
        StateListDrawable bg = new StateListDrawable();
        Drawable normal = idNormal == -1 ? null : context.getResources().getDrawable(idNormal);
        Drawable pressed = idPressed == -1 ? null : context.getResources().getDrawable(idPressed);
        Drawable focused = idFocused == -1 ? null : context.getResources().getDrawable(idFocused);
        Drawable unable = idUnable == -1 ? null : context.getResources().getDrawable(idUnable);
        // View.PRESSED_ENABLED_STATE_SET
        bg.addState(new int[]{android.R.attr.state_pressed, android.R.attr.state_enabled}, pressed);
        // View.ENABLED_FOCUSED_STATE_SET
        bg.addState(new int[]{android.R.attr.state_enabled, android.R.attr.state_focused}, focused);
        // View.ENABLED_STATE_SET
        bg.addState(new int[]{android.R.attr.state_enabled}, normal);
        // View.FOCUSED_STATE_SET
        bg.addState(new int[]{android.R.attr.state_focused}, focused);
        // View.WINDOW_FOCUSED_STATE_SET
        bg.addState(new int[]{android.R.attr.state_window_focused}, unable);
        // View.EMPTY_STATE_SET
        bg.addState(new int[]{}, normal);
        return bg;
    }

备注：使用GradientDrawable不会使得默认的阴影效果消失

因为API兼容问题，导致GradientDrawable在API 16以下的系统不支持 改变现有对象的渐变颜色。设置不同状态的颜色，更是在21后才支持的，导致GradientDrawable应用范围太小，与XML实现相差甚远

仅可动态改变圆角效果而已。

效果图如下：

• LINEAR_GRADIENT

  Linear_gradient.png

• RADIAL_GRADIENT

  radial_gradient.png

• SWEEP_GRADIENT

  sweep_gradient.png

• setColor(colorStateList)

  btn_gradient_color_state_list.gif