java中shape应用,Drawable资源之shape与Java代码

XML中shape资源

shape有6个属性：

corners：设置圆角，即四个角的弧度

gradient：颜色渐变

padding：间隔，xml里经常用到，不比多解释

size：长宽

solid：填充物，只有一个属性 -> 颜色

stroke：设置图片边缘颜色

官方文档描述

xmlns:android="http://schemas.android.com/apk/res/android"

android:shape=["rectangle" | "oval" | "line" | "ring"] >

android:radius="integer"

android:topLeftRadius="integer"

android:topRightRadius="integer"

android:bottomLeftRadius="integer"

android:bottomRightRadius="integer" />

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"] />

android:left="integer"

android:top="integer"

android:right="integer"

android:bottom="integer" />

android:width="integer"

android:height="integer" />

android:color="color" />

android:width="integer"

android:color="color"

android:dashWidth="integer"

android:dashGap="integer" />

一共四中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