Android高亮引導控制元件

---

title: Android高亮引導控制元件 categories: [Android] date: 2018-07-10

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種高亮型別，

1. RectRegion 矩形高亮區域

public class RectRegion implements Parcelable {
    public RectF rectF;
    //... Parcelable實現程式碼
}
複製程式碼

1. RoundRectRegion 圓角矩形高亮區域

public class RoundRectRegion extends RectRegion {
    public float rx, ry;
    //... Parcelable實現程式碼
}
複製程式碼

1. CircleRegion 圓形高亮區域

public class CircleRegion extends RectRegion {
    public float radius;
    //... Parcelable實現程式碼
}
複製程式碼

1. OvalRegion 橢圓高亮區域

public class OvalRegion extends RectRegion {
    //... Parcelable實現程式碼
}
複製程式碼

使用

1. 建立一個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>
   複製程式碼

2. 啟動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);
   複製程式碼

3. GuideActivity的onCreate中設定高亮區域

           ArrayList<RectRegion> regions = getIntent().getParcelableArrayListExtra(EXTRA_REGION_LIST);
           HighLightLayout highLightLayout = findViewById(R.id.highLightLayout);
           highLightLayout.setRegions(regions);
   複製程式碼

Github