Android 三種方式實現三角形氣泡效果、自定義View、shape、點9圖
阿新 • • 發佈:2019-02-16
背景
這期需求中,專案需要這樣一個情況,就是二級選單上面有個三角形
乍一看,用個圖片就可以解決,一個線性佈局、垂直襬下去,所以一開始我是這樣嘗試的,後來發現美工給我切的圖很不合適,不同手機顯示效果也不一樣,所以後來放棄了。以下是解決方案
使用.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>
不過的話,這種方式缺點也明顯,如果要變化不同的角的位置需要再寫不同的佈局,而自定義view的話一個可以搞定四個方向,而且在程式碼中也可以使用,動態新增,動態改變顏色!
總結
選擇的話,看自己需求了,如果比較懶,而且需求不多,可以直接找美工要.9圖,或者寫一個shape,如果這個三角形頻繁使用,則可以使用自定義view,做好擴充套件性就好了!