在开发过程中,咱们可能会常常遇到这样的需要款式:
这张图是截取京东音讯告诉的弹出框,咱们能够看到右上方有个三角形的气泡成果,这只是其中一种,三角形的方向还能够是上、下、左、右。
通过截图能够发现,气泡由正三角形和圆角长方形组成,于是能够通过组合来造成三角形气泡的成果,上面咱们通过三种形式进行实现。
实现形式:
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" />
通过自定义的形式能够搞定四个方向,而且在代码中也能够应用,动静增加,动静扭转色彩,还是比拟好的形式。
到这里就实现啦.