Làm cách nào để tạo hình tròn 'hình tròn bên trong hình chữ nhật trong XML' trong Android?

Question

Tôi đang cố tạo thiết kế sau trong ứng dụng của mình.

Thiết kế Mockup

của lớp phủ trên đầu trang của giao diện người dùng chính. Đang cố gắng tạo điều này bằng cách sử dụng bố cục ở trên cùng của giao diện người dùng chính với nền của nó như là một hình dạng mờ được tạo bằng XML. Tuy nhiên, ngay cả sau khi đọc nhiều bài viết, tôi không thể tìm ra.

Tôi đã thử cách tiếp cận sau, nhưng nó không hoạt động. Đã tạo hình dạng vòng có nét 200dp và đặt nó làm nguồn cho một lần xem hình ảnh và sau đó đặt nguyên mẫu thành centerCrop nhưng hình dạng không tỷ lệ dưới dạng bitmap.

Shape 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> 

Overlay bố trí:

<?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> 

Bất kỳ gợi ý về cách để làm điều này hoặc mã sẽ thực sự hữu ích.

Answer 1

Tôi đã chơi gần đây với một cái gì đó tương tự, và điều chỉnh nó cho bạn. Tất cả sự kỳ diệu đang xảy ra trong 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")); 
    } 
} 

Bí quyết ở đây là để tạo ra một con đường (vòng tròn trong suốt) để chúng tôi có thể thiết lập các phương pháp vẽ của con đường là "bên ngoài của con đường" để thay thế của "bên trong đường dẫn". Cuối cùng, chúng ta có thể chỉ cần cắt canvas vào đường dẫn đó và điền vào màu đen.

Đối với bạn, bạn chỉ cần thay đổi Color.BLACK thành màu của bạn, cũng như thay đổi bán kính mong muốn.

EDIT: Oh và chỉ cần thêm nó lập trình: FocusView view = new FocusView(context) your_layout.addView(view)

Hoặc bởi XML:

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

EDIT2: Tôi chỉ thấy bạn muốn điều này cho nhập môn của ứng dụng của bạn. Bạn có thể xem xét việc xem https://github.com/iammert/MaterialIntroView rồi

Answer 2

Bạn có thể sử dụng PorterDuffXferMode và chế độ xem tùy chỉnh cho điều đó.

Tốt ví dụ về chế độ khác nhau được cung cấp tại ảnh này (xem Một Out B): AlphaCompositing

Ý tưởng là để tạo ra giao diện tùy chỉnh, với hình chữ nhật màu đen đục và khoanh tròn trên nó. Khi bạn áp dụng PorterDuffXferMode.SRC_OUT, nó sẽ "xóa" vòng tròn từ hình chữ nhật, vì vậy bạn wil có kết quả những gì bạn muốn.

Trong chế độ xem tùy chỉnh, bạn nên ghi đè phương thức dispatchDraw (Canvas canvas) và vẽ bitmap kết quả trên khung của bạn.

Sau đó, bạn có thể đặt MapView và chế độ xem tùy chỉnh của mình trong FrameLayout và tận hưởng kết quả.