这段时间做一个app,ui小姐姐出的图有一个带尖尖的图形,大概长下面这个样子
![](https://i-blog.csdnimg.cn/blog_migrate/a994fe22e55219ddcb0d49f533a2ab16.png#pic_center)
其实第一次遇到的时候是直接找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>
可以直接使用,要改变布局,就改变继承就可以了