android: drawableLft margin และ / หรือ padding


คำตอบ:


464

ดังที่เซฟาสได้กล่าวไว้android:drawablePaddingจะบังคับให้ขยายระหว่างข้อความและ drawable หากปุ่มมีขนาดเล็กพอ

เมื่อวางเค้าโครงปุ่มที่ใหญ่ขึ้นคุณสามารถใช้android:drawablePaddingร่วมกับandroid:paddingLeftและandroid:paddingRightเพื่อบังคับให้ข้อความและ drawable เข้าด้านในตรงกลางของปุ่ม ด้วยการปรับการเว้นช่องว่างด้านซ้ายและขวาแยกจากกันทำให้คุณสามารถทำการปรับเปลี่ยนเค้าโครงได้อย่างละเอียด

นี่คือตัวอย่างปุ่มที่ใช้การขยายเพื่อผลักข้อความและไอคอนเข้าหากันมากกว่าค่าปกติ:

<Button android:text="@string/button_label" 
    android:id="@+id/buttonId"
    android:layout_width="160dip"
    android:layout_height="60dip"
    android:layout_gravity="center"
    android:textSize="13dip"
    android:drawableLeft="@drawable/button_icon"
    android:drawablePadding="2dip"
    android:paddingLeft="30dip"
    android:paddingRight="26dip"
    android:singleLine="true"
    android:gravity="center" />  

21
android: paddingLeft = "30dip" android: paddingRight = "26dip" เป็นกุญแจสำคัญที่นี่!
IgorGanapolsky

4
นี้ไม่เกี่ยวข้องกับคำถาม แต่ Android: แรงโน้มถ่วง = "ศูนย์" จะทำให้ข้อความที่สอดคล้องกับศูนย์กลางของ drawable!
cwhsu

1
จะเป็นอย่างไรถ้าเรามี drawable ทั้งทางซ้ายและขวาและต้องปรับ drawable ให้ถูกต้อง ??
nmxprime

ฉันใช้เฉพาะ: android: paddingLeft เท่านั้นและจะเปลี่ยนตำแหน่งของภาพ android: drawablePadding ใช้สำหรับเว้นวรรคระหว่างรูปภาพและข้อความ
Brave

ปัญหาของรหัสนี้คือสาเหตุที่ทำให้เกิดpasswordToggleDrawableช่องว่างการขยายด้านซ้ายใหญ่ขึ้นเนื่องจากไม่สามารถกำหนดเป้าหมายเฉพาะสำหรับการออกจากการสุ่มได้
ผลไม้

184

TextView มีแอนดรอยด์:คุณสมบัติdrawablePaddingซึ่งควรทำเคล็ดลับ:

หุ่นยนต์: drawablePadding

ช่องว่างระหว่าง drawable และข้อความ

ต้องเป็นค่ามิติซึ่งเป็นเลขทศนิยมที่ต่อท้ายด้วยหน่วยเช่น "14.5sp" หน่วยที่ใช้ได้คือ: px (พิกเซล), dp (พิกเซลความหนาแน่นอิสระ), sp (พิกเซลที่ปรับขนาดตามขนาดตัวอักษรที่ต้องการ), (นิ้ว), มม. (มม.)

นี่อาจเป็นการอ้างอิงถึงทรัพยากร (ในรูปแบบ "@ [แพ็คเกจ:] ประเภท: ชื่อ") หรือแอตทริบิวต์ของธีม (ในรูปแบบ "? [แพ็คเกจ:] [ประเภท:] ชื่อ") ที่มีค่าประเภทนี้ .

สิ่งนี้สอดคล้องกับสัญลักษณ์รีซอร์สแอ็ตทริบิวต์โกลบอล drawablePadding


61

android:drawablePaddingจะสร้างช่องว่างระหว่างช่องว่างระหว่างข้อความและ drawable หากปุ่มมีขนาดเล็กพอที่จะรวม 2 เข้าด้วยกัน หากปุ่มของคุณกว้างกว่าความกว้างรวม (สำหรับ drawableLeft / drawableRight) หรือความสูง (สำหรับ drawableTop / drawableBottom ด้านล่าง) drawablePadding จะไม่ทำอะไรเลย

ฉันกำลังดิ้นรนกับเรื่องนี้ในขณะนี้เช่นกัน ปุ่มของฉันค่อนข้างกว้างและไอคอนจะห้อยอยู่ที่ขอบด้านซ้ายของปุ่มและข้อความอยู่กึ่งกลาง วิธีเดียวที่ฉันจะหลีกเลี่ยงสิ่งนี้ได้ในตอนนี้คือการอบบนขอบด้วย drawable โดยการเพิ่มพิกเซลว่างเปล่าที่ขอบด้านซ้ายของผืนผ้าใบด้วย photoshop ไม่เหมาะและไม่แนะนำจริงๆ แต่นั่นเป็นวิธีแก้ปัญหาช่องว่างหยุดของฉันในตอนนี้ขาดการสร้าง TextView / Button ใหม่


ขอบคุณที่อธิบายปัญหาของฉัน ฉันไม่ได้ตระหนักว่ามันเกิดขึ้นเมื่อปุ่มมีความกว้างพอ
peter.bartos

ผมมีปัญหาเดียวกัน. ปุ่มของฉันกว้างดังนั้น drawable ไม่ใกล้ข้อความ
Milad Faridnia

มันทำงานได้ดีขอบคุณ
เดฟเกรดี้

43

ใช่. ใช้drawablePaddingดังนี้

<TextView
        android:id="@+id/tvHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Settings and Contents"
        android:drawableLeft="@drawable/icon_success"
        android:drawablePadding="10dp" />

37

ทำให้ drawable resources.xml ของคุณ

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <inset android:drawable="@drawable/small_m" android:insetLeft="10dp" android:insetTop="10dp" />
    </item>
    <item>
        <inset android:drawable="@drawable/small_p" android:insetLeft="10dp" android:insetTop="10dp" />
    </item>
</selector>

2
@ ศิลปินที่ดีที่สุดที่ฉันใช้สิ่งที่ใส่เข้าไปใน drawable และมันทำงานได้ดีสำหรับอุปกรณ์รุ่นใหม่ ฉันหมายถึงมันไม่ทำงานใน SDK 16, 17 แต่ทำงานใน SDK 23 มีความคิดอะไรบ้าง
Bhavin Chauhan


คำตอบที่ดีและ upvote สำหรับสิ่งนี้ คุณเพียงแค่ช่วยฉันแก้ปัญหาที่ทำให้ฉันสับสนเป็นเวลานาน
Anthonyeef

34

android:drawablePaddingเป็นวิธีที่ง่ายที่สุดในการให้ช่องว่างภายในไปยังไอคอนรูปวาดได้ แต่คุณไม่สามารถกำหนดรูปแบบด้านใดด้านหนึ่งเช่นpaddingRightหรือpaddingLeftไอคอนแบบเลื่อนได้เพื่อให้บรรลุว่าคุณต้องขุดลงไป และถ้าคุณใช้paddingLeftหรือpaddingRightกับEdittextมันก็จะวางช่องว่างทั้งหมดEdittextพร้อมด้วยไอคอนรูปวาดได้


12

กำหนดรูปร่างสำหรับ edittext ของคุณและยกตัวอย่างเช่น

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <padding
        android:left="5dp"
        android:right="5dp"
    />
    <solid android:color="#F6F6F6" />
    <stroke
        android:width="1px"
        android:color="#C3C3C3" />

    <corners
        android:bottomLeftRadius="1dp"
        android:bottomRightRadius="1dp"
        android:topLeftRadius="1dp"
        android:topRightRadius="1dp" />
</shape>

ช่องว่างภายในที่กำหนดไว้ในรูปร่างนี้จะช่วยในการให้ช่องว่างภายในเพื่อ drawableleft หรือขวา ---------------------- ใช้รูปร่างนี้ใน EditView

 <EditText
            android:id="@+id/example"
            android:layout_width="fill_parent"
            android:layout_height="36dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@drawable/shape2"
            android:drawableLeft="@drawable/icon1"
            android:drawablePadding="@dimen/txtDrwblPadding"
            android:ems="10"
         />

การใช้รูปร่างที่กำหนดไว้เป็นพื้นหลังจะทำให้ EditText ของคุณมีสไตล์และระยะห่างกับ drawableLeft


12

android: drawablePadding เป็นวิธีที่ง่ายที่สุดในการให้ padding ไปที่ไอคอน drawable แต่คุณไม่สามารถให้ padding ด้านใดด้านหนึ่งโดยเฉพาะเช่น paddingRight หรือ padding ซ้ายสุดของไอคอน drawable เพื่อให้บรรลุว่าคุณต้องขุดลงไป และถ้าคุณใช้ paddingLeft หรือ paddingRight กับ Edittext มันจะวาง padding ไปที่ Edittext ทั้งหมดพร้อมกับไอคอน drawable

<TextView android:layout_width="match_parent"
    android:padding="5sp"
    android:id="@+id/date"
    android:gravity="center|start"
    android:drawableEnd="@drawable/ic_calendar"
    android:background="@drawable/edit_background"
    android:hint="Not Selected"
    android:drawablePadding="10sp"
    android:paddingStart="10sp"
    android:paddingEnd="10sp"
    android:textColor="@color/black"
    android:layout_height="wrap_content"/>

คุณควรใช้ "dp"
ทำเครื่องหมาย Pazon

11
<TextView
    android:layout_width="wrap_content"
    android:layout_height="32dp"
    android:background="@drawable/a"
    android:drawableLeft="@drawable/concern_black"
    android:gravity="center"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:drawablePadding="10dp"
    android:text="text"/>

หมายเหตุ: layout_width ต้องเป็น wrap_content และใช้ paddingLeft paddingRight drawablePadding เพื่อควบคุมช่องว่าง หากคุณระบุค่า layout_width จะมีช่องว่างระหว่างไอคอนและข้อความฉันคิดว่าเมื่อให้ค่าระบุ layout_width แล้วการขยายจะวัด


9

ฉันจะโยนคำตอบลงในวงแหวนด้วย หากคุณต้องการทำสิ่งนี้โดยทางโปรแกรมคุณสามารถทำสิ่งต่อไปนี้

final Drawable drawable = ContextCompat.getDrawable(getContext(), R.drawable.somedrawable);
final boolean isLTR = ViewCompat.LAYOUT_DIRECTION_LTR == ViewCompat.getLayoutDirection(this);
final int iconInsetPadding = getResources().getDimensionPixelSize(R.dimen.icon_padding);

final Drawable insetDrawable = new InsetDrawable(drawable, isLTR ? 0 : iconInsetPadding, 0, isLTR ? iconInsetPadding : 0, 0);

สิ่งนี้จะเพิ่มการเติมไปยังจุดสิ้นสุดของ drawable โดยจุดสิ้นสุดจะหมายถึงซ้าย / ขวาขึ้นอยู่กับว่าโทรศัพท์อยู่ใน LTR หรือ RTL


7

แทนที่จะButtonใช้LinearLayoutกับImageViewและTextViewภายใน ในรายการที่เด็กชอบImageViewและการใช้งานTextViewandroid:duplicateParentState="true"


คุณจะต้องใช้ FrameLayout และปุ่ม (และ ImageView / TextView ภายใน LinearLayout ของตัวเอง) เพื่อสร้าง UI ของปุ่มและถ่ายโอน onclicklistener () ไปยังส่วนของปุ่ม
3c71

1
ทำไมต้องใช้เลย์เอาต์เพิ่มเติมถ้าคุณมี drawablePadding ใน TextView อยู่แล้ว
Parinda Rajapaksha

5

คุณควรพิจารณาใช้ layer-list

สร้างไฟล์ drawable เช่นนี้ตั้งชื่อเป็น ic_calendar.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>
<item android:right="10dp">
    <bitmap android:gravity="center_vertical|left"
        android:src="@drawable/ic_calendar_16dp"
        android:tint="@color/red"
        />
</item>
</layer-list>

ภายใต้ไฟล์เลย์เอาต์

<TextView
         android:id="@+id/tvDate"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:drawableLeft="@drawable/ic_calendar"
         android:textColor="@color/colorGrey"
         android:textSize="14sp" 
    />

4

คุณสามารถใช้ช่องว่างภายในสำหรับปุ่มและคุณสามารถเล่นกับ drawablePadding

 <Button
    style="@style/botonesMenu"
    android:padding="15dp"
    android:drawablePadding="-15dp"
    android:text="@string/actualizarBD"
    android:textAlignment="gravity"
    android:gravity="center"
    android:layout_row="1"
    android:layout_column="0"
    android:drawableTop="@drawable/actualizar"
    android:id="@+id/btnActualizar"
    android:onClick="actualizarBD" />

คุณสามารถใช้ช่องว่างภายในที่เฉพาะเจาะจงขึ้นอยู่กับที่ใส่ drawable ของคุณด้วย android: paddingLeft = "10dp" หรือ android: paddingBottom = "10dp" หรือ android: paddingRight = "10dp" หรือ android: paddingTop = "10dp"


2

คุณสามารถใช้android:drawableLeft="@drawable/your_icon"เพื่อตั้งค่า drawable ที่จะแสดงทางด้านซ้าย ในการตั้งค่าช่องว่างภายในสำหรับ drawable คุณควรใช้android:paddingLeftหรือandroid:paddingRightเพื่อตั้งช่องว่างด้านซ้าย / ขวาตามลำดับ

android:paddingRight="10dp"
android:paddingLeft="20dp"
android:drawableRight="@drawable/ic_app_manager"

1

หากขนาดของทรัพยากรที่สามารถดึงได้ได้รับการแก้ไขคุณสามารถทำสิ่งนี้ได้:

<Button
    android:background="@drawable/rounded_button_green"
    style="?android:attr/selectableItemBackground"
    android:layout_height="wrap_content"
    app:layout_widthPercent="70%"
    android:drawableRight="@drawable/ic_clear_black_24dp"
    android:paddingRight="10dp"
    android:paddingLeft="34dp"
    tools:text="example" />

กุญแจสำคัญคือ:

    android:drawableRight="@drawable/ic_clear_black_24dp"
    android:paddingRight="10dp"
    android:paddingLeft="34dp"

นั่นคือขนาดของทรัพยากร drawable plus paddingRight คือ paddingLeft

คุณสามารถเห็นผลลัพธ์ในตัวอย่างนี้


1
textView.setCompoundDrawablesWithIntrinsicBounds(AppCompatResources.getDrawable(this,drawable),null,null,null);

addressTitleView.setCompoundDrawablePadding();

ในขณะที่ข้อมูลโค้ดนี้อาจแก้ไขคำถามรวมถึงคำอธิบายช่วยปรับปรุงคุณภาพของโพสต์ของคุณ จำไว้ว่าคุณกำลังตอบคำถามสำหรับผู้อ่านในอนาคตและคนเหล่านั้นอาจไม่ทราบสาเหตุของการแนะนำรหัสของคุณ
Rosário Pereira Fernandes

ใช้งานได้กับมุมมองข้อความเท่านั้นเช่นปุ่มที่อนุญาตให้ตั้งค่าเริ่มต้น / สิ้นสุด drwables
Ixx

1

สร้างใหม่จาก:

<?xml version="1.0" encoding="utf-8"?>
<shape
        xmlns:android="http://schemas.android.com/apk/res/android">

    <corners android:radius="40dp"/>

    <solid android:color="@android:color/white"/>

</shape>

ถึง

<layer-list
        xmlns:android="http://schemas.android.com/apk/res/android">
    <item
            android:right="@dimen/_2dp"
            android:left="@dimen/_2dp"
            android:bottom="@dimen/_2dp"
            android:top="@dimen/_2dp"
            >
        <shape
                xmlns:android="http://schemas.android.com/apk/res/android">

            <corners android:radius="40dp"/>

            <solid android:color="@android:color/white"/>

        </shape>
    </item>

</layer-list>

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.