Skizze: Objekt bewegt sich relativ zu einem anderen Objekt/Text im Symbol

Wie lasse ich ein Objekt automatisch verschieben, wenn ich den vorangehenden/"angehängten" Text ändere?

Ich versuche herauszufinden, wie dieses Standardsymbol funktioniert (gif unten enthalten) und es zu replizieren.

Wenn ich „ “ in die Überschreibung eintippe, bewegt sich das WLAN-Symbol neben den Empfangspunkten. Wenn ich eine längere Zeichenfolge eintippe (siehe gif), verschiebt sich das WLAN-Symbol automatisch entsprechend nach hinter den Text.

Es ist, als ob das WLAN-Symbol am ENDE des Textfelds "Carrrier" verankert ist (das keine feste Breite hat) und sich entsprechend der Länge des Textfelds bewegt. Wie wird das in Sketch gemacht?


Demo zum Ändern von Text in einem Symbol mit einem Objekt, das sich abhängig von der Länge des Symbols bewegt

Die eigentliche Zeichenfläche hat nichts Besonderes:

Zeichenflächenebenen

Irgendwelche Lösungen? Bitte danke!

Wie wird es gemacht? Zum Beispiel erstelle ich ein Symbol mit Text und sage, ein Quadrat direkt neben dem Textfeld, wenn ich den Text bearbeite, bewegt sich das Quadrat nicht. Ich möchte, dass sich das Quadrat automatisch bewegt, wenn ich den Text in den Überschreibungen ändere.
Kann dieses gewünschte Verhalten in keinem der Vorschläge reproduzieren. Gibt es noch eine Möglichkeit, dies mit der neuesten Sketchapp-Version 51.2 zu erreichen? Leider scheint auch dieser Beitrag nicht korrekt zu sein / für die neueste Sketchapp-Version zu funktionieren. Tschüss

Antworten (5)

Vielen Dank an den Twitter-Nutzer @kieranpblack!

Sie müssen mindestens 1 Pixel zwischen der Textebene und der zweiten Ebene haben, damit es funktioniert. Funktioniert mit jeder Größenänderungsoption, einschließlich der Standarddehnung!

(Kann mich nicht einmal erinnern, ob ich das vor dem Sketch 41-Update ausprobiert habe oder nicht? Scheint so einfach zu sein, wenn ich es mir jetzt ansehe.)

Mit ein bisschen Versuch und Irrtum habe ich die Anforderungen eingegrenzt.

  • Die Ausrichtung des Textes muss auf Auto eingestellt sein
  • Der horizontale Abstand zwischen dem Text und der anderen Ebene muss ≥ 0 und ≤ 19 Pixel betragen
  • Der Abstand zwischen der Oberkante des Textrahmens und der Oberkante der anderen Ebene und der Unterkante des Textrahmens und der Unterkante der anderen Ebene muss ≤ 8 Pixel betragen

Der Text kann links oder rechts von der verschobenen Ebene stehen.

Diese Bedingungen waren verdammt hilfreich, vielen Dank.

Für Sketch 44+ wird dies ganz einfach.

  1. Erstellen Sie eine Textebene mit automatischer Breite
  2. Platzieren Sie ein Objekt (z. B. ein Rechteck) rechts neben dieser Ebene
  3. Wählen Sie sowohl die Textebene als auch das Objekt aus
  4. Wählen Sie im Ebenenbedienfeld „Symbol erstellen“
  5. Wählen Sie im Dialogfeld "Symbol erstellen" "↦Layout von links nach rechts" in der Dropdown-Liste unter der Eingabe des Symbolnamens

Wenn Sie jetzt den Textwert in Ihrem neu erstellten Symbol überschreiben, behält das Objekt rechts seine Position relativ zur Breite des Textes bei

Screenshot, der die Layout-Option beim Erstellen des Symbols zeigt

Screenshot, der das Ergebnis des Symbols mit überschriebenem Text zeigt

Ich kann keine Dokumentation dazu finden, aber ich habe herausgefunden, wie ich das Verhalten reproduzieren kann, falls Sie immer noch interessiert sind.

  1. Erstellen Sie ein Hintergrundrechteck, ein Stück Text mit automatischer Breite über diesem Rechteck und ein kleineres Rechteck bis zu 20 Pixel vom rechten Rand des Textes entfernt.
  2. Wählen Sie den Text und das kleinere Rechteck aus und erstellen Sie eine Gruppe. Nennen wir es "Gruppe1".
  3. Stellen Sie sicher, dass das kleine Rechteck nach dem Text mit automatischer Breite in der Ebenenliste kommt.
  4. Wählen Sie das Hintergrundrechteck und die Gruppe1 aus und erstellen Sie ein Symbol.
  5. Wählen Sie auf der Symbolbearbeitungsseite group1 aus und geben Sie als Methode zur Größenänderung „an Ecke anheften“ an. Überprüfen Sie, ob alle Ihre anderen Elemente (die beiden Rechtecke und der Text) als Größenänderungsmethoden „strecken“ haben.
  6. Erstellen Sie einige Instanzen und überschreiben Sie den Text, es sollte funktionieren.

Es ist schwierig, den vollständigen Regelsatz aus Experimenten abzuleiten. Ich wünschte, es gäbe ein Handbuch oder so etwas.

Ich habe Ihre Schritte ausprobiert, konnte sie aber leider nicht replizieren ... Ich danke Ihnen jedoch für Ihre Hilfe! Es ist auch frustrierend, weil es auf dem eigentlichen Symbol keine Gruppierung oder eine spezielle Größenänderung "Pin to Corner" gibt ... Ich könnte Bohemia Code eine Nachricht senden, in der ich danach frage.
Hast du von Bohemian gehört? Details darüber, wie die Steuerelemente zur Größenänderung von Gruppen funktionieren, finden Sie weiter unten. Versuchen Sie es hier: medium.com/sketch-app-sources/…
Habe nichts von ihnen gehört. Ich verstehe die Funktionen zur Größenänderung von Gruppen, aber das fühlt sich nicht so an, da ich nicht unbedingt die Größe des Gesamtobjekts physisch ändere ... nur den Text in einer der Überschreibungen ändere. Alle Größenanpassungsoptionen des Originalsymbols sind einfach auf die Standardeinstellung "Strecken" eingestellt.

Ich bin gerade auf der Suche nach Antworten ohne Glück über diese Frage gestolpert, aber ich habe einen Workflow gefunden, um dies zu erreichen:

Schritte:

  1. Erstellen Sie ein Textfeld, an dem Ihr Objekt verankert werden soll.
  2. Objekt an Textfeld ausrichten (ich habe nur Objekt rechts versucht) .
  3. Textfeld und Objekt gruppieren.
  4. Stellen Sie die Option "Größe ändern" des Textfelds auf Strecken und des Objekts auf Pin-to-Corner ein.
  5. Erstellen Sie ein Symbol mit der gerade erstellten Gruppe.
  6. Wichtig: Erweitern Sie auf der Symbolseite die Zeichenfläche Ihres neuen Symbols auf eine Breite, die alle Ihre Überschreibungen aufnehmen kann, die Sie in Ihr Textfeld eingeben.

Sie sollten jetzt in der Lage sein, Ihren Text zu überschreiben, und Ihr Objekt wird mit Ihrem neuen Text verankert.

Prost!

Skizze: Objekt bewegt sich relativ zu einem anderen Objekt/Text im Symbol
AntwortenHierDatenschutz-Bestimmungen1y, 0v