安卓斜切背景，不再靠美工！

 

一天在网上看到这个布局背景一下子就喜欢上了这个简约的布局，就想看看能不能用代码解决

 

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 Ralph Cai on 2018/5/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();
    }
}

 

这段文章是看了另一位大神的博客，做了一些细微的改动（改了几个等号，哈哈哈。。。）

点击打开链接        这里把大神链接贴上

 

 

然后我写的编码以及一些布局

import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    View view1, view2, view3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        view1 = findViewById(R.id.view_1);
        view1.setBackground(drawable_1);
        view2 = findViewById(R.id.view_2);
        view2.setBackground(drawable_2);
        view3 = findViewById(R.id.view_3);
        view3.setBackground(drawable_3);
    }

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

    BackgroundDrawable drawable_2 = BackgroundDrawable.builder()
            .left(100)
            .right(0)
            .topColor(Color.parseColor("#FFE66158"))
            .bottomColor(Color.parseColor("#FFF9BE71"))
            .build();

    BackgroundDrawable drawable_3 = BackgroundDrawable.builder()
            .left(100)
            .right(0)
            .topColor(Color.parseColor("#FFF9BE71"))
            .bottomColor(Color.parseColor("#FF8CB0C6"))
            .build();
}

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.ralphcai.myapplication123.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <View
            android:id="@+id/view_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <View
        android:id="@+id/view_2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <View
            android:id="@+id/view_3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>


</LinearLayout>

 

代码都不难，站在巨人的肩膀上。第一次写博客！！

 

1+1赴美计算机硕士带薪移民项目，欢迎关注“贝尔维尤留学”公众号,大家关注一下