Android高亮引導(dǎo)控件的實(shí)現(xiàn)代碼

更新時(shí)間：2018年07月11日 09:08:30 作者：Wang_Yi

這篇文章主要介紹了Android高亮引導(dǎo)控件的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近項(xiàng)目需求是實(shí)現(xiàn)高亮功能引導(dǎo)頁(yè)的效果，查了很多資料Android確實(shí)沒(méi)有類(lèi)似iOS的摳圖的現(xiàn)成控件，就自己寫(xiě)一個(gè)，具體如下：

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，重寫(xiě)了 onDraw 方法來(lái)實(shí)現(xiàn)高亮區(qū)域的繪制； setRegion 設(shè)置一個(gè)高亮區(qū)域， setRegions 設(shè)置多個(gè)高亮區(qū)域；重寫(xiě) setBackgroundColor 來(lái)實(shí)現(xiàn)設(shè)置高亮背景色。

Region表示了一個(gè)高亮矩形區(qū)域，支持4種高亮類(lèi)型，

RectRegion 矩形高亮區(qū)域

public class RectRegion implements Parcelable {
  public RectF rectF;
  //... Parcelable實(shí)現(xiàn)代碼
}

RoundRectRegion 圓角矩形高亮區(qū)域

public class RoundRectRegion extends RectRegion {
  public float rx, ry;
  //... Parcelable實(shí)現(xiàn)代碼
}

CircleRegion 圓形高亮區(qū)域

public class CircleRegion extends RectRegion {
  public float radius;
  //... Parcelable實(shí)現(xiàn)代碼
}

OvalRegion 橢圓高亮區(qū)域

public class OvalRegion extends RectRegion {
  //... Parcelable實(shí)現(xiàn)代碼
}

使用

創(chuàng)建一個(gè)GuideActivity，該Activity根布局是一個(gè)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>

啟動(dòng)GuideActivity 并傳遞需要高亮顯示的區(qū)域

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中設(shè)置高亮區(qū)域

ArrayList<RectRegion> regions = getIntent().getParcelableArrayListExtra(EXTRA_REGION_LIST);
    HighLightLayout highLightLayout = findViewById(R.id.highLightLayout);
    highLightLayout.setRegions(regions);

Github

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: