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);

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

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页