Android 斜切背景

来来来我们先看一个效果： 别的我们不关注呀，我们就看一下这个布局的背景，这个背景是斜切面的一个背景，如果要你去写这个布局你是不是得去到美工妹妹去作图呀。 现在我们不需要去找美工妹妹了（哎，少了一次接触的机会），我们可以使用自定义ShapeDrawable的方式来实现这个效果。 我做这个东西的启发就是下面的这个开源库： https://github.com/amulyakhare/TextDrawable 这个开源库很简单但也很好用，大家可以看看，学习一下。 我们先来看一下我这个自定义ShapeDrawable的效果吧，省的大家没兴趣看，效果图如下：

大家看到这种效果了吧，这个可不是美工给切的图，这个就是使用ShapeDrawable类来绘制的，这个也很简单，大家看一下代码：

package com.background.zl.backgroundlibrary;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RectShape;
import android.text.Layout;
import android.text.StaticLayout;
import android.text.TextPaint;

/**
 * Created by zhanglei on 2017/6/16.
 */

public class BackgroundDrawable extends ShapeDrawable {

    private int topColor;
    private int bottomColor;
    private int leftPercent;
    private int rightPercent;
    private Paint topPaint;
    private Paint bottomPaint;

    private BackgroundDrawable(Builder builder) {
        super(builder.shape);

        topColor = builder.topColor;
        bottomColor = builder.bottomColor;
        leftPercent = builder.leftPercent;
        rightPercent = builder.rightPercent;

        topPaint = new Paint();
        topPaint.setStyle(Paint.Style.FILL);
        topPaint.setAntiAlias(true);
        topPaint.setColor(topColor);

        bottomPaint = new Paint();
        bottomPaint.setStyle(Paint.Style.FILL);
        bottomPaint.setAntiAlias(true);
        bottomPaint.setColor(bottomColor);

    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        Rect r = getBounds();
        canvas.drawRect(r, topPaint);

        /** 噔噔噔。。。
         *  重头戏来了，下面是绘制斜切背景图的逻辑注意看
         * */

        //背景左侧的bottom值
        int lBottom;
        //背景右侧的bottom值
        int rBottom;
        if (leftPercent > 0 && rightPercent > 0 && leftPercent < 100 && rightPercent < 100) {

            lBottom = (int) (r.bottom * leftPercent * 0.01);
            rBottom = (int) (r.bottom * rightPercent * 0.01);
            //使用path类来绘制不规则图形，形成斜切的效果
            Path path = new Path();
            path.lineTo(r.left, r.top);
            path.lineTo(r.left, lBottom);
            path.lineTo(r.right, rBottom);
            path.lineTo(r.right, r.top);

            //背景下半部分的rect
            Rect bRect = new Rect(r.left, r.top, r.right, r.bottom);

            //开始绘制
            canvas.drawRect(bRect, bottomPaint);
            canvas.drawPath(path, topPaint);


        } else {
            //用户输入的参数有误，我们要给他错误提示
            topPaint.setColor(Color.WHITE);
            canvas.drawRect(r, topPaint);

            TextPaint textPaint = new TextPaint();
            textPaint.setARGB(0xFF, 0xFF, 0, 0);
            textPaint.setColor(Color.BLACK);
            textPaint.setTextSize(40);
            textPaint.setStrokeWidth(5);
            StaticLayout layout = new StaticLayout("大兄弟，你敢不敢把参数给我设置对了呀，不要瞎搞好吗？\n left和right的值是一定要设置的，并且left和right的值要大于0小于100，懂了吧大兄弟。", textPaint, r.right,
                    Layout.Alignment.ALIGN_NORMAL, 1.0F, 0.0F, true);
            canvas.translate(20, r.bottom / 3);//从20，r.bottom / 3开始画
            layout.draw(canvas);
        }

    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

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

    public static class Builder implements IShapeDrawableBuilder {

        private RectShape shape;
        private int topColor;
        private int bottomColor;
        private int leftPercent;
        private int rightPercent;

        private Builder() {
            shape = new RectShape();
            topColor = Color.WHITE;
            bottomColor = Color.WHITE;
            leftPercent = 0;
            rightPercent = 0;
        }

        @Override
        public IShapeDrawableBuilder left(int percent) {
            leftPercent = percent;
            return this;
        }

        @Override
        public IShapeDrawableBuilder right(int percent) {
            rightPercent = percent;
            return this;
        }

        @Override
        public IShapeDrawableBuilder topColor(int topColor) {
            this.topColor = topColor;
            return this;
        }

        @Override
        public IShapeDrawableBuilder bottomColor(int bottomColor) {
            this.bottomColor = bottomColor;
            return this;
        }

        @Override
        public BackgroundDrawable build() {
            return new BackgroundDrawable(this);
        }
    }

    public interface IShapeDrawableBuilder {
        public IShapeDrawableBuilder left(int percent);

        public IShapeDrawableBuilder right(int percent);

        public IShapeDrawableBuilder topColor(int topColor);

        public IShapeDrawableBuilder bottomColor(int bottomColor);

        public BackgroundDrawable build();
    }

}

我们的这个自定义ShapeDrawable叫做BackgroundDrawable，我们使用Builder的方式来创建一个BackgroundDrawable(我也是初学Builder方式有什么不好的地方大家见谅)。

使用方法如下：

 BackgroundDrawable drawable = BackgroundDrawable.builder()
                .left(50)//设置左侧斜切点的高度（取值范围是大于0，小于100）
                .right(70)//设置右侧侧斜切点的高度（取值范围是大于0，小于100）
                .topColor(Color.parseColor("#FCD62D"))//设置上半部分的颜色（默认是白色）
                .bottomColor(Color.parseColor("#76C4EB"))//设置下半部分的颜色（默认是白色）
                .build();//调用build进行创建。

//将这个drawable设置给View
view.setBackground(drawable);

使用方法很简单，有需要的小伙伴快来使用吧，解放美工妹妹从现在开始。