带三角形的圆角布局，类似于对话框

这段时间做一个app，ui小姐姐出的图有一个带尖尖的图形，大概长下面这个样子

​ 其实第一次遇到的时候是直接找ui要的图片，后来发现不止一个，于是想到干脆自己写一个得了，于是就有了这个东西，效果就是这张图的样子。

​ 首先我们要进行分析，这个是怎么做到的：

第一步：可以将这个图形分解为两个部分，三角形和下面的圆角矩形，自然也可以得到需要设置圆角、三角形的宽高、还有颜色，还有一个三角形的位置。画出来的话，三角形用path的line来画，圆角矩形直接是drawRoundRect，只要位置参数调好，其实已经出来了。

第二步：需要解决一些bug，当三角形给定一个background时会出现以下情况

解决方式很简单不设置bacground，或者setBackgroundResource(R.color.transparent);
还有另外一个问题：内部四个TextView高度是相等的，但是上面这张图明显第一个高度少了，这是因为画三角形占据了一定高度。解决方式很简单，自然是补齐三角形的高度了：setPadding(0, triangleHeight, 0, 0);这样就得到了最开始的样子。以下是代码：

``

package com.example.myapplication.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.widget.LinearLayout;

import androidx.annotation.Nullable;

import com.example.myapplication.R;
import com.example.myapplication.utils.OftenUtils;

public class TriangleLinearLayout extends LinearLayout {
    public TriangleLinearLayout(Context context) {
        this(context, null);
    }

    public TriangleLinearLayout(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TriangleLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);

    }

    Paint paint1;//画类容
    Paint paint2;//画三角形
    Path path;

    private int triangleWidth, triangleHeight;//三角形的宽高
    private int contentColor, triangleColor;
    private int contentCorners;//圆角
    private int trianglePosition;//三角形所处位置
    private int distance;//跟着三角形位置来的

    private boolean isFirst = false;//只加载一次避免多次重复加载

    private void init(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TriangleLinearLayout);

        triangleWidth = ta.getInteger(R.styleable.TriangleLinearLayout_triangle_width, 8);
        triangleHeight = ta.getInteger(R.styleable.TriangleLinearLayout_triangle_height, 8);
        triangleColor = ta.getColor(R.styleable.TriangleLinearLayout_triangle_color, 0);
        trianglePosition = ta.getInteger(R.styleable.TriangleLinearLayout_triangle_position, 1);
        distance = ta.getInteger(R.styleable.TriangleLinearLayout_distance, 0);


        contentColor = ta.getColor(R.styleable.TriangleLinearLayout_content_color, 0);
        contentCorners = ta.getInteger(R.styleable.TriangleLinearLayout_content_corners, 0);

        ta.recycle();

        triangleWidth = (int) OftenUtils.dpToPx(context, triangleWidth);
        triangleHeight = (int) OftenUtils.dpToPx(context, triangleHeight);
        contentCorners = (int) OftenUtils.dpToPx(context, contentCorners);
        distance = (int) OftenUtils.dpToPx(context, distance);
        if (triangleColor == 0) {
            triangleColor = contentColor;
        }
        if (contentColor == 0) {
            contentColor = triangleColor;
        }
        setPadding(0, triangleHeight, 0, 0);
        setWillNotDraw(false);
        setBackgroundResource(R.color.transparent);
    }
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (!isFirst) {
            init2();
            isFirst = true;
        }
    }

    private void init2() {
        paint1 = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        paint1.setColor(contentColor);
        paint1.setStyle(Paint.Style.FILL);

        paint2 = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        paint2.setColor(triangleColor);
        paint2.setStyle(Paint.Style.FILL);

        path = new Path();
        switch (trianglePosition) {
            case 1:
                editX(true);
                break;
            case 2:
                editX(false);
                break;
        }
    }

    //    在x轴上变化
    private void editX(boolean plus) {
        if (plus) {
            path.moveTo(distance, triangleHeight);
            path.lineTo(distance + triangleWidth / 2, 0);
            path.lineTo(distance + triangleWidth, triangleHeight);
            path.close();
        } else {
            path.moveTo(getWidth() - distance, triangleHeight);
            path.lineTo(getWidth() - distance - triangleWidth / 2, 0);
            path.lineTo(getWidth() - distance - triangleWidth, triangleHeight);
            path.close();
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(path, paint2);
        canvas.drawRoundRect(0, triangleHeight, getWidth(), getHeight(), contentCorners, contentCorners, paint2);
    }
}

attrs.xml中

``

<declare-styleable name="TriangleLinearLayout">
    <attr name="triangle_width" format="integer" />
    <attr name="triangle_height" format="integer" />
    <attr name="triangle_color" format="color" />

    <attr name="content_corners" format="integer" />
    <attr name="content_color" format="integer" />

    <attr name="triangle_position" format="flags">
        <flag name="top_left" value="1" />
        <flag name="top_right" value="2" />
    </attr>
    <!--        跟着位置来的-->
    <attr name="distance" format="integer" />
</declare-styleable>

使用：

``

            <com.example.myapplication.view.TriangleLinearLayout
                android:layout_marginBottom="@dimen/_40dp"
                android:layout_width="@dimen/_100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginStart="@dimen/_16dp"
                android:layout_marginTop="@dimen/_20dp"
                android:layout_marginEnd="@dimen/_16dp"
                android:background="@color/blue"
                android:orientation="vertical"
                app:content_color="@color/yellow_dark"
                app:content_corners="4"
                app:distance="16"
                app:triangle_height="8"
                app:triangle_position="top_right"
                app:triangle_width="11">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:paddingTop="@dimen/_10dp"
                    android:paddingBottom="@dimen/_10dp"
                    android:text="第一行类容"
                    android:textColor="@color/white"
                    android:textSize="@dimen/textSize_16sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:paddingTop="@dimen/_10dp"
                    android:paddingBottom="@dimen/_10dp"
                    android:text="第二行类容"
                    android:textColor="@color/white"
                    android:textSize="@dimen/textSize_16sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:paddingTop="@dimen/_10dp"
                    android:paddingBottom="@dimen/_10dp"
                    android:text="第三行类容"
                    android:textColor="@color/white"
                    android:textSize="@dimen/textSize_16sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:paddingTop="@dimen/_10dp"
                    android:paddingBottom="@dimen/_10dp"
                    android:text="第四行类容"
                    android:textColor="@color/white"
                    android:textSize="@dimen/textSize_16sp" />
            </com.example.myapplication.view.TriangleLinearLayout>

可以直接使用，要改变布局，就改变继承就可以了