android - एंड्रॉइड: एक बटन या छवि बटन पर पाठ और छवि का संयोजन




image text (10)

मैं एक बटन पर एक छवि (पृष्ठभूमि के रूप में) रखने की कोशिश कर रहा हूं और गतिशील रूप से जोड़ता हूं, रन-टाइम के दौरान क्या हो रहा है, छवि के ऊपर / ऊपर कुछ पाठ।

अगर मैं ImageButton उपयोग करता हूं तो मुझे टेक्स्ट जोड़ने की भी संभावना नहीं है। यदि मैं Button उपयोग करता हूं तो मैं टेक्स्ट जोड़ सकता हूं लेकिन केवल android:drawableBottom साथ एक छवि को परिभाषित करता हूं android:drawableBottom और इसी तरह के XML विशेषताओं को here परिभाषित किया गया here

हालांकि ये गुण केवल x- और y-आयामों में टेक्स्ट और छवि को जोड़ते हैं, जिसका अर्थ है कि मैं अपने पाठ के चारों ओर एक छवि खींच सकता हूं, लेकिन मेरे पाठ के नीचे / नीचे नहीं (जेड-अक्ष को डिस्प्ले से बाहर आने के रूप में परिभाषित किया गया है)।

इस संबंध में कोई सुझाव कि इसे कैसे किया जा सकता है? एक विचार या तो Button या छवि Button विस्तार करना होगा और draw() -method को ओवरराइड करना होगा। लेकिन मेरे वर्तमान ज्ञान के स्तर के साथ मुझे वास्तव में यह नहीं पता कि यह कैसे करना है (2 डी प्रतिपादन)। हो सकता है कि अधिक अनुभव वाला कोई व्यक्ति समाधान या कम से कम कुछ पॉइंटर्स को शुरू करे?


आप Button की पृष्ठभूमि सेट करने के लिए Button पर setBackground() को कॉल कर सकते हैं।

पृष्ठभूमि के ऊपर कोई भी पाठ दिखाई देगा।

यदि आप एक्सएमएल में कुछ इसी तरह की तलाश में हैं तो: android:background विशेषता जो एक ही तरीके से काम करती है।


आप इसका उपयोग कर सकते हैं:

  <Button
                    android:id="@+id/reset_all"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Reset all"
                    android:textColor="#ffffff" />

                <Button
                    android:id="@+id/undo"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:layout_weight="1"
                    android:background="@drawable/btn_med"
                    android:text="Undo"
                    android:textColor="#ffffff" />

उसमें मैंने एक छवि background रूप में रखी है और पाठ भी जोड़ा है ..!


इस समस्या के लिए एक बेहतर समाधान है।

बस एक सामान्य Button और drawableLeft और gravity विशेषताओं का उपयोग करें।

<Button
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:drawableLeft="@drawable/my_btn_icon"
  android:gravity="left|center_vertical" />

इस तरह आपको एक बटन मिलता है जो बटन के बाईं ओर एक आइकन प्रदर्शित करता है और आइकन लंबवत केंद्र की दाईं ओर स्थित टेक्स्ट प्रदर्शित करता है।


बस एक लीनियरलाउट का उपयोग करें और दिखाएं कि यह एक Button - सेटिंग background और क्लिक करने योग्य कुंजी है:

<LinearLayout
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:drawable/btn_default"
    android:clickable="true"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="5dp"
        android:src="@drawable/image" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_margin="5dp"
        android:text="Do stuff" />
</LinearLayout>

मैंने यहां बताए गए लोगों से एक अलग दृष्टिकोण लिया, और यह वास्तव में अच्छी तरह से काम कर रहा है, इसलिए मैं इसे साझा करना चाहता था।

मैं बाईं ओर छवि के साथ एक कस्टम बटन बनाने के लिए एक स्टाइल का उपयोग कर रहा हूं और केंद्र-दाएं पाठ पर पाठ। बस नीचे दिए गए 4 "आसान चरणों" का पालन करें:

I. कम से कम 3 अलग-अलग पीएनजी फ़ाइलों और आपके पास मौजूद टूल का उपयोग करके अपने 9 पैच बनाएं: /YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch। इसके बाद आपके पास होना चाहिए:

बटन_normal.9.png, button_focused.9.png और button_pressed.9.png

फिर 24x24 पीएनजी आइकन डाउनलोड या बनाएं।

ic_your_icon.png

अपने एंड्रॉइड प्रोजेक्ट पर ड्रायबल / फ़ोल्डर में सभी को सहेजें।

द्वितीय। खींचने योग्य / फ़ोल्डर के तहत अपनी परियोजना में बटन_selector.xml नामक एक एक्सएमएल फ़ाइल बनाएं। राज्य इस तरह होना चाहिए:

<item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
<item android:state_focused="true" android:drawable="@drawable/button_focused" />
<item android:drawable="@drawable/button_normal" />

तृतीय। मानों / फ़ोल्डर पर जाएं और शैलियों.एक्सएमएल फ़ाइल खोलें या बनाएं और निम्न एक्सएमएल कोड बनाएं:

<style name="ButtonNormalText" parent="@android:style/Widget.Button">
    <item name="android:textColor" >@color/black</item>
    <item name="android:textSize" >12dip</item>
    <item name="android:textStyle" >bold</item>
    <item name="android:height" >44dip</item>
    <item name="android:background" >@drawable/button_selector</item>
    <item name="android:focusable" >true</item>
    <item name="android:clickable" >true</item>
</style>

<style name="ButtonNormalTextWithIcon" parent="ButtonNormalText">
    <item name="android:drawableLeft" >@drawable/ic_your_icon</item>
</style>

ButtonNormalTextWithIcon एक "बाल शैली" है क्योंकि यह बटन नॉर्मलटेक्स्ट ("मूल शैली") को विस्तारित कर रहा है।

ध्यान दें कि ButterNormalTextWithIcon शैली में DrawableLeft को बदलने के लिए, drawableRight, drawableTop या drawableBottom आप टेक्स्ट के संबंध में आइकन को अन्य स्थिति में रख सकते हैं।

चतुर्थ। उस लेआउट / फ़ोल्डर पर जाएं जहां आपके पास यूआई के लिए आपका एक्सएमएल है और उस बटन पर जाएं जहां आप शैली को लागू करना चाहते हैं और इसे इस तरह दिखाना चाहते हैं:

<Button android:id="@+id/buttonSubmit" 
android:text="@string/button_submit" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content" 
style="@style/ButtonNormalTextWithIcon" ></Button>

और ... voilà! आपको बाईं ओर एक छवि के साथ अपना बटन मिला।

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

आप अपनी ऐप के लिए थीम भी बना सकते हैं और इसमें "पैरेंट स्टाइल" जोड़ सकते हैं, इसलिए सभी बटन समान दिखते हैं, और आइकन के साथ "बाल शैली" को केवल उसी जगह पर लागू करें जहां आपको इसकी आवश्यकता है।


यह कोड मेरे लिए पूरी तरह से काम करता है

<LinearLayout
    android:id="@+id/choosePhotosView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:clickable="true"
    android:background="@drawable/transparent_button_bg_rev_selector">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/choose_photo"/>

     <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:text="@string/choose_photos_tv"/>

</LinearLayout>

     <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:background="@drawable/home_button"
            android:drawableLeft="@android:drawable/ic_menu_edit"
            android:drawablePadding="6dp"
            android:gravity="left|center"
            android:height="60dp"
            android:padding="6dp"
            android:text="AndroidDhina"
            android:textColor="#000"
            android:textStyle="bold" />

उन उपयोगकर्ताओं के लिए जो पृष्ठभूमि, आइकन-छवि और टेक्स्ट को अलग-अलग फ़ाइलों से एक Button में रखना चाहते हैं : Button पृष्ठभूमि, ड्रॉइंग टोप / नीचे / रिगथ / बाएं और पैडिंग विशेषताओं पर सेट करें।

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/home_btn_test"
        android:drawableTop="@drawable/home_icon_test"
        android:textColor="#FFFFFF"
        android:id="@+id/ButtonTest"
        android:paddingTop="32sp"
        android:drawablePadding="-15sp"
        android:text="this is text"></Button>

अधिक परिष्कृत व्यवस्था के लिए आप RelativeLayout उपयोग भी कर सकते हैं और इसे क्लिक करने योग्य बना सकते हैं।

ट्यूटोरियल: ग्रेट ट्यूटोरियल जो दोनों मामलों को कवर करता है: http://izvornikod.com/Blog/tabid/82/EntryId/8/Creating-Android-button-with-image-and-text-using-relative-layout.aspx


 <Button android:id="@+id/imeageTextBtn" 
        android:layout_width="240dip"
        android:layout_height="wrap_content"
        android:text="Side Icon With Text Button"
        android:textSize="20sp"
        android:drawableLeft="@drawable/left_side_icon"         
        />   





button