सापेक्ष लयआउट: भाई व्यू समूह के बच्चे को दृश्य संरेखित करें

Question

मैं एक रिलेटिव लयआउट और रेडियो ग्रुप का उपयोग करके एंड्रॉइड में एक टैब बार बनाने की कोशिश कर रहा हूं जिसमें एक संकेतक है जो रेडियोग्रुप के भीतर सक्रिय रेडियोबटन को इंगित करने के लिए स्लाइड करेगा।

ये रेडियो बटन अनुकूलित किए गए हैं जो प्रभावी रूप से पाठ पर एक आइकन के साथ आयताकार होते हैं, सभी सामग्री केंद्रित होती है, जो पृष्ठभूमि के लिए एक कस्टम राज्य चयनकर्ता का उपयोग करती है।

यहाँ मेरे वर्तमान पदानुक्रम है:

<RelativeLayout>  // Main view of the tab bar 
    <RadioGroup>   // The buttons 
    <RadioButton /> 
    <RadioButton /> 
    <RadioButton /> 
    </RadioGroup> 
    <ImageView />  // The indicator 
</RelativeLayout> 

विचार मैं था जब एक रेडियो बटन क्लिक किया गया, मेरे द्वारा चुने गए रेडियो बटन के शीर्ष & नीचे करने के लिए सूचक संरेखित (और यह चेतन) होता था। हालांकि, ऐसा लगता है कि layout_align<Edge> केवल एक अन्य दृश्य समूह के सदस्यों के साथ भाई तत्वों के साथ काम करता है, यानी मैं रेडियो ग्रुप को स्वयं संरेखित कर सकता हूं, लेकिन इसके अंदर रेडियोबटन नहीं।

मैंने संकेतक को रेडियो ग्रुप के सदस्य के रूप में डालने का विचार किया, लेकिन चूंकि रेडियो ग्रुप लीनियरलाउट का विस्तार है, इसलिए इसे दिए गए रेडियोबटन के किनारे पर रखने का कोई तरीका नहीं प्रतीत होता है।

क्या कोई इस बारे में सोच सकता है कि मैं इस मुद्दे को कैसे हल कर सकता हूं? या शायद मेरे एनिमेट-एलाइन-टू-बटन तकनीक से बेहतर समाधान है?

अद्यतन @superjos के साथ मदद, मैं इस काफी अच्छी तरह से बाहर काम करने में कामयाब रहे।

मुझे wrap_content का उपयोग करने के बजाय प्रत्येक बटन को ज्ञात ऊंचाई देना था (आदर्श नहीं, लेकिन इस परियोजना के लिए यह शायद ठीक काम करना चाहिए)। बटन की संकेतक ऊंचाई मिलान करें। सुनिश्चित करें कि रेडियो समूह सामग्री को लपेटने के लिए सेट है और मूल दृश्य में लंबवत केंद्रित है। रेडियोग्रुप को alignTop और toRightOf पर संकेतक सेट करें। फिर, बटन के लिए क्लिक करें श्रोता:

int prevY, newY; 
int prevButtonIndex, newButtonIndex; 

public void moveIndicator(button, indicator, index) { 
    prevY = newY; 
    newY = prevY + (index - prevButtonIndex) * button.getHeight(); 
    TranslateAnimation animation = new TranslateAnimation(0, 0, prevY, newY); 
    animation.setDuration(500); 
    animation.setFillAfter(true); // stay at final animation position 
    indicator.setAnimation(); 
    animation.start(); 
} 

Answer 1

यहां इसके बारे में मेरा विचार है। निम्नलिखित कुछ और विस्तृत कदम हैं।

विचार यह है कि ImageView में एक रेडियो समूह समूह है, क्योंकि यह आपके नमूने में है। ImageView प्रारंभ में रेडियोग्रुप के दाईं ओर स्थित है, और इसकी क्षैतिज मध्य रेखा को पहले (या जो भी चुना गया) रेडियोबटन में से एक के साथ गठबंधन किया गया है।

फिर, रेडियोबटन पर क्लिक करें, एक अनुवाद एनीमेशन को रनटाइम पर बनाया/कॉन्फ़िगर किया गया है ताकि छवि दृश्य दृश्य लंबवत होने दें ताकि उसकी मध्य रेखा क्लिक किए गए बटन में से किसी एक के साथ गठबंधन न हो जाए। एनीमेशन fillAfter के साथ सेट किया गया है ताकि इसे पूर्ण होने के बाद फर्म बने रहें।

कदम:

• अपने संसाधनों बनाएं ताकि imageView और radiobuttons एक ही ऊंचाई है, या किसी और खड़ी paddings साथ काम इतना है कि वे एक ही ऊंचाई होने परिणाम।

• शुरू में, पहले RadioButton को imageView संरेखित करने के लिए कुछ एक्सएमएल सकता है पर्याप्त: imageView में RadioGroup को layout_toRightOf और layout_alignTop देते हैं। रेडियो ग्रुप से शीर्ष-पैडिंग को ध्यान में रखने के लिए, आप इसे प्रारंभिक छवि दृश्य शीर्ष-पैडिंग XML विशेषता में जोड़ सकते हैं। या शीर्ष मार्जिन के रूप में बेहतर है।

• जब एक रेडियोबटन क्लिक किया जाता है, तो एक अनुवाद एनीमेशन बनाएं जिसे छविव्यू पर लागू किया जाएगा, केवल वाई से समन्वय को 0 से अपने गंतव्य तक शुरू करने के लिए बदल जाएगा (जबकि/toX विशेषता 0 होगी)। यही कारण है कि इस तरह के रूप एक सूत्र के द्वारा दिया जाता है:

  toY = (ClickedRadioButton.Index - LastClickedRadioButton.Index) * RadioButton.Heigth 
  

  यहाँ सूचकांक समूह के भीतर RadioButton की क्रमसूचक स्थिति है (उदाहरण के लिए 0 2 तक) (चेतावनी: कि छद्म कोड, जरूरी नहीं कि एक मौजूदा है जावा फ़ील्ड नाम इंडेक्स)।

• एनीमेशन को ImageView पर लागू करें और इसे शुरू करें।

Answer 2

आप चयनित (रेडियो के लिए जाँच की जा सकती है ..) राज्य के लिए एक पृष्ठभूमि के रूप में सूचक छवि का एक 9patched संस्करण शामिल करने के लिए RadioButton शैली को अनुकूलित कर सकते हैं। या ड्रायबल

हालांकि, यह निर्भर करता है कि आप एनीमेशन को किस तरह दिखाना चाहते हैं।

उदाहरण के लिए।

<style name="TabRadioButton" parent="@android:style/Widget.CompoundButton.RadioButton"> 
    <item name="android:background">@drawable/tab_bg</item> 
    <item name="android:drawableLeft">@drawable/tab_indicator</item> 
</style>