最近項目需求是實現高亮功能引導頁的效果,查了很多資料Android確實沒有類似iOS的摳圖的現成控件,就自己寫一個,具體如下:
Demo
public class HighLightLayout extends FrameLayout { private Paint mPaint; private Path mPath = new Path(); private List<RectRegion> mRegions; public HighLightLayout(@NonNull Context context, @Nullable AttributeSet attrs) { super(context, attrs); mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setColor(0xAA000000); setWillNotDraw(false); } @Override protected void onDraw(Canvas canvas) { mPath.reset(); mPath.addRect(0, 0, getWidth(), getHeight(), Path.Direction.CCW); for (RectRegion region : mRegions) { RectF rectF = region.rectF; if (region instanceof RoundRectRegion) { RoundRectRegion roundRectRegion = (RoundRectRegion) region; mPath.addRoundRect(rectF, roundRectRegion.rx, roundRectRegion.ry, Path.Direction.CW); } else if (region instanceof CircleRegion) { CircleRegion circleRegion = (CircleRegion) region; float cX = (rectF.right + rectF.left) / 2; float cY = (rectF.bottom + rectF.top) / 2; mPath.addCircle(cX, cY, circleRegion.radius, Path.Direction.CW); } else if (region instanceof OvalRegion) { mPath.addOval(rectF, Path.Direction.CW); } else { mPath.addRect(rectF, Path.Direction.CW); } } canvas.drawPath(mPath, mPaint); } public void setRegion(@NonNull RectRegion region) { if (mRegions == null) { mRegions = new ArrayList<>(); } else { mRegions.clear(); } mRegions.add(region); invalidate(); } public void setRegions(@NonNull List<RectRegion> regions) { mRegions = regions; invalidate(); } @Override public void setBackgroundColor(int color) { mPaint.setColor(color); }}HighLightLayout繼承自FrameLayout,重寫了 onDraw 方法來實現高亮區域的繪制; setRegion 設置一個高亮區域, setRegions 設置多個高亮區域;重寫 setBackgroundColor 來實現設置高亮背景色。
Region表示了一個高亮矩形區域,支持4種高亮類型,
RectRegion 矩形高亮區域
public class RectRegion implements Parcelable { public RectF rectF; //... Parcelable實現代碼}RoundRectRegion 圓角矩形高亮區域
public class RoundRectRegion extends RectRegion { public float rx, ry; //... Parcelable實現代碼}CircleRegion 圓形高亮區域
public class CircleRegion extends RectRegion { public float radius; //... Parcelable實現代碼}OvalRegion 橢圓高亮區域
public class OvalRegion extends RectRegion { //... Parcelable實現代碼}使用
創建一個GuideActivity,該Activity根布局是一個HighLightLayout,可以在HighLightLayout中添加任何控件
<wangyi.blog.app.view.HighLightLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/highLightLayout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".GuideActivity"></wangyi.blog.app.view.HighLightLayout>
啟動GuideActivity 并傳遞需要高亮顯示的區域
ArrayList<RectRegion> regions = new ArrayList<>(); //矩形高亮 RectF rectF1 = LocationUtils.getViewLocation(mButton1); RectRegion region1 = new RectRegion(rectF1); regions.add(region1); //圓角矩形高亮 RectF rectF2 = LocationUtils.getViewLocation(mButton2); RoundRectRegion region2 = new RoundRectRegion(rectF2, 10, 10); regions.add(region2); //圓形高亮 RectF rectF3 = LocationUtils.getViewLocation(mButton3); float radius = (rectF3.right - rectF3.left) / 2 + 20; CircleRegion region3 = new CircleRegion(rectF3, radius); regions.add(region3); //橢圓高亮 RectF rectF4 = LocationUtils.getViewLocation(mButton4); LocationUtils.expandRectF(rectF4, 40); OvalRegion region4 = new OvalRegion(rectF4); regions.add(region4); Intent intent = new Intent(this, GuideActivity.class); intent.putExtra(GuideActivity.EXTRA_REGION_LIST, regions); startActivity(intent);
GuideActivity的onCreate中設置高亮區域
ArrayList<RectRegion> regions = getIntent().getParcelableArrayListExtra(EXTRA_REGION_LIST); HighLightLayout highLightLayout = findViewById(R.id.highLightLayout); highLightLayout.setRegions(regions);
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答