Android自定义Drawable---灵活多变的矩形背景

Android自定义Drawable—灵活多变的矩形背景

在安卓开发中，我们通常需要为不同的按钮设置不同的背景以实现不同的效果，有时还需要这些按钮根据实际情况进行变化。如果采用编写resource中xml文件的形式，就需要重复定义许多只有微小变动的资源文件。这使得整个工程的简洁性和可读性受到影响。本文将介绍一种基于java代码实现的矩形背景自定义工具，该工具是继承Drawable的基础上开发的，它具有如下功能：

1. 自定义矩形的内部填充颜色和边框颜色；
2. 自定义矩形四角的弧度，支持分别定义和整体定义；
3. 自定义矩形的阴影（颜色、宽度及位置）；
4. 自定义矩形的触摸水波纹效果（颜色、显示速度）；
5. 自定义矩形的边框宽度（按比例/按固定宽度），并可与ObjectAnimator配合实现动画效果

综合展示如下：

直接上源码：

public class FlexibleRectDrawable extends Drawable {
    private Paint paint_stroke;
    private Paint paint_fill;
    private Paint paint_ripple;

    private RectF outerRect;
    private RectF innerRect;
    private RectF zeroRect;
    //矩形内部颜色及边框颜色
    private int solidColor;
    private int strokeColor;
    private int solidColorHolder;
    private int strokeColorHolder;
    //边框设置
    private boolean hasStroke;
    private float strokeWidth;
    private float strokeWidthVariable;//可变动的边框宽度，用于生成后调整宽度
    private float strokeInPercent;//0~1 边框与整体大小的占比
    //圆角半径
    private float rectRadius;
    //圆角位置
    private int corners;
    //阴影设置
    private boolean needShadow;
    private float shadowRange;//阴影粗细
    private float shadowDx;//阴影中心x轴偏移
    private float shadowDy;//阴影中心y轴偏移
    private int shadowColor;//阴影颜色
    //阴影位置
    private float offsetLeft;
    private float offsetTop;
    private float offsetRight;
    private float offsetBottom;
    //Ripple Effect
    enum RippleAnimState{STATE_ENTER, STATE_EXIT, STATE_EXIT_LATER}
    private RippleAnimState ripple_anim_state;
    private ObjectAnimator ripple_alpha_animator;
    private ObjectAnimator ripple_radius_animator;
    private PointF currentPoint;
    private PointF pressedPoint;
    private Path ripple_bound_path;
    private boolean needRipple;
    private int rippleSpeed;//ms
    private float maxRippleRadius;
    private float rippleRadius;//属性动画
    private int rippleColor;
    private int maxRippleAlpha;
    private int rippleAlpha;//属性动画

    public static final int SQUARE_CORNER = 0;
    public static final int CORNER_TOP_LEFT = 1;
    public static final int CORNER_TOP_RIGHT = 1 << 1;
    public static final int CORNER_BOTTOM_LEFT = 1 << 2;
    public static final int CORNER_BOTTOM_RIGHT = 1 << 3;
    public static final int CORNER_HALF_LEFT = CORNER_TOP_LEFT | CORNER_BOTTOM_LEFT;
    public static final int CORNER_HALF_RIGHT = CORNER_TOP_RIGHT | CORNER_BOTTOM_RIGHT;
    public static final int CORNER_ALL = CORNER_TOP_LEFT | CORNER_TOP_RIGHT | CORNER_BOTTOM_LEFT | CORNER_BOTTOM_RIGHT;

    public enum RectType{BORDER_ONLY,SOLID_BLOCK,BORDERED_BLOCK,NOT_DEFINED}

    private RectType type;

    public FlexibleRectDrawable() {
        //默认值
        this.type = RectType.NOT_DEFINED;
        this.solidColor = 0;//透明色
        this.strokeColor = 0;//透明色
        this.solidColorHolder = 0;
        this.strokeColorHolder = 0;
        this.hasStroke = false;
        this.strokeWidth = 0;
        this.strokeWidthVariable = 0;
        this.corners = SQUARE_CORNER;
        this.rectRadius = 0;
        this.needShadow = false;
        this.shadowRange = 0;
        this.shadowDx = 0;
        this.shadowDy = 0;
        this.shadowColor = Color.parseColor("#aa000000");
        this.offsetBottom = 0;
        this.offsetLeft = 0;
        this.offsetTop = 0;
        this.offsetRight = 0;

        this.currentPoint = new PointF();
        this.pressedPoint = new PointF();
        this.rippleColor = Color.parseColor("#21000000");
        this.maxRippleAlpha = this.rippleColor>>24 & 0xFF;
        this.ripple_bound_path = new Path();
    }

    public void setupPainters() {
        paint_stroke = new Paint();
        paint_stroke.setAntiAlias(true);
        paint_stroke.setFilterBitmap(true);
        paint_stroke.setDither(true);
        paint_stroke.setStyle(Paint.Style.FILL);
        paint_stroke.setColor(strokeColor);
        //设置阴影
        if(needShadow)
            paint_stroke.setShadowLayer(shadowRange, shadowDx, shadowDy, shadowColor);

        paint_fill = new Paint();
        paint_fill.setAntiAlias(true);
        paint_fill.setFilterBitmap(true);
        paint_fill.setDither(true);
        paint_fill.setStyle(Paint.Style.FILL);
        paint_fill.setColor(solidColor);
        //设置水波纹效果
        paint_ripple = new Paint();
        paint_ripple.setAntiAlias(true);
        paint_ripple.setStyle(Paint.Style.FILL);
        paint_ripple.setColor(rippleColor);

        invalidateSelf();
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);


        if (bounds.right - bounds.left > 0 && bounds.bottom - bounds.top > 0) {

            int width = bounds.right - bounds.left;
            int height = bounds.bottom - bounds.top;

            outerRect = new RectF(offsetLeft, offsetTop, width - offsetRight, height - offsetBottom);
            innerRect = new RectF(offsetLeft + strokeWidth, offsetTop + strokeWidth,
                    width - offsetRight - strokeWidth, height - offsetBottom - strokeWidth);
            zeroRect = new RectF(width/2.0f, height/2.0f, width/2.0f, height/2.0f);
            invalidateSelf();
        }
    }

    @RequiresApi(api = Build.VERSION_CODES.Q)
    @Override
    public void draw(Canvas canvas) {
        float[] Radii = {0,0,0,0,0,0,0,0};

        if ((corners & CORNER_TOP_LEFT) != 0) {
            Radii[0] = rectRadius;
            Radii[1] = rectRadius;
        }
        if ((corners & CORNER_TOP_RIGHT) != 0) {
            Radii[2] = rectRadius;
            Radii[3] = rectRadius;
        }
        if ((corners & CORNER_BOTTOM_RIGHT) != 0) {
            Radii[4] = rectRadius;
            Radii[5] = rectRadius;
        }
        if ((corners & CORNER_BOTTOM_LEFT) != 0) {
            Radii[6] = rectRadius;
            Radii[7] = rectRadius;
        }
        switch(type){
            case BORDER_ONLY:
                canvas.drawDoubleRoundRect(outerRect, Radii, innerRect, Radii, paint_stroke);
                break;
            case SOLID_BLOCK:
                canvas.drawDoubleRoundRect(outerRect,Radii,zeroRect,Radii, paint_fill);
                break;
            case BORDERED_BLOCK:
                canvas.drawDoubleRoundRect(outerRect, Radii, innerRect, Radii, paint_stroke);
                canvas.drawDoubleRoundRect(innerRect,Radii,zeroRect,Radii, paint_fill);
                break;
            case NOT_DEFINED:
                throw new RuntimeException("RectType undefined");
            default:
        }
        //draw ripple
        canvas.save();
        ripple_bound_path.addRoundRect(innerRect,Radii,Path.Direction.CW);
        canvas.clipPath(ripple_bound_path);
        if(ripple_anim_state == STATE_ENTER){
            paint_ripple.setAlpha(rippleAlpha);
            canvas.drawCircle(pressedPoint.x, pressedPoint.y, rippleRadius, paint_ripple);
        }else if(ripple_anim_state == STATE_EXIT){
            paint_ripple.setAlpha(rippleAlpha);
            canvas.drawDoubleRoundRect(innerRect,Radii,zeroRect,Radii, paint_ripple);
        }
        canvas.restore();
    }

    @Override
    protected boolean onStateChange(int[] stateSet) {
        boolean enable = false;
        boolean pressed = false;
        for (int st : stateSet) {
            switch (st) {
                case android.R.attr.state_pressed:
                    pressed = true;
                    break;
                case android.R.attr.state_enabled:
                    enable = true;
                    break;
            }
        }

        if (!enable) return false;
        if (!needRipple)return false;
        if (pressed) {
            startRippleAnimation();
            return true;
        } else if (ripple_anim_state == STATE_ENTER) {
            exitRippleAnimation();
            return true;
        } else {
            return false;
        }
    }

    private void startRippleAnimation() {
        ripple_anim_state = STATE_ENTER;
        pressedPoint.set(currentPoint);
        maxRippleRadius = Math.max(innerRect.width(), innerRect.height());
        if(ripple_radius_animator != null && ripple_radius_animator.isRunning()){
            ripple_radius_animator.cancel();
        }
        ripple_radius_animator = new ObjectAnimator();
        ripple_radius_animator.setTarget(this);
        ripple_radius_animator.setPropertyName("rippleRadius");
        ripple_radius_animator.setInterpolator(new LinearInterpolator());
        ripple_radius_animator.setDuration(rippleSpeed);
        ripple_radius_animator.setFloatValues(0,maxRippleRadius);
        ripple_radius_animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                if(ripple_anim_state == STATE_EXIT_LATER){
                    ripple_anim_state = STATE_EXIT;
                    exitRippleAnimation();
                }
            }
        });
        ripple_radius_animator.start();
    }

    private void exitRippleAnimation() {
        ripple_alpha_animator = new ObjectAnimator();
        ripple_alpha_animator.setTarget(this);
        ripple_alpha_animator.setPropertyName("rippleAlpha");
        ripple_alpha_animator.setInterpolator(new LinearInterpolator());
        ripple_alpha_animator.setDuration(300);
        ripple_alpha_animator.setIntValues(maxRippleAlpha,0);
        ripple_alpha_animator.start();
    }

    @Override
    public boolean isStateful() {
        return true;
    }

    @Override
    public void setHotspot(float x, float y) {
        currentPoint.set(x,y);
    }

    public float getOffsetLeft() {
        return offsetLeft;
    }

    public void setOffsetLeft(float offsetLeft) {
        this.offsetLeft = offsetLeft;
    }

    public float getOffsetTop() {
        return offsetTop;
    }

    public void setOffsetTop(float offsetTop) {
        this.offsetTop = offsetTop;
    }

    public float getOffsetRight() {
        return offsetRight;
    }

    public void setOffsetRight(float offsetRight) {
        this.offsetRight = offsetRight;
    }

    public float getOffsetBottom() {
        return offsetBottom;
    }

    public void setOffsetBottom(float offsetBottom) {
        this.offsetBottom = offsetBottom;
    }

    public float getRectRadius() {
        return rectRadius;
    }

    public void setRectRadius(float rectRadius) {
        this.rectRadius = rectRadius;
    }

    public void setCorners(int corners) {
        this.corners = corners;
    }

    public FlexibleRectDrawable setColor(int color) {
        paint_stroke.setColor(color);
        return this;
    }

    public int getSolidColor() {
        return solidColor;
    }

    public void setSolidColor(int solidColor) {
        this.solidColor = solidColor;
    }

    public int getStrokeColor() {
        return strokeColor;
    }

    public void setStrokeColor(int strokeColor) {
        this.strokeColor = strokeColor;
    }

    public boolean isHasStroke() {
        return hasStroke;
    }

    public void setHasStroke(boolean hasStroke) {
        this.hasStroke = hasStroke;
    }

    public boolean isNeedShadow() {
        return needShadow;
    }

    public void setNeedShadow(boolean needShadow) {
        this.needShadow = needShadow;
    }

    public float getShadowRange() {
        return shadowRange;
    }

    public void setShadowRange(float shadowRange) {
        this.shadowRange = shadowRange;
    }

    public float getShadowDx() {
        return shadowDx;
    }

    public void setShadowDx(float shadowDx) {
        this.shadowDx = shadowDx;
    }

    public float getShadowDy() {
        return shadowDy;
    }

    public void setShadowDy(float shadowDy) {
        this.shadowDy = shadowDy;
    }

    public int getShadowColor() {
        return shadowColor;
    }

    public void setShadowColor(int shadowColor) {
        this.shadowColor = shadowColor;
    }

    float getStrokeWidth() {
        return strokeWidth;
    }

    void setStrokeWidth(float strokeWidth) {
        this.strokeWidth = strokeWidth;
        this.strokeWidthVariable = strokeWidth;
    }

    public float getStrokeWidthVariable() {
        if(type==RectType.SOLID_BLOCK)
            return Math.min((getBounds().width() - offsetRight),(getBounds().height() - offsetBottom));
        return strokeWidthVariable;
    }

    public void setStrokeWidthVariable(float strokeWidthVariable) {
        this.strokeWidthVariable = strokeWidthVariable;
        int width = getBounds().width();
        int height = getBounds().height();
        System.out.println("type= " + type.name() + " stroke = " + strokeWidthVariable+" width = "+width+" height = "+height);
        if((width - offsetRight)<=strokeWidthVariable||
            (height - offsetBottom)<=strokeWidthVariable){
            //边框宽大到可以认为是纯色块
            if(type == RectType.BORDERED_BLOCK && this.solidColor!=0){
                this.solidColorHolder = this.solidColor;
                this.solidColor = this.strokeColor;
            }
            //若内部无色，则用边框颜色作为填充
            if(type == RectType.BORDER_ONLY && this.strokeColor!=0) {
                this.solidColor = this.strokeColor;
            }
            type = RectType.SOLID_BLOCK;
        }
        else{
            if(type==RectType.SOLID_BLOCK){
                this.strokeColor = this.solidColor;
                if(this.solidColorHolder == 0){
                    type = RectType.BORDER_ONLY;//纯色块转变为仅带边框的块
                }
                else {
                    this.solidColor = this.solidColorHolder;
                    type = RectType.BORDERED_BLOCK;
                }
            }
            innerRect.set(offsetLeft + strokeWidthVariable, offsetTop + strokeWidthVariable,
                    width - offsetRight - strokeWidthVariable,
                    height - offsetBottom - strokeWidthVariable);
        }
        setupPainters();//重设画笔，并重绘
    }

    public void setStrokeInPercent(@FloatRange(from= 0.0f,to= 1.0f) float strokeInPercent) {
        if(strokeColor==0)throw new IllegalArgumentException("setStrokeInPercent函数仅适用于带边框的Drawable");
        this.strokeInPercent = strokeInPercent;
        float delta_width = outerRect.width()*strokeInPercent/2;
        float delta_height = outerRect.height()*strokeInPercent/2;
        //System.out.println("delta_height= " + delta_height + " delta_width= " + delta_width);
        innerRect.set(outerRect.left+delta_width, outerRect.top+delta_height,
                outerRect.right-delta_width,outerRect.bottom-delta_height);
        if(this.strokeInPercent>0 && this.strokeInPercent<1){
            //带边框的块
            if(this.solidColor==this.strokeColor && this.solidColorHolder == 0)
                this.type = RectType.BORDER_ONLY;//转变为仅带边框的块
            else{
                if(this.solidColorHolder!=0){
                    this.solidColor = this.solidColorHolder;
                    this.solidColorHolder = 0;
                }
                this.type = RectType.BORDERED_BLOCK;
            }
        }
        else if(this.strokeInPercent == 0){
            //内部填充的纯色块
            this.type = RectType.SOLID_BLOCK;
            if(solidColor == 0)Log.e("FlexibleRectDrawable","Drawable被绘制为透明色");
        }
        else if(this.strokeInPercent == 1){
            //边框填充的纯色块
            this.type = RectType.SOLID_BLOCK;
            if(this.solidColorHolder==0 && this.solidColor!=this.strokeColor){
                this.solidColorHolder = this.solidColor;
                this.solidColor = this.strokeColor;
            }
        }
        setupPainters();
    }

    public float getStrokeInPercent() {
        float inner_width = innerRect.width();
        float outer_width = outerRect.width();
        return (1-inner_width/outer_width);
    }

    public RectType getType() {
        return type;
    }

    public void setType(RectType type) {
        this.type = type;
    }

    public float getRippleRadius() {
        return rippleRadius;
    }

    public void setRippleRadius(float rippleRadius) {
        this.rippleRadius = rippleRadius;
        invalidateSelf();
    }

    public int getRippleColor() {
        return rippleColor;
    }

    public void setRippleColor(int rippleColor) {
        this.rippleColor = rippleColor;
    }

    public int getMaxRippleAlpha() {
        return maxRippleAlpha;
    }

    public void setMaxRippleAlpha(int maxRippleAlpha) {
        this.maxRippleAlpha = maxRippleAlpha;
    }

    public int getRippleAlpha() {
        return rippleAlpha;
    }

    public void setRippleAlpha(int rippleAlpha) {
        this.rippleAlpha = rippleAlpha;
        invalidateSelf();
    }

    public boolean isNeedRipple() {
        return needRipple;
    }

    public void setNeedRipple(boolean needRipple) {
        this.needRipple = needRipple;
    }

    public float getMaxRippleRadius() {
        return maxRippleRadius;
    }

    public void setMaxRippleRadius(float maxRippleRadius) {
        this.maxRippleRadius = maxRippleRadius;
    }

    public int getRippleSpeed() {
        return rippleSpeed;
    }

    public void setRippleSpeed(int rippleSpeed) {
        this.rippleSpeed = rippleSpeed;
    }

    @Override
    public void setAlpha(int i) {

    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545

此外，设置一个Builder让自定义构建变得更容易：

public static class Builder{
        private FlexibleRectDrawable drawable;

        public Builder() {
            this.drawable = new FlexibleRectDrawable();
        }

        public static Builder create(){
            return new Builder();
        }

        public Builder setSolidFill(@ColorInt int color){
            this.drawable.setSolidColor(color);
            switch(this.drawable.getType()){
                case BORDER_ONLY:
                    this.drawable.setType(RectType.BORDERED_BLOCK);
                    break;
                case SOLID_BLOCK:case BORDERED_BLOCK:
                    Log.i("DrawableBuilder","cover solid color");
                    break;
                case NOT_DEFINED:
                    this.drawable.setType(RectType.SOLID_BLOCK);
                    break;
                default:
            }
            return this;
        }

        public Builder setStroke(float width,@ColorInt int color){
            this.drawable.setHasStroke(true);
            this.drawable.setStrokeColor(color);
            this.drawable.setStrokeWidth(width);
            switch(this.drawable.getType()){
                case BORDER_ONLY:case BORDERED_BLOCK:
                    Log.i("DrawableBuilder","cover solid color");
                    break;
                case SOLID_BLOCK:
                    this.drawable.setType(RectType.BORDERED_BLOCK);
                    break;
                case NOT_DEFINED:
                    this.drawable.setType(RectType.BORDER_ONLY);
                    break;
                default:
            }
            return this;
        }

        public Builder setShadow(float shadowRange,@ColorInt int color){
            this.drawable.setNeedShadow(true);
            this.drawable.setShadowRange(shadowRange);
            this.drawable.setShadowColor(color);
            return this;
        }

        public Builder setShadowOffset(float top, float bottom, float left, float right){
            if(!this.drawable.isNeedShadow())throw new IllegalArgumentException("必须先调用setShadow,再设置阴影位置");
            this.drawable.setOffsetTop(top);
            this.drawable.setOffsetBottom(bottom);
            this.drawable.setOffsetLeft(left);
            this.drawable.setOffsetRight(right);
            return this;
        }

        public Builder setShadowOffsetCenter(float offset){
            if(!this.drawable.isNeedShadow())throw new IllegalArgumentException("必须先调用setShadow,再设置阴影位置");
            this.drawable.setOffsetTop(offset);
            this.drawable.setOffsetBottom(offset);
            this.drawable.setOffsetLeft(offset);
            this.drawable.setOffsetRight(offset);
            return this;
        }

        public Builder setCorners(int radius,int corner_type){
            this.drawable.setRectRadius(radius);
            this.drawable.setCorners(corner_type);
            return this;
        }

        public Builder setRipple(int color, int speed_millisecond){
            this.drawable.setNeedRipple(true);
            int check = color >>24;
            if (check==-1)throw new IllegalArgumentException("ripple颜色必须具有透明色");
            this.drawable.setRippleColor(color);
            this.drawable.setMaxRippleAlpha(color>>24 & 0xFF);
            this.drawable.setRippleSpeed(speed_millisecond);
            return this;
        }

        public FlexibleRectDrawable build(){
            this.drawable.setupPainters();
            return this.drawable;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

辅助函数：dp转px

public int dp2Px(float dpValue) {
        final float scale = getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
1
2
3
4

使用方法

1. 一个普通的圆角按钮

FlexibleRectDrawable drawable1 = FlexibleRectDrawable.Builder.create()
                .setStroke(dp2Px(3), Color.parseColor("#4682B4"))
                .setSolidFill(Color.parseColor("#DAA520"))
                .setCorners(dp2Px(50), FlexibleRectDrawable.CORNER_ALL)
                .build();
LinearLayout view1 = findViewById(R.id.frd_view1);
view1.setBackground(drawable1);
1
2
3
4
5
6
7

2. 一个带水波纹效果的按钮

实心/空心：

//实心按钮
FlexibleRectDrawable drawabled1 = FlexibleRectDrawable.Builder.create()
                .setSolidFill(Color.parseColor("#4682B4"))
                .setCorners(dp2Px(50), FlexibleRectDrawable.CORNER_ALL)
                .setRipple(Color.parseColor("#22FFFFFF"),300)
                .build();
//空心按钮
FlexibleRectDrawable drawable2 = FlexibleRectDrawable.Builder.create()
                .setStroke(dp2Px(3), Color.parseColor("#4682B4"))
                .setCorners(dp2Px(50), FlexibleRectDrawable.CORNER_ALL)
                .setRipple(Color.parseColor("#22000000"),300)
                .build();
1
2
3
4
5
6
7
8
9
10
11
12

3. 一个带阴影的按钮

实心/空心：

//空心
FlexibleRectDrawable drawabled2 = FlexibleRectDrawable.Builder.create()
                .setStroke(dp2Px(3),Color.parseColor("#1E90FF"))
                .setCorners(dp2Px(50), FlexibleRectDrawable.CORNER_ALL)
                .setShadow(dp2Px(7), Color.parseColor("#fe00FFFF"))
                .setShadowOffsetCenter(dp2Px(5))
                .build();
//实心
FlexibleRectDrawable drawable2 = FlexibleRectDrawable.Builder.create()
                .setStroke(dp2Px(3), Color.parseColor("#4682B4"))
                .setCorners(dp2Px(50), FlexibleRectDrawable.CORNER_ALL)
                .setSolidFill(Color.parseColor("#FFFFFF"))
                .setShadow(dp2Px(5), Color.parseColor("#FEA9A9A9"))
                .setShadowOffsetCenter(dp2Px(5))
                .build();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4. 两个左右合并的按钮

布局文件(.xml)：

<LinearLayout
            android:id="@+id/frd_view_d3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_margin="10dp"
            android:layout_below="@id/frd_view_d2">
            <Button
                android:id="@+id/frd_btn1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="btn1"/>
            <Button
                android:id="@+id/frd_btn2"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="btn2"
                android:textColor="@color/white"/>
        LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

对应java代码：

FlexibleRectDrawable drawable_btn_left = FlexibleRectDrawable.Builder.create()
                .setStroke(dp2Px(3),Color.parseColor("#1E90FF"))
                .setSolidFill(Color.parseColor("#1E90FF"))
                .setCorners(dp2Px(50), FlexibleRectDrawable.CORNER_HALF_LEFT)
                .setRipple(Color.parseColor("#33000000"),300)
                .build();
FlexibleRectDrawable drawable_btn_right = FlexibleRectDrawable.Builder.create()
                .setStroke(dp2Px(3),Color.parseColor("#1E90FF"))
                .setCorners(dp2Px(50), FlexibleRectDrawable.CORNER_HALF_RIGHT)
                .setRipple(Color.parseColor("#33FFFFFF"),300)
                .build();
Button btn_left = findViewById(R.id.frd_btn1);
btn_left.setBackground(drawable_btn_left);
Button btn_right = findViewById(R.id.frd_btn2);
btn_right.setBackground(drawable_btn_right);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5. 按固定宽度设置矩形边框

改变边框的宽度和颜色

private boolean on_view3 = false;
...

FlexibleRectDrawable drawable3 = FlexibleRectDrawable.Builder.create()
                .setStroke(dp2Px(3), Color.parseColor("#4682B4"))
                .setSolidFill(Color.parseColor("#131313"))
                .setCorners(dp2Px(50), FlexibleRectDrawable.CORNER_ALL)
                .build();

LinearLayout view3 = findViewById(R.id.frd_view3);
view3.setBackground(drawable3);

view3.setOnClickListener(v -> {
            on_view3 = !on_view3;
            if(on_view3){
                drawable3.setStrokeColor(Color.RED);
                drawable3.setStrokeWidthVariable(dp2Px(5));
            }
            else{
                drawable3.setStrokeColor(Color.parseColor("#4682B4"));
                drawable3.setStrokeWidthVariable(dp2Px(3));
            }
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

通过属性动画实现按钮状态切换

private boolean on_view5 = false;
...

FlexibleRectDrawable drawabled5 = FlexibleRectDrawable.Builder.create()
                .setStroke(dp2Px(3),Color.parseColor("#4682B4"))
                .setSolidFill(Color.parseColor("#3CB371"))
                .setCorners(dp2Px(5), FlexibleRectDrawable.CORNER_ALL)
                .build();
LinearLayout viewd5 = findViewById(R.id.frd_view_d5);
viewd5.setBackground(drawabled5);
viewd5.setOnClickListener(v -> {
            on_view5 = !on_view5;
            if(on_view5){
                ObjectAnimator animator = new ObjectAnimator();
                animator.setTarget(drawabled5);
                animator.setPropertyName("strokeWidthVariable");
                animator.setDuration(1000);
                animator.setFloatValues(drawabled5.getStrokeWidthVariable(),dp2Px(300));
                animator.start();
            }
            else {
                ObjectAnimator animator = new ObjectAnimator();
                animator.setTarget(drawabled5);
                animator.setPropertyName("strokeWidthVariable");
                animator.setDuration(1000);
                animator.setFloatValues(drawabled5.getStrokeWidthVariable(),dp2Px(3));
                animator.start();
            }
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

6. 按所占百分比设置矩形边框

private boolean on_view6 = false;
private float origin_percent = 0.0f;
...

FlexibleRectDrawable drawabled6 = FlexibleRectDrawable.Builder.create()
                .setStroke(dp2Px(3),Color.parseColor("#4682B4"))
                .setCorners(dp2Px(5), FlexibleRectDrawable.CORNER_ALL)
                .build();
LinearLayout viewd6 = findViewById(R.id.frd_view_d6);
viewd6.setBackground(drawabled6);
viewd6.setOnClickListener(v -> {
            on_view6 = !on_view6;
            if (on_view6) {
                origin_percent = drawabled6.getStrokeInPercent();
                ObjectAnimator animator = new ObjectAnimator();
                animator.setTarget(drawabled6);
                animator.setPropertyName("strokeInPercent");
                animator.setDuration(500);
                animator.setFloatValues(origin_percent, 1f);
                animator.start();
            }
            else {
                ObjectAnimator animator = new ObjectAnimator();
                animator.setTarget(drawabled6);
                animator.setPropertyName("strokeInPercent");
                animator.setDuration(500);
                animator.setFloatValues(drawabled6.getStrokeInPercent(), origin_percent);
                animator.start();
            }
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30