Android 三种方式实现三角形气泡效果、自定义View、shape、点9图

最新推荐文章于 2026-05-10 16:17:29 发布

原创最新推荐文章于 2026-05-10 16:17:29 发布 · 1w 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#自定义view #三角形气泡

Android 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Android中实现三角形气泡效果的三种方法：使用.9图、自定义View画三角形以及通过shape。通过示例代码和优缺点分析，帮助开发者根据需求选择合适的方法。

背景

这期需求中，项目需要这样一个情况，就是二级菜单上面有个三角形
三角形气泡图
乍一看，用个图片就可以解决，一个线性布局、垂直摆下去，所以一开始我是这样尝试的，后来发现美工给我切的图很不合适，不同手机显示效果也不一样，所以后来放弃了。以下是解决方案

使用.9图

这个就不用说了，继续找美工小姐姐切一个.9图，即可，但因为之前麻烦了她挺多，然后我就不想再麻烦她了，而且这种方式图片也要占一定体积。后来考虑自己自定义一个

自定义View画三角形

由于是比较简单的自定义view就不再讲解每个怎么搞，不会自定义view的可以自己学，也可以复制过去直接用
这是java代码


import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;

import com.qunhe.designer.R;
import com.qunhe.util.ActivityUtil;

/**
 * 画一个三角形
 *
 * @author jianjian
 */
public class TriangleView extends View {
    private static final int TOP = 0;
    private static final int BOTTOM = 1;
    private static final int RIGHT = 2;
    private static final int LEFT = 3;
    private static final int DEFUALT_WIDTH = 10;
    private static final int DEFUALT_HEIGHT = 6;
    private static final int DEFUALT_COLOR = R.color.CB6;
    private Paint mPaint;
    private int mColor;
    private int mWidth;
    private int mHeight;
    private int mDirection;
    private Path mPath;

    public TriangleView(final Context context) {
        this(context, null);
    }

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

    public TriangleView(final Context context, final AttributeSet attrs, final int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.TriangleView, 0, 0);
        mColor = typedArray.getColor(R.styleable.TriangleView_trv_color, ContextCompat.getColor(getContext(), DEFUALT_COLOR));
        mDirection = typedArray.getInt(R.styleable.TriangleView_trv_direction, mDirection);
        typedArray.recycle();
        mPaint.setColor(mColor);
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPath = new Path();
        mDirection = TOP;
    }

     @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
        final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        if (mWidth == 0 || widthMode != MeasureSpec.EXACTLY) {
            mWidth = ActivityUtil.dp2Px(DEFUALT_WIDTH);
        }
        if (mHeight == 0 || heightMode != MeasureSpec.EXACTLY) {
            mHeight = ActivityUtil.dp2Px(DEFUALT_HEIGHT);
        }
        setMeasuredDimension(mWidth, mHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (mDirection) {
            case TOP:
                mPath.moveTo(0, mHeight);
                mPath.lineTo(mWidth, mHeight);
                mPath.lineTo(mWidth / 2, 0);
                break;
            case BOTTOM:
                mPath.moveTo(0, 0);
                mPath.lineTo(mWidth / 2, mHeight);
                mPath.lineTo(mWidth, 0);
                break;
            case RIGHT:
                mPath.moveTo(0, 0);
                mPath.lineTo(0, mHeight);
                mPath.lineTo(mWidth, mHeight / 2);
                break;
            case LEFT:
                mPath.moveTo(0, mHeight / 2);
                mPath.lineTo(mWidth, mHeight);
                mPath.lineTo(mWidth, 0);
                break;
            default:
                break;
        }

        mPath.close();
        canvas.drawPath(mPath, mPaint);
    }
}

styles中添加这些

 <declare-styleable name="TriangleView">
        <attr name="trv_color" format="color" />
        <attr name="trv_direction">
            <enum name="top" value="0" />
            <enum name="bottom" value="1" />
            <enum name="right" value="2" />
            <enum name="left" value="3" />
        </attr>
    </declare-styleable>

使用，注意替换包名

  <com.qunhe.view.TriangleView
        android:layout_width="10dp"
        android:layout_height="6dp"
        app:trv_color="@color/CB6"
        app:trv_direction="top" />

通过 shape 实现三角形气泡效果

功能写好了以后，给mentor review代码的时候，mentor说还可以使用shape，我恍然大悟，突然记起来还有这个神器

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 正三角 -->  
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="-40%"
            android:pivotY="80%">
            <shape android:shape="rectangle">
                <size
                    android:width="16dp"
                    android:height="16dp" />
                <solid android:color="#7d72ff" />
            </shape>
        </rotate>
    </item>
</layer-list>