Ich benötige zwei Möglichkeiten, um vertikale Beschriftungen in Android anzuzeigen:
- Horizontales Etikett um 90 Grad gegen den Uhrzeigersinn gedreht (Buchstaben an der Seite)
- Horizontales Etikett mit Buchstaben untereinander (wie ein Ladenschild)
Muss ich für beide Fälle benutzerdefinierte Widgets entwickeln (ein Fall), kann ich TextView so rendern lassen, und was wäre ein guter Weg, um so etwas zu tun, wenn ich vollständig benutzerdefiniert werden muss?
android
label
textview
vertical-alignment
Bostone
quelle
quelle
Antworten:
Hier ist meine elegante und einfache vertikale Textimplementierung, die TextView erweitert. Dies bedeutet, dass alle Standardstile von TextView verwendet werden können, da es sich um erweitertes TextView handelt.
Standardmäßig wird gedrehter Text von oben nach unten angezeigt. Wenn Sie android :vity = "bottom" einstellen, wird es von unten nach oben gezeichnet.
Technisch gesehen täuscht es die zugrunde liegende TextView vor, zu denken, dass es sich um eine normale Drehung handelt (Vertauschen von Breite / Höhe an wenigen Stellen), während das Zeichnen gedreht wird. Es funktioniert auch gut, wenn es in einem XML-Layout verwendet wird.
BEARBEITEN: Das Posten einer anderen Version oben hat Probleme mit Animationen. Diese neue Version funktioniert besser, verliert jedoch einige TextView-Funktionen, wie z. B. Laufschrift und ähnliche Spezialitäten.
EDIT Kotlin Version:
quelle
TextView
. Tatsächlich sind Links unterstrichen, reagieren jedoch nicht auf einen Klick.Ich habe dies für mein ChartDroid- Projekt implementiert . Erstellen
VerticalLabelView.java
:Und in
attrs.xml
:quelle
Ein Weg, dies zu erreichen, wäre:
quelle
\n
untereinander nach jedem Zeichen oder wenn Sie eine Schriftart mit fester Breite haben, beschränken Sie die TextView-Breite auf nur ein Zeichen.Versuchte beide VerticalTextView-Klassen in der genehmigten Antwort und sie funktionierten ziemlich gut.
Unabhängig davon, was ich versucht habe, konnte ich diese VerticalTextViews nicht in der Mitte des enthaltenen Layouts positionieren (ein RelativeLayout, das Teil eines Elements ist, das für eine RecyclerView aufgeblasen wurde).
FWIW, nachdem ich mich umgesehen hatte, fand ich die VerticalTextView-Klasse von yoog568 auf GitHub:
https://github.com/yoog568/VerticalTextView/blob/master/src/com/yoog/widget/VerticalTextView.java
was ich wie gewünscht positionieren konnte. Sie müssen außerdem die folgende Attributdefinition in Ihr Projekt aufnehmen:
https://github.com/yoog568/VerticalTextView/blob/master/res/values/attr.xml
quelle
Das hat bei mir funktioniert, ganz gut. Was die vertikal abfallenden Buchstaben betrifft - ich weiß es nicht.
quelle
Es gibt einige kleinere Dinge, auf die man achten muss.
Dies hängt vom Zeichensatz ab, wenn Sie den Dreh- oder den Pfad wählen. Wenn der Zielzeichensatz beispielsweise englisch ist und der erwartete Effekt wie folgt aussieht:
Sie können diesen Effekt erzielen, indem Sie jedes Zeichen einzeln zeichnen, ohne dass eine Drehung oder ein Pfad erforderlich ist.
Möglicherweise müssen Sie drehen oder einen Pfad erstellen, um diesen Effekt zu erzielen.
Der schwierige Teil ist, wenn Sie versuchen, Zeichensätze wie Mongolisch zu rendern. Die Glyphe in der Schrift muss um 90 Grad gedreht werden, daher ist drawTextOnPath () ein guter Kandidat.
quelle
Nach der Antwort von Pointer Null konnte ich den Text horizontal zentrieren, indem ich die
onDraw
Methode folgendermaßen änderte :Möglicherweise müssen Sie einen Teil der gemessenen Textansicht hinzufügen, um einen mehrzeiligen Text zu zentrieren.
quelle
Sie können einfach zu Ihrer TextView oder einem anderen View-XML-Rotationswert hinzufügen. Dies ist der einfachste Weg und für mich funktioniert es richtig.
quelle
Mein anfänglicher Ansatz zum Rendern von vertikalem Text in einem vertikalen LinearLayout war wie folgt (dies ist Kotlin, in Java
setRoatation
usw.):Wie Sie sehen, besteht das Problem darin, dass die Textansicht vertikal verläuft, ihre Breite jedoch so behandelt, als ob sie horizontal ausgerichtet wäre! = /
Daher bestand Ansatz Nr. 2 darin, Breite und Höhe zusätzlich manuell zu wechseln, um dies zu berücksichtigen:
Dies führte jedoch dazu, dass die Etiketten in die nächste Zeile umbrochen wurden (oder beschnitten wurden, wenn Sie dies tun)
setSingleLine
nach der relativ kurzen Breite ). Dies läuft wiederum darauf hinaus, x mit y zu verwechseln.Mein Ansatz Nr. 3 bestand daher darin, die Textansicht in ein RelativeLayout zu verpacken. Die Idee ist, der Textansicht eine beliebige Breite zu ermöglichen, indem sie weit nach links und rechts erweitert wird (hier 200 Pixel in beide Richtungen). Aber dann gebe ich dem RelativeLayout negative Ränder, um sicherzustellen, dass es als schmale Spalte gezeichnet wird. Hier ist mein vollständiger Code für diesen Screenshot:
Als allgemeiner Tipp war diese Strategie, eine Ansicht eine andere Ansicht "halten" zu lassen, für mich sehr nützlich, um Dinge in Android zu positionieren! Das Infofenster unter der ActionBar verwendet beispielsweise dieselbe Taktik!
Für Text, der wie ein Geschäftsschild erscheint, fügen Sie nach jedem Zeichen einfach Zeilenumbrüche ein, z. B
"N\nu\nt\ns"
.:quelle
Ich mochte @ kostmos Ansatz. Ich habe es ein wenig modifiziert, weil ich ein Problem hatte - das vertikal gedrehte Etikett abzuschneiden, wenn ich seine Parameter als einstelle
WRAP_CONTENT
. Somit war ein Text nicht vollständig sichtbar.So habe ich es gelöst:
Wenn Sie einen Text von oben nach unten haben möchten, verwenden Sie die
topToDown(true)
Methode.quelle