text - Android:الجمع بين النص والصورة على زر أو ImageButton




(13)

أحاول الحصول على صورة (كخلفية) على زر وإضافة ديناميكيًا ، اعتمادًا على ما يحدث أثناء وقت التشغيل ، بعض النص فوق / فوق الصورة.

إذا كنت تستخدم ImageButton ليس لدي حتى إمكانية إضافة نص. إذا قمت باستخدام Button يمكنني إضافة نص ولكن فقط تحديد صورة مع android:drawableBottom وسمات XML مشابهة كما تم تعريفها here .

لكن هذه السمات تجمع فقط بين النص والصورة في البعدين x و y ، بمعنى أنه يمكنني رسم صورة حول النص الخاص بي ، ولكن ليس أسفل / تحت النص الخاص بي (مع تحديد المحور z على أنه يخرج من الشاشة).

أي اقتراحات حول كيفية القيام بذلك؟ قد تكون إحدى الأفكار إما تمديد Button أو ImageButton وتجاوز draw() method. ولكن مع مستواي الحالي من المعرفة لا أعرف حقاً كيفية القيام بذلك (العرض ثنائي الأبعاد). ربما شخص ما لديه خبرة أكثر يعرف الحل أو على الأقل بعض المؤشرات لبدء؟


Answers

يمكنك استخدام drawableTop (أيضا drawableLeft ، الخ) للصورة وتعيين النص أسفل الصورة عن طريق إضافة gravity left|center_vertical

<Button
            android:id="@+id/btn_video"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="@null"
            android:drawableTop="@drawable/videos"
            android:gravity="left|center_vertical"
            android:onClick="onClickFragment"
            android:text="Videos"
            android:textColor="@color/white" />


للمستخدمين الذين يريدون فقط وضع "الخلفية" و "رمز الصورة" و "النص" في Button واحد من ملفات مختلفة: تعيين على خلفية Button ، drawableTop / Bottom / Rigth / Left وخصائص padding .

<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


فقط استبدال

android:background="@drawable/icon"

مع

android:background="@android:color/transparent"
android:drawableTop="@drawable/[your background image here]"

خدعة جيدة جدا ..؛)


     <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" />

ما عليك سوى استخدام LinearLayout والتظاهر بأنها background إعداد Button والنقر عليها هو المفتاح:

<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 أدناه:

1- قم بإنشاء 9 تصحيحات باستخدام 3 ملفات PNG مختلفة على الأقل والأداة التي لديك على: /YOUR_OWN_PATH/android-sdk-mac_x86/tools/./draw9patch. بعد هذا يجب أن يكون لديك:

button_normal.9.png ، button_focused.9.png و button_pressed.9.png

ثم قم بتنزيل أو إنشاء رمز PNG 24x24.

ic_your_icon.png

احفظ الكل في drawable / folder على مشروع Android الخاص بك.

II. قم بإنشاء ملف XML يسمى button_selector.xml في مشروعك أسفل المجلد القابل لل drawable /. يجب أن تكون الولايات هكذا:

<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" />

III. انتقل إلى القيم / المجلد وافتح أو أنشئ ملف styles.xml وأنشئ رمز XML التالي:

<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 هو "نمط فرعي" لأنه يتم توسيع ButtonNormalText ("النمط الأصل").

لاحظ أن تغيير drawableLeft في نمط ButtonNormalTextWithIcon ، إلى drawableRight ، drawableTop أو drawableBottom يمكنك وضع الرمز في موضع آخر بالنسبة للنص.

IV. انتقل إلى التنسيق / المجلد حيث لديك XML الخاص بك لواجهة المستخدم وانتقل إلى الزر الذي تريد تطبيق النمط عليه وجعله يبدو كما يلي:

<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à! حصلت على الزر الخاص بك مع صورة في الجانب الأيسر.

بالنسبة لي ، هذه أفضل طريقة للقيام بذلك! نظرًا لفعله بهذه الطريقة ، يمكنك إدارة حجم النص للزر بشكل منفصل عن الرمز الذي تريد عرضه واستخدام نفس الخلفية القابلة للعرض لعدة أزرار برموز مختلفة تحترم إرشادات واجهة المستخدم لنظام Android باستخدام الأنماط.

يمكنك أيضًا إنشاء مظهر لتطبيقك وإضافة "النمط الأصل" إليه بحيث تبدو جميع الأزرار بنفس الشكل ، وتطبيق "نمط الطفل" مع الرمز فقط في المكان الذي تحتاج إليه.


هذا القانون يعمل بالنسبة لي تماما

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

ربما يناسب حلّي الكثير من المستخدمين ، آمل ذلك.

ما أقترح عليه هو جعل TextView مع طريقتك. إنه يعمل لي بشكل مثالي ، وقد حصلت على جميع الميزات ، مثل زر.

أولا وقبل كل شيء يتيح لك نمط زر ، والتي يمكنك استخدامها في كل مكان ... أنا أقوم بإنشاء button_with_hover.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#8dbab3" />
            <gradient android:angle="-90" android:startColor="#48608F" android:endColor="#48608F"  />
        </shape>

        <!--#284682;-->
        <!--border-color: #223b6f;-->
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="#284682" />
            <solid android:color="#284682"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="3dip" />
            <stroke android:width="1dip" android:color="@color/ControlColors" />
            <gradient android:angle="-90" android:startColor="@color/ControlColors" android:endColor="@color/ControlColors" />
        </shape>
    </item>

</selector>

ثانيًا ، يتيح إنشاء زر عرض نص.

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dip"
    android:layout_gravity="right|bottom"
    android:gravity="center"
    android:padding="12dip"
    android:background="@drawable/button_with_hover"
    android:clickable="true"
    android:drawableLeft="@android:drawable/btn_star_big_off"
    android:textColor="#ffffffff"
    android:text="Golden Gate" />

وهذه نتيجة. ثم نمط الزر المخصص الخاص بك مع أي ألوان أو أي خصائص والهوامش الأخرى. حظا طيبا وفقك الله


    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/temp"
        />

 <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
                    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 وأيضا إضافة النص ..!


فيما يلي قائمة متعددة من الأوامر التي يمكن استخدامها للبحث عن الملفات.

grep "text string to search” directory-path

grep [option] "text string to search” directory-path

grep -r "text string to search” directory-path

grep -r -H "text string to search” directory-path

egrep -R "word-1|word-2” directory-path

egrep -w -R "word-1|word-2” directory-path






android image text button