Unterschied zwischen Polsterung und Rand einer Ansicht


566

Was ist der Unterschied zwischen dem Rand einer Ansicht und dem Auffüllen?


10
Die Polsterung befindet sich innerhalb des Randes, der Rand außerhalb. Einzelheiten finden Sie im W3C-Box-Modell . Dieser Blog-Beitrag ist jedoch viel besser lesbar :-)
Aaron Digulla

2
Dies kann hilfreich sein, Layout zu
erklären

3
Dies ist das gleiche wie HTML, siehe hier für mehr stackoverflow.com/questions/2189452/…
Scott

Siehe meine Antwort auf ähnliche Frage stackoverflow.com/questions/21959050/…
Eugene Brusov

Antworten:


568

Um mich an die Bedeutung von Polsterung zu erinnern , denke ich an einen großen Mantel mit viel dicker Baumwollpolsterung . Ich bin in meinem Mantel, aber ich und mein gepolsterter Mantel sind zusammen. Wir sind eine Einheit.

Aber um mich an den Rand zu erinnern , denke ich an: „ Hey, gib mir einen Rand! “ Es ist der leere Raum zwischen mir und dir. Komm nicht in meine Komfortzone - meinen Spielraum.

Um es klarer zu machen, hier ein Bild von Polsterung und Rand in einem TextView:

Geben Sie hier die Bildbeschreibung ein

XML-Layout für das Bild oben

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

verbunden


578

Das Auffüllen ist der Raum innerhalb des Rahmens zwischen dem Rand und dem Inhalt der tatsächlichen Ansicht. Beachten Sie, dass das Auffüllen den Inhalt vollständig umgibt: Auf der oberen, unteren, rechten und linken Seite befindet sich eine Auffüllung (die unabhängig voneinander sein kann).

Ränder sind die Leerzeichen außerhalb der Grenze zwischen der Grenze und den anderen Elementen neben dieser Ansicht. Im Bild ist der Rand der graue Bereich außerhalb des gesamten Objekts. Beachten Sie, dass der Rand wie beim Auffüllen vollständig um den Inhalt herum verläuft: Auf der oberen, unteren, rechten und linken Seite befinden sich Ränder.

Ein Bild sagt mehr als 1000 Wörter (extrahiert aus Margin Vs Padding - CSS Properties ):

Alt-Text


54
Die Antwort ist für HTML / CSS, die Frage war über Android. Das Ansichtsmodell von Android ist von HTML inspiriert, aber nicht identisch. Zum einen ist die Grenze dort kein erstklassiges Objekt.
Seva Alekseyev

48
HINWEIS: In Android enthält die Eigenschaft layout_width Inhalt und Auffüllung. (In HTML bezieht sich die Eigenschaft css width nur auf die Inhaltsbreite.) Wie Seva sagte, hat Android kein eingebautes Konzept für Rahmen. Sie können einen 9-Patch-PNG-Hintergrund oder einen XML-Vektor verwenden, der gezeichnet werden kann, um einen Rahmen in Android hinzuzufügen.
SharkAlley

12
Es ist auch erwähnenswert, dass der Hintergrund basierend auf dem Rand, aber nicht der Auffüllung (in Android)
geändert wird

In Android ist das, was hier als "Rand" bezeichnet wird, eigentlich der "Ansichtscontainer". Dies sollte die Dinge ein wenig klären, würde ich hoffen.
Der hungrige Androider

75

Das Auffüllen erfolgt innerhalb einer Ansicht.

Der Rand liegt außerhalb einer Ansicht.

Dieser Unterschied kann für Hintergrund- oder Größeneigenschaften relevant sein.


41

Die Polsterung befindet sich in der Ansicht, der Rand befindet sich außerhalb. Die Polsterung ist für alle Ansichten verfügbar. Abhängig von der Ansicht kann es einen visuellen Unterschied zwischen Polsterung und Rand geben oder nicht.

Bei Schaltflächen enthält das Hintergrundbild der charakteristischen Schaltfläche beispielsweise die Auffüllung, nicht jedoch den Rand. Mit anderen Worten, wenn Sie mehr Polster hinzufügen, wird die Schaltfläche optisch größer, während durch Hinzufügen von mehr Rand nur die Lücke zwischen der Schaltfläche und dem nächsten Steuerelement größer wird.

Für TextViews hingegen ist der visuelle Effekt von Polsterung und Rand identisch.

Ob ein Rand verfügbar ist oder nicht, wird vom Container der Ansicht bestimmt, nicht von der Ansicht selbst. In LinearLayoutmargin wird unterstützt, in AbsoluteLayout(jetzt als veraltet angesehen) - nein.



8

Auffüllen bedeutet Platz zwischen Widget und Widget-Originalrahmen. Der Rand ist jedoch der Abstand zwischen dem ursprünglichen Rahmen des Widgets und den Grenzen des Rahmens anderer Widgets. Geben Sie hier die Bildbeschreibung ein.


7

Das Auffüllen ist der Raum innerhalb des Randes zwischen dem Rand und dem tatsächlichen Bild- oder Zelleninhalt. Ränder sind die Leerzeichen außerhalb der Grenze zwischen der Grenze und den anderen Elementen neben diesem Objekt.


7

Manchmal können Sie das gleiche Ergebnis erzielen, indem Sie nur mit Polsterung ODER Rand spielen. Beispiel:

Angenommen, Ansicht X enthält Ansicht Y (auch bekannt als: Ansicht Y befindet sich in Ansicht X).

- Ansicht Y mit Rand = 30 ODER Ansicht X mit Füllung = 30 erzielt das gleiche Ergebnis: Ansicht Y hat einen Versatz von 30.


7

Klotzen
Padding ist innerhalb eines View.For Beispiel , wenn Sie geben android:paddingLeft=20dp, dann werden die Elemente in der Ansicht mit arrangieren 20dpBreite von left.You auch verwenden können paddingRight, paddingBottom, paddingTopdie Polsterung zu geben , sind von rechts, unten und oben sind.

Margin
Margin liegt außerhalb von a View. Wenn Sie beispielsweise geben android:marginLeft=20dp, wird die Ansicht 20dpvon links nachher angeordnet .


3

Angenommen, Sie haben eine Schaltfläche in einer Ansicht und die Größe der Ansicht beträgt 200 x 200, die Größe der Schaltfläche beträgt 50 x 50 und der Schaltflächentitel lautet HT. Der Unterschied zwischen Rand und Abstand besteht nun darin, dass Sie den Rand der Schaltfläche in der Ansicht festlegen können, z. B. 20 von links, 20 von oben, und durch Auffüllen wird beispielsweise die Textposition in der Schaltfläche oder der Textansicht usw. angepasst Der Füllwert beträgt 20 von links, sodass die Position des Texts angepasst wird.


2

Rand bezieht sich auf den zusätzlichen Raum außerhalb eines Elements. Das Auffüllen bezieht sich auf den zusätzlichen Platz innerhalb eines Elements. Der Rand ist der zusätzliche Platz um das Steuerelement. Die Polsterung bietet zusätzlichen Platz innerhalb der Steuerung.

Es ist schwer, den Unterschied zwischen Rand und Polsterung mit einer weißen Füllung zu erkennen, aber mit einer farbigen Füllung können Sie ihn gut erkennen.


2

Zusätzlich zu den oben genannten richtigen Antworten besteht ein weiterer Unterschied darin, dass durch Auffüllen der anklickbare Bereich einer Ansicht vergrößert wird, während dies bei Rändern nicht der Fall ist . Dies ist nützlich, wenn Sie ein kleineres anklickbares Bild haben, aber den Klick-Handler verzeihen möchten.

Sehen Sie sich zum Beispiel dieses Bild meines Layouts mit einem ImageView(dem Android-Symbol) an, auf dem ich das festgelegt paddingBottonhabe 100dp(das Bild ist die Stock Launcher-Mipmap ic_launcher). Mit dem angehängten Klick-Handler konnte ich weit außerhalb und unterhalb des Bildes klicken und trotzdem einen Klick registrieren.

Geben Sie hier die Bildbeschreibung ein


Ein praktischer und nützlicher Tipp!
Navylover

2

In einfachen Worten:

  1. Auffüllen - schafft Platz innerhalb des Ansichtsrahmens.
  2. Rand - schafft Platz außerhalb des Ansichtsrahmens.

1

In einfachen Worten: Durch
Auffüllen ändert sich die Größe der Box (mit etwas).
Rand ändert den Abstand zwischen verschiedenen Feldern

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.