على - شرح برنامج android studio للمبتدئين




Android: الجمع بين النص والصورة على زر أو ImageButton (10)

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

ما أقترح عليه هو جعل 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" />

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

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

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

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

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


فقط استبدال

android:background="@drawable/icon"

مع

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

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


ما عليك سوى استخدام 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>

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

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

يمكنك استخدام 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
                    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
            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 ، 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


 <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