在开发过程中,咱们可能会常常遇到这样的需要款式:

这张图是截取京东音讯告诉的弹出框,咱们能够看到右上方有个三角形的气泡成果,这只是其中一种,三角形的方向还能够是上、下、左、右。

通过截图能够发现,气泡由正三角形和圆角长方形组成,于是能够通过组合来造成三角形气泡的成果,上面咱们通过三种形式进行实现。

实现形式:

1、通过.9图进行实现;2、通过shape形式实现;3、通过自定义view的形式实现;

实现逻辑:

1、通过.9图进行实现

这种形式就不用说了吧,找你们UI小姐姐切一个.9图,应用即可,不过这种形式的图片须要占肯定体积哦。

2、通过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="15dp"                    android:height="15dp" />                <solid android:color="#ffffff" />            </shape>        </rotate>    </item></layer-list>
  • 倒三角形
<?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="135%"            android:pivotY="15%">            <shape android:shape="rectangle">                <size                    android:width="15dp"                    android:height="15dp" />                <solid android:color="#ffffff" />            </shape>        </rotate>    </item></layer-list>
  • 左三角形
<?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="85%"            android:pivotY="-35%">>            <shape android:shape="rectangle">                <size                    android:width="15dp"                    android:height="15dp" />                <solid android:color="#ffffff" />            </shape>        </rotate>    </item></layer-list>
  • 右三角形
<?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="15%"            android:pivotY="135%">>            <shape android:shape="rectangle">                <size                    android:width="15dp"                    android:height="15dp" />                <solid android:color="#ffffff" />            </shape>        </rotate>    </item></layer-list>

下面就是通过shape形式实现各个方向的代码,这种形式毛病比拟显著,如果要变动不同的角的地位须要再写不同的布局。

3、通过自定义view的形式实现

因为是比较简单这里就不解说每个怎么搞了,能够复制过来间接用

  • 增加自定义属性
<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>
  • 自定义代码文件
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.FFF;    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 = (int) PixelUtil.dp2px(DEFUALT_WIDTH);        }        if (mHeight == 0 || heightMode != MeasureSpec.EXACTLY) {            mHeight = (int) PixelUtil.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);    }}
  • 布局文件增加
<com.sjl.keeplive.triange.TriangleView        android:layout_width="10dp"        android:layout_height="6dp"        app:trv_color="@color/FFF"        app:trv_direction="top" />

通过自定义的形式能够搞定四个方向,而且在代码中也能够应用,动静增加,动静扭转色彩,还是比拟好的形式。

到这里就实现啦.