Android: การรวมข้อความและรูปภาพบนปุ่มหรือ ImageButton

ฉันพยายามที่จะมีภาพ (เป็นพื้นหลัง) ที่ปุ่มและเพิ่มแบบไดนามิกขึ้นอยู่กับสิ่งที่เกิดขึ้นในช่วงเวลาทำงานข้อความบางข้อความด้านบน / เหนือภาพ

ถ้าฉันใช้ImageButtonฉันไม่มีโอกาสที่จะเพิ่มข้อความ หากฉันใช้Buttonฉันสามารถเพิ่มข้อความกำหนด แต่เพียงภาพที่มีandroid:drawableBottomและแอตทริบิวต์ XML ที่คล้ายกันตามที่กำหนดไว้ที่นี่

อย่างไรก็ตามคุณลักษณะเหล่านี้รวมข้อความและรูปภาพในขนาด x และ y เท่านั้นซึ่งหมายความว่าฉันสามารถวาดภาพที่อยู่รอบข้อความของฉันได้ แต่ไม่ต่ำกว่า / ใต้ข้อความของฉัน (โดยมีแกน z กำหนดว่าออกมาจากหน้าจอ)

ข้อเสนอแนะใด ๆ เกี่ยวกับวิธีการทำเช่นนี้? หนึ่งความคิดที่จะให้ทั้งขยายButtonหรือImageButtonและแทนที่draw()-method แต่ด้วยระดับความรู้ปัจจุบันของฉันฉันไม่รู้วิธีการทำสิ่งนี้จริงๆ (การเรนเดอร์แบบ 2D) อาจเป็นคนที่มีประสบการณ์มากขึ้นรู้วิธีแก้ปัญหาหรืออย่างน้อยก็มีพอยน์เตอร์ให้เริ่ม?

คุณสามารถโทรsetBackground()ในButtonการตั้งค่าพื้นหลังของปุ่ม

ข้อความใด ๆ จะปรากฏขึ้นเหนือพื้นหลัง

หากคุณกำลังมองหาสิ่งที่คล้ายกันใน xml มี: android:backgroundแอตทริบิวต์ซึ่งทำงานในลักษณะเดียวกัน

สำหรับผู้ใช้ที่ต้องการเพียงแค่ใส่พื้นหลังไอคอนภาพและข้อความในหนึ่ง Buttonจากไฟล์ที่แตกต่างกันตั้งอยู่บนButtonพื้นหลัง drawableTop / ล่าง / rigth / ซ้ายและ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และใช้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
            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 และแกล้งทำเป็นว่า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>

เพียงแค่แทนที่

android:background="@drawable/icon"

กับ

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

izz เป็นเคล็ดลับที่ดีงาม .. ;)

ฉันใช้แนวทางที่แตกต่างจากที่ระบุไว้ที่นี่และมันใช้งานได้ดีจริงๆดังนั้นฉันจึงต้องการแบ่งปัน

ฉันใช้สไตล์เพื่อสร้างปุ่มที่กำหนดเองพร้อมรูปภาพทางด้านซ้ายและข้อความที่กึ่งกลางขวา เพียงทำตาม 4 "ขั้นตอนง่าย ๆ " ด้านล่าง:

I. สร้าง 9 แพตช์ของคุณโดยใช้ไฟล์ PNG ที่แตกต่างกันอย่างน้อย 3 ไฟล์และเครื่องมือที่คุณมีอยู่ที่: /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 ของคุณ

ครั้งที่สอง สร้างไฟล์ XML ชื่อ button_selector.xml ในโครงการของคุณภายใต้ drawable / folder รัฐควรเป็นเช่นนี้:

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

สาม. ไปที่ค่า / โฟลเดอร์และเปิดหรือสร้างไฟล์ 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 สำหรับ UI และไปที่ปุ่มที่คุณต้องการใช้สไตล์และทำให้มันเป็นดังนี้:

<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à! คุณมีปุ่มพร้อมภาพทางด้านซ้าย

สำหรับฉันนี่เป็นวิธีที่ดีกว่าที่จะทำ! เพราะทำอย่างนี้คุณสามารถจัดการขนาดตัวอักษรของปุ่มแยกจากไอคอนที่คุณต้องการแสดงและใช้พื้นหลังเดียวกัน drawable สำหรับปุ่มต่าง ๆ ที่มีไอคอนต่าง ๆ ที่เกี่ยวข้องกับแนวทาง UI Android โดยใช้สไตล์

คุณยังสามารถสร้างชุดรูปแบบสำหรับแอพของคุณและเพิ่ม "สไตล์ของผู้ปกครอง" เพื่อให้ปุ่มทั้งหมดมีลักษณะเหมือนกันและใช้ "สไตล์ของเด็ก" กับไอคอนเฉพาะที่คุณต้องการ

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

คุณสามารถใช้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" />

การปรับปรุงที่สำคัญ

อย่าใช้ปกติandroid:drawableLeftฯลฯ ... กับภาพวาดเวกเตอร์อื่นมันจะผิดพลาดในที่ต่ำกว่ารุ่น API (ฉันต้องเผชิญกับมันในแอพถ่ายทอดสด)

สำหรับเวกเตอร์ที่วาดได้

หากคุณใช้การวาดแบบเวกเตอร์คุณจะต้อง

• คุณได้อพยพไป AndroidX? ถ้าไม่ใช่คุณต้องย้ายไปที่ AndroidX ก่อน มันง่ายมากดูว่า androidx คืออะไรและจะย้ายอย่างไร

• มันได้รับการปล่อยตัวในรุ่น1.1.0-alpha01ดังนั้นรุ่น AppCompat 1.1.0-alpha01ควรมีอย่างน้อย รุ่นล่าสุดในปัจจุบันจะ1.1.0-alpha02ใช้รุ่นล่าสุดสำหรับความน่าเชื่อถือที่ดีกว่าดูบันทึกประจำรุ่น - การเชื่อมโยง

  implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'

• ใช้AppCompatTextView/ AppCompatButton/AppCompatEditText

• การใช้งานapp:drawableLeftCompat, app:drawableTopCompat, app:drawableRightCompat, app:drawableBottomCompat, app:drawableStartCompatและapp:drawableEndCompat

สำหรับ drawable ปกติ

ถ้าคุณไม่จำเป็นต้องวาดเวกเตอร์คุณก็ทำได้

• การใช้งานandroid:drawableLeft, android:drawableRight, android:drawableBottom,android:drawableTop
• คุณสามารถใช้เป็นประจำอย่างใดอย่างหนึ่งTextView, ButtonและEditTextหรือAppCompatชั้นเรียน

คุณสามารถบรรลุผลลัพธ์เช่นด้านล่าง -

อาจเป็นไปได้ว่าโซลูชันของฉันจะเหมาะกับผู้ใช้จำนวนมากฉันหวังว่าจะเป็นเช่นนั้น

สิ่งที่ฉันแนะนำคือทำให้ 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" />

และนี่คือผลลัพธ์ จากนั้นกำหนดสไตล์ปุ่มที่กำหนดเองของคุณด้วยสีหรือคุณสมบัติและระยะขอบ โชคดี

<Button
     android:id="@+id/groups_button_bg"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="Groups"
     android:drawableTop="@drawable/[image]" />


android:drawableLeft
android:drawableRight
android:drawableBottom
android:drawableTop

http://www.mokasocial.com/2010/04/create-a-button-with-an-image-and-text-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>

คุณสามารถใช้สิ่งนี้:

  <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:id="@+id/myButton" 
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    android:text="Image Button"
    android:drawableTop="@drawable/myimage"         
    />  

หรือคุณสามารถเขียนโปรแกรม:

Drawable drawable = getResources.getDrawable(R.drawable.myimage);
drawable.setBounds(0, 0, 60, 60);
myButton.setCompoundDrawables(null, drawable, null, null);//to the Top of the Button

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