Ich möchte ein Symbol links von den beiden Textzeilen platzieren, sodass zwischen dem Bild und dem Textanfang etwa 2-3 Pixel Abstand liegen. Das Steuerelement selbst ist mittig horizontal ausgerichtet (über Interface Builder festgelegt).
Der Knopf würde ungefähr so aussehen:
| |
|[Image] Add To |
| Favorites |
Ich versuche dies mit contentEdgeInset, imageEdgeInsets und titleEdgeInsets ohne Erfolg zu konfigurieren. Ich verstehe, dass ein negativer Wert die Kante erweitert, während ein positiver Wert sie verkleinert, um sie näher an die Mitte zu bringen.
Ich habe es versucht:
[button setTitleEdgeInsets:UIEdgeInsetsMake(0, -image.size.width, 0, 0)];
[button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, 0)];
Dies zeigt es jedoch nicht richtig an. Ich habe die Werte optimiert, aber wenn ich links von -5 auf -10 gehe, scheint sich der Wert nicht in der erwarteten Weise zu verschieben. -10 scootet den Text ganz nach links, also habe ich erwartet, dass -5 ihn auf halbem Weg von der linken Seite scootet, aber das tut es nicht.
Was ist die Logik hinter Insets? Ich bin nicht mit Bildplatzierungen und verwandten Begriffen vertraut.
Ich habe diese SO-Frage als Referenz verwendet, aber etwas an meinen Werten stimmt nicht. UIButton: Wie zentriere ich ein Bild und einen Text mit imageEdgeInsets und titleEdgeInsets?
[UIButton setTitleColor:forState:]
oder sogar verwenden[UIButton setTitle:forState:]
.Ich bin etwas spät zu dieser Party, aber ich denke, ich habe etwas Nützliches hinzuzufügen.
Kekoas Antwort ist großartig, aber wie RonLugge erwähnt, kann dies dazu führen, dass die Schaltfläche nicht mehr respektiert wird
sizeToFit
oder, was noch wichtiger ist, dazu führt, dass die Schaltfläche ihren Inhalt abschneidet, wenn sie eine intrinsische Größe hat. Huch!Zunächst jedoch
Eine kurze Erklärung, wie ich glaube
imageEdgeInsets
undtitleEdgeInsets
arbeite:Die Dokumente für
imageEdgeInsets
haben zum Teil Folgendes zu sagen:Ich glaube, dass diese Dokumentation geschrieben wurde und sich vorstellte, dass der Button keinen Titel hat, nur ein Bild. Es macht viel mehr Sinn, auf diese Weise zu denken, und verhält sich wie
UIEdgeInsets
gewöhnlich. Grundsätzlich wird der Bildrahmen (oder der Titel mittitleEdgeInsets
) für positive Einfügungen nach innen und für negative Einfügungen nach außen verschoben.In Ordnung und jetzt?
Ich komme dahin! Standardmäßig legen Sie ein Bild und einen Titel fest (der Schaltflächenrand ist grün, um anzuzeigen, wo er sich befindet):
Wenn Sie einen Abstand zwischen einem Bild und einem Titel wünschen, ohne dass einer davon beschädigt wird, müssen Sie vier verschiedene Einfügungen festlegen, jeweils zwei für das Bild und den Titel. Das liegt daran, dass Sie nicht die Größe der Rahmen dieser Elemente ändern möchten , sondern nur deren Position. Wenn Sie anfangen, so zu denken, wird die notwendige Änderung in Kekoas ausgezeichneter Kategorie klar:
Aber warte , sagst du, wenn ich das mache, bekomme ich folgendes:
Oh ja! Ich habe vergessen, die Dokumente haben mich davor gewarnt. Sie sagen teilweise:
Aber es gibt eine Eigenschaft, die helfen kann, und das ist
contentEdgeInsets
. Die Dokumente dazu sagen teilweise:Das klingt gut. Lassen Sie uns die Kategorie noch einmal optimieren:
Und was bekommst du?
Sieht für mich wie ein Gewinner aus.
Arbeiten Sie in Swift und möchten Sie überhaupt nicht nachdenken? Hier ist die endgültige Version der Erweiterung in Swift:
quelle
intrinsicContentSize
Unrichtigkeit, was in diesen Tagen des automatischen Layouts sehr wichtig ist, da die ursprüngliche Antwort akzeptiert wurde.spacing
wünschen, fügen Sie zu jedem der vier Werte von self.contentEdgeInsets Folgendes hinzu:self.contentEdgeInsets = UIEdgeInsetsMake(spacing, spacing + insetAmount, spacing, spacing + insetAmount);
Im Interface Builder. Wählen Sie den UIButton -> Attributes Inspector -> Edge = Title und ändern Sie die Kanteneinfügungen
quelle
Auch wenn du etwas ähnliches machen willst
Du brauchst
1.Stellen Sie die horizontale und vertikale Ausrichtung für die Schaltfläche auf ein
Finde alle erforderlichen Werte und setze sie
UIImageEdgeInsets
Dadurch werden Titel und Bild auf der Schaltfläche angeordnet.
Bitte beachten Sie auch, dass dies bei jedem Relayout aktualisiert wird
Schnell
quelle
Sie können viel Ärger vermeiden, indem Sie dies verwenden -
Dadurch werden alle Ihre Inhalte automatisch nach links ausgerichtet (oder wo immer Sie möchten).
Swift 3:
quelle
In Xcode 8.0 können Sie dies einfach tun, indem Sie den Größeninspektor ändern
insets
.Wählen Sie den UIButton -> Attributes Inspector -> gehen Sie zum Größeninspektor und ändern Sie die Inhalts-, Bild- und Titeleinfügungen.
Wenn Sie das Bild auf der rechten Seite ändern möchten, können Sie die semantische Eigenschaft einfach
Force Right-to-left
im Attributinspektor ändern .quelle
Ich bin auch etwas spät zu dieser Party, aber ich denke, ich habe etwas Nützliches hinzuzufügen: o).
Ich habe eine erstellt
UIButton
Unterklasse erstellt, deren Zweck darin besteht, zu wählen, wo das Bild der Schaltfläche entweder vertikal oder horizontal angeordnet ist.Dies bedeutet, dass Sie diese Art von Schaltflächen erstellen können:
Hier die Details zum Erstellen dieser Schaltflächen mit meiner Klasse:
Dazu habe ich 2 Attribute hinzugefügt:
imageVerticalAlignment
undimageHorizontalAlignment
. Natürlich, wenn Ihre Schaltfläche nur ein Bild oder einen Titel hat ... verwenden Sie diese Klasse überhaupt nicht!Ich habe auch ein Attribut namens hinzugefügt
imageToTitleSpacing
dem Sie den Abstand zwischen Titel und Bild anpassen können.Diese Klasse versucht ihr Bestes, um kompatibel zu sein, wenn Sie sie verwenden möchten
imageEdgeInsets
,titleEdgeInsets
und zwarcontentEdgeInsets
direkt oder in Kombination mit den neuen Layoutattributen.Wie @ravron uns erklärt, versuche ich mein Bestes, um den Rand des Schaltflächeninhalts korrekt zu machen (wie Sie an den roten Rändern sehen können).
Sie können es auch im Interface Builder verwenden:
Hier der Code ( Kern ):
quelle
error: IB Designables: Failed to update auto layout status: The agent crashed
, gist.github.com/nebiros/ecf69ff9cb90568edde071386c6c4ddberror: IB Designables: Failed to update auto layout status: The agent crashed
weilinit(frame: CGRect)
nicht überschrieben wurde, füge ich auch@available
Anmerkungen hinzu ..., könnendiff -Naur
Sie, wenn Sie wollen, ;-)Eine kleine Ergänzung zur Antwort von Riley Avron auf Änderungen des Kontogebietsschemas:
quelle
Swift 4.x.
Verwendung :
quelle
Ich schreibe Code bewlow. Es funktioniert gut in der Produktversion. Supprot Swift 4.2 +
quelle
Hier ist ein einfaches Beispiel für die Verwendung von imageEdgeInsets. Dadurch wird eine 30x30-Schaltfläche mit einer umlaufenden Fläche von 10 Pixel (50x50) vergrößert.
quelle
Eine elegante Art in Swift 3 und besser zu verstehen:
quelle
Die schnelle Version 4.2 der Lösung wäre die folgende:
quelle