android ui - 視圖的填充和邊距之間的區別




class card (13)

填充位於視圖內部。

保證金不在視圖範圍之內。

這種差異可能與背景或大小屬性有關。

View's Margin和Padding有什麼區別?


簡而言之:
填充改變了框的大小(用一些東西)。
邊距改變了不同盒子之間的空間


填充是邊框內邊界與實際視圖內容之間的空間。 請注意,填充完全圍繞內容:頂部,底部,右側和左側(可以獨立)有填充。

邊距是指邊界之外,邊界與此視圖旁邊的其他元素之間的空間。 在圖像中,邊距是整個對像外部的灰色區域。 請注意,像填充一樣,邊距完全圍繞內容:頂部,底部,右側和左側都有邊距。

一張圖片顯示超過1000個字(從邊距與填充 - CSS屬性中提取):


填充是在視圖內,邊緣在外。 填充可用於所有視圖。 根據視圖,填充和邊距之間可能存在或可能不存在視覺差異。

例如,對於按鈕,特徵按鈕背景圖像包括填充,但不包括邊距。 換句話說,添加更多的填充使按鈕看起來更大,而添加更多的邊距則會使按鈕和下一個控件之間的間隙變大。

另一方面,對於TextView ,填充和邊距的視覺效果是相同的。

邊距是否可用取決於視圖的容器,而不是視圖本身。 在LinearLayout中,支持AbsoluteLayout (現在認為已過時) - 不支持。


簡而言之:

  1. 填充 - 在視圖邊框內創建空間。
  2. 保證金 - 在視圖邊界外創建空間。

讓我們假設你在視圖中有一個按鈕,視圖的大小是200乘200,按鈕的大小是50乘50,並且按鈕標題是HT,現在邊距和填充之間的差異是,可以設置視圖中的按鈕邊距,例如從頂部的左20開始的20,並且填充將調整按鈕或文本視圖等中的文本位置,例如,填充值從左邊開始為20。 所以它會調整文字的位置。


為了幫助我記住襯墊的意義,我想到了一件厚厚的棉質襯墊的大外套。 我穿著我的外套,但是我和我的軟墊外套在一起。 我們是一個單位。

但為了記住保證金 ,我想,“ 嘿,給我一些保證金! ”這是我和你之間的空白空間。 不要進入我的舒適區 - 我的邊緣。

為了更加清楚,下面是一個TextView的填充和邊距的圖片:

上面的圖像的xml佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#c5e1b0"
        android:textColor="#000000"
        android:text="TextView margin only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#f6c0c0"
        android:textColor="#000000"
        android:text="TextView margin only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#c5e1b0"
        android:padding="10dp"
        android:textColor="#000000"
        android:text="TextView padding only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f6c0c0"
        android:padding="10dp"
        android:textColor="#000000"
        android:text="TextView padding only"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#c5e1b0"
        android:textColor="#000000"
        android:padding="10dp"
        android:text="TextView padding and margin"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#f6c0c0"
        android:textColor="#000000"
        android:padding="10dp"
        android:text="TextView padding and margin"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#c5e1b0"
        android:textColor="#000000"
        android:text="TextView no padding no margin"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#f6c0c0"
        android:textColor="#000000"
        android:text="TextView no padding no margin"
        android:textSize="20sp" />

</LinearLayout>

有關

  • 重力與layout_gravity
  • Match_parent與wrap_content

填充
例如,如果您給android:paddingLeft=20dp ,那麼視圖內的項目將從左邊開始以20dp寬度進行排列。您還可以使用paddingRightpaddingBottompaddingTop來填充右邊,底部的填充和頂部。

餘量
保證金在View之外。 例如,如果您給android:marginLeft=20dp ,那麼視圖將從左側20dp後排列。


保證金是指元素外部的額外空間。 填充是指元素內的額外空間。 保證金是控制權附近的額外空間。 填充是控件內部的額外空間。

很難看到白色填充物的邊距和填充差異,但用彩色填充物可以很好地看到它。


下圖將讓你了解填充和邊距 -


除了上面所有正確的答案之外,另一個區別是填充增加了視圖的可點擊區域,而邊距則不增加。 如果您有一個小小的可點擊圖片,但想要讓點擊處理器保持原樣,這很有用。

例如,看到我的佈局圖像與ImageView (Android圖標),我將paddingBotton設置為100dp (圖像是股票啟動器mipmap ic_launcher )。 隨著附加的點擊處理程序,我可以點擊圖像外部和下方的方式,並仍然註冊點擊。


填充意味著小部件和小部件原始幀之間的空間。 但邊距是控件的原始框架與其他控件框架之間的空間。


你應該考慮使用層列表

像這樣創建一個可繪製文件,將其命名為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" 
    />




android user-interface view padding margin