एंड्रॉइड में एक्सएमएल में 'आयत के अंदर पारदर्शी सर्कल' आकार कैसे बनाया जाए?

Question

मैं अपने ऐप में निम्न डिज़ाइन बनाने की कोशिश कर रहा हूं।

डिजाइन Mockup

इसका मुख्य यूआई के शीर्ष पर किसी ओवरले। एक्सएमएल में बनाए गए पारदर्शी आकार के रूप में अपनी पृष्ठभूमि के साथ मुख्य यूआई के शीर्ष पर एक लेआउट का उपयोग करके इसे बनाने का प्रयास कर रहा है। हालांकि, कई पदों को पढ़ने के बाद भी, मैं इसे समझने में सक्षम नहीं हूं।

मैंने निम्नलिखित दृष्टिकोण की कोशिश की, लेकिन यह काम नहीं किया। 200 डीपी स्ट्रोक के साथ एक अंगूठी आकार बनाया और इसे एक छविदृश्य के लिए स्रोत के रूप में सेट करें और फिर स्केलटाइप को सेंटरक्रॉप पर सेट करें लेकिन आकार बिटमैप के रूप में स्केल नहीं करता है।

आकार एक्सएमएल:

<?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")); 
    } 
} 

चाल यहाँ एक पथ (पारदर्शी चक्र) बनाने के लिए ताकि हम पथ के ड्राइंग विधि सेट कर सकते हैं "पथ के बाहर" हो रहा है के बजाय "पथ के अंदर" का। अंत में हम बस उस पथ पर कैनवास को क्लिप कर सकते हैं, और काले रंग को भर सकते हैं।

आपके लिए, आपको बस अपने रंग में Color.BLACK बदलने की आवश्यकता होगी, साथ ही इच्छित त्रिज्या को भी बदलना होगा।

संपादित करें: ओह और बस प्रोग्राम के रूप में जोड़ें: FocusView view = new FocusView(context) your_layout.addView(view)

या एक्सएमएल द्वारा:

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

EDIT2: मैं बस आप अपने एप्लिकेशन के ज्ञानप्राप्ति के लिए इस चाहते थे देखा। आप https://github.com/iammert/MaterialIntroView पर

Answer 2

पर विचार करने पर विचार कर सकते हैं आप PorterDuffXferMode और उसके लिए कस्टम दृश्य का उपयोग कर सकते हैं।

इस चित्र को प्रदान की अलग प्रकार का अच्छा उदाहरण है (देखें एक आउट बी): AlphaCompositing

विचार इस पर अपारदर्शी काली आयत और वृत्त के साथ, कस्टम दृश्य बनाने के लिए है। जब आप पोर्टरडफैक्सफ़ॉर्ममोड.आरआरसी_ओयूटी लागू करते हैं, तो यह आयत से सर्कल को मिटा देगा, इसलिए आप जो चाहते हैं उसका परिणाम होगा।

अपने कस्टमव्यू में आपको प्रेषण ड्रॉ (कैनवास कैनवास) विधि ओवरराइड करना चाहिए, और परिणामी बिटमैप को अपने फ्रेम पर खींचना चाहिए।

फिर आप MapLiew और अपने कस्टम व्यू को फ्रेमलेआउट में डाल सकते हैं और परिणाम का आनंद ले सकते हैं।