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

背景

这期需求中，项目需要这样一个情况，就是二级菜单上面有个三角形

乍一看，用个图片就可以解决，一个线性布局、垂直摆下去，所以一开始我是这样尝试的，后来发现美工给我切的图很不合适，不同手机显示效果也不一样，所以后来放弃了。以下是解决方案

使用.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中添加这些

使用，注意替换包名

android:layout_width="10dp"

android:layout_height="6dp"

app:trv_color="@color/CB6"

app:trv_direction="top" />

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

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

android:pivotX="-40%"

android:pivotY="80%">

android:height="16dp" />

不过的话，这种方式缺点也明显，如果要变化不同的角的位置需要再写不同的布局，而自定义view的话一个可以搞定四个方向，而且在代码中也可以使用，动态添加，动态改变颜色！

总结

选择的话，看自己需求了，如果比较懒，而且需求不多，可以直接找美工要.9图，或者写一个shape，如果这个三角形频繁使用，则可以使用自定义view，做好扩展性就好了！