如何在Android中用XML创建"矩形内部透明圆"形状？

Question

我正在尝试在我的应用中创建以下设计.

设计样机

它是主UI上面的叠加层.尝试使用主UI顶部的布局创建它,其背景为以XML创建的半透明形状.然而,即使阅读了多篇文章,我也无法弄明白.

我尝试了以下方法,但它没有用.创建一个200dp笔划的环形,并将其设置为imageview的源,然后将scaletype设置为centerCrop,但形状不像位图那样缩放.

形状XML:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false" >

    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="200dp"
        android:color="#80000000" />
</shape>

叠加布局:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/onboarding_background"
        android:scaleType="centerCrop"/>

</RelativeLayout>

有关如何执行此操作或代码的任何指示都非常有用.

Answer 1

我最近一直在玩类似的东西,并为你量身定做.所有的魔力都发生在onDraw上:

public class FocusView extends View {
  private Paint mTransparentPaint;
  private Paint mSemiBlackPaint;
  private Path mPath = new Path();

  public FocusView(Context context) {
    super(context);
    initPaints();
  }

  public FocusView(Context context, AttributeSet attrs) {
    super(context, attrs);
    initPaints();
  }

  public FocusView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initPaints();
  }

  private void initPaints() {
    mTransparentPaint = new Paint();
    mTransparentPaint.setColor(Color.TRANSPARENT);
    mTransparentPaint.setStrokeWidth(10);

    mSemiBlackPaint = new Paint();
    mSemiBlackPaint.setColor(Color.TRANSPARENT);
    mSemiBlackPaint.setStrokeWidth(10);
  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    mPath.reset();

    mPath.addCircle(canvas.getWidth() / 2, canvas.getHeight() / 2, 550, Path.Direction.CW);
    mPath.setFillType(Path.FillType.INVERSE_EVEN_ODD);

    canvas.drawCircle(canvas.getWidth() / 2, canvas.getHeight() / 2, 550, mTransparentPaint);

    canvas.drawPath(mPath, mSemiBlackPaint);
    canvas.clipPath(mPath);
    canvas.drawColor(Color.parseColor("#A6000000"));
  }
 }

这里的技巧是创建一个Path(透明圆),以便我们可以将路径的绘制方法设置为"路径之外"而不是"路径内部".最后,我们可以简单地将画布剪切到该路径,并填充黑色.

对您而言,您只需更改Color.BLACK颜色,并更改所需的半径即可.

编辑:哦,只需以编程方式添加它: FocusView view = new FocusView(context) your_layout.addView(view)

或者通过XML:

<package_path_to_.FocusView
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

编辑2:我刚刚看到你想要这个用于你的应用程序的入职.你可能会考虑在看看https://github.com/iammert/MaterialIntroView然后