2016-04-21 6 views
6

मैं अपने ऐप में निम्न डिज़ाइन बनाने की कोशिश कर रहा हूं।एंड्रॉइड में एक्सएमएल में 'आयत के अंदर पारदर्शी सर्कल' आकार कैसे बनाया जाए?

डिजाइन Mockup
(https://photos.google.com/share/AF1QipPhCGTgf9zi7MetWJYm0NQ14c3wqzjqnEwxsajCFHEjqzt5R29qYvIjZ2C71q7EnQ?key=WUZKSXA1WVVwSlI2LVdTQy1IRjdUdzVuQlpCY0Rn)

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

मैंने निम्नलिखित दृष्टिकोण की कोशिश की, लेकिन यह काम नहीं किया। 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> 

ऐसा करने के तरीके या कोड वास्तव में मददगार होगा पर कोई संकेत।

+1

दूसरे शब्दों में, आप 'स्क्रीन-वाइड सेमिट्रेंटेंट आयत के केंद्र में एक गोलाकार छेद कटआउट चाहते हैं' –

+0

आप आसानी से इसके लिए एक वेक्टर का उपयोग कर सकते हैं (यह एक और समाधान है, यदि एक्सएमएल अनिवार्य नहीं है) –

+0

आप चाहते हैं प्वाइंट मैप के आसपास त्रिज्या की तरह कुछ करें? https://developers.google.com/android/reference/com/google/android/gms/maps/model/Circle#developer-guide आशा है कि यह सहायक हो! यह http://stackoverflow.com/questions/13991301/android-maps-api-v2-draw-circle –

उत्तर

10

मैं हाल ही में कुछ इसी तरह से खेल रहा हूं, और इसे आपके लिए अनुकूलित कर रहा हूं। सभी जादू 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 पर

+1

अरे @nicolas, उस उत्तर के लिए बहुत बहुत धन्यवाद! .. यह समाधान पूरी तरह से मेरे लिए काम करता है (कोड में कुछ बदलावों के बाद)। क्या मैं सटीक समाधान दिखाने के लिए उत्तर से अपना कोड संपादित कर सकता हूं? – abhiank

+0

क्षमा करें मैं दूर था। लेकिन हां, अपने प्रश्नों को पूरी तरह से मेल करने के लिए आवश्यक संपादन करने के लिए स्वतंत्र महसूस करें! – NSimon

+0

कोई समस्या नहीं ... मैंने कोड संपादित किया। मदद के लिए एक बार फिर से धन्यवाद :) – abhiank

1

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

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

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

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

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

संबंधित मुद्दे