RelativeLayout: Richten Sie die Ansicht auf das Kind der Geschwister-Viewgroup aus

Ich versuche, eine Tab-Leiste in Android mit einem RelativeLayout und einer RadioGroup zu erstellen, die einen Indikator hat, der gleitet, um den aktiven RadioButton innerhalb der RadioGroup anzuzeigen.

Dies sind benutzerdefinierte Optionsfelder, die effektiv Rechtecke mit einem Symbol über Text sind, alle Inhalte zentriert, die eine benutzerdefinierte State-Selektor für den Hintergrund verwendet.

Hier ist meine aktuelle Hierarchie:

<RelativeLayout> // Main view of the tab bar <RadioGroup> // The buttons <RadioButton /> <RadioButton /> <RadioButton /> </RadioGroup> <ImageView /> // The indicator </RelativeLayout> 

Die Idee, die ich hatte war, als ein Optionsfeld angeklickt wurde, würde ich den Indikator an die obere und untere Seite des ausgewählten Optionsfeldes ausrichten und animieren. Allerdings scheint es, dass layout_align<Edge> nur mit layout_align<Edge> Elementen arbeitet, nicht mit Mitgliedern einer anderen View-Gruppe, dh ich kann mich an die RadioGroup selbst anpassen, aber nicht an einen RadioButton drin.

Ich dachte daran, den Indikator als Mitglied der RadioGroup zu setzen, aber da RadioGroup eine Erweiterung von LinearLayout ist, scheint es nicht, ein Weg zu sein, ihn am Rand eines gegebenen RadioButton zu platzieren.

Kann jemand darüber nachdenken, wie ich dieses Problem lösen könnte? Oder vielleicht gibt es eine bessere Lösung als meine animierte-align-to-button-Technik?

UPDATE Mit @superjos Hilfe, habe ich es geschafft, dies ziemlich gut zu arbeiten.

Ich musste jedem Knopf eine bekannte Höhe geben, anstatt wrap_content (nicht ideal, aber für dieses Projekt sollte es wohl gut funktionieren). Stellen Sie die Anzeigehöhe auf die Schaltflächen ein. Vergewissern Sie sich, dass die RadioGroup so eingestellt ist, dass sie den Inhalt verpackt und in der übergeordneten Ansicht vertikal zentriert ist. Setzen Sie den Indikator auf alignTop und toRightOf the RadioGroup. Dann, für die Schaltfläche klicken Sie auf Listener:

 int prevY, newY; int prevButtonIndex, newButtonIndex; public void moveIndicator(button, indicator, index) { prevY = newY; newY = prevY + (index - prevButtonIndex) * button.getHeight(); TranslateAnimation animation = new TranslateAnimation(0, 0, prevY, newY); animation.setDuration(500); animation.setFillAfter(true); // stay at final animation position indicator.setAnimation(); animation.start(); } 

2 Solutions collect form web for “RelativeLayout: Richten Sie die Ansicht auf das Kind der Geschwister-Viewgroup aus”

Hier ist meine Idee darüber. Im Folgenden sind einige ausführlichere Schritte.

Die Idee ist, dass die ImageView ein RadioGroup-Geschwister hat, wie es in deinem Sample ist. Die ImageView befindet sich zunächst auf der rechten Seite der RadioGroup und ihre horizontale Mittellinie ist mit der ersten (oder beliebigen) RadioButton ausgerichtet.

Dann wird bei einem RadioButton-Klick eine TranslateAnimation zur Laufzeit erstellt / konfiguriert, um das ImageView vertikal zu verschieben, bis seine Mittellinie mit der Klicks-Schaltfläche übereinstimmt. Die Animation wird mit fillAfter so eingestellt, dass sie fest bleibt, nachdem sie abgeschlossen ist.

Schritte:

  • Erstellen Sie Ihre Ressourcen so, dass ImageView und RadioButtons die gleiche Höhe haben, oder auch mit vertikalen Polsterungen arbeiten, so dass sie mit der gleichen Höhe führen.

  • Um das ImageView zunächst auf die erste RadioButton auszurichten, könnte etwas XML ausreichen: In ImageView layout_toRightOf und layout_alignTop an die RadioGroup an. Um die Top-Padding von RadioGroup zu berücksichtigen, könntest du das anfängliche ImageView-Top-Padding-XML-Attribut hinzufügen. Oder besser als Top-Marge.

  • Wenn ein RadioButton angeklickt wird, erstellen Sie eine TranslateAnimation, die auf die ImageMew angewendet wird, wobei nur die Y-Koordinate von 0 zu ihrem Ziel-toY-Wert geändert wird (während das / toX-Attribut 0 ist). Das ergibt sich aus einer Formel wie:

     toY = (ClickedRadioButton.Index - LastClickedRadioButton.Index) * RadioButton.Heigth 

    Hier ist Index die Ordinalposition des RadioButton innerhalb der Gruppe (zB von 0 bis 2) (Warnung: das ist Pseudocode, nicht unbedingt ein bestehendes Java-Feld namens Index ).

  • Wenden Sie die Animation an die ImageView an und starten Sie sie.

Sie können den RadioButton-Stil anpassen, um eine 9patched Version des Indikatorbildes als Hintergrund für den ausgewählten (möglicherweise überprüft für Radios ..) Staat zu enthalten. Oder als ziehbar

Allerdings hängt es davon ab, was die Animation aussehen soll.

Beispielsweise.

 <style name="TabRadioButton" parent="@android:style/Widget.CompoundButton.RadioButton"> <item name="android:background">@drawable/tab_bg</item> <item name="android:drawableLeft">@drawable/tab_indicator</item> </style> 
  • Aufbau eines Zoom-fähigen Containers
  • Android - Image Warp-Effekt
  • Android - Verstecken
  • Android View und ViewGroup
  • Hinzufügen und Entfernen einer TextView dynamisch in Android
  • Wie man eine Pin-Marker auf Bildansicht in Android hinzufügen
  • Aufblasen des XML-Layouts in eine benutzerdefinierte ViewGroup
  • Verschieben Android-Fragment auf einen anderen Container Kann nicht ändern Container-ID von Fragment
  • Wie kann ich eine android ViewGroup machen und alle seine Kinderaufrufe dynamisch gleich breit auf dem breitesten Kind pflegen?
  • Ansichten innerhalb einer benutzerdefinierten ViewGroup werden nicht angezeigt
  • Android StackOverflowError in ViewGroup.resetResolvedTextDirection beim Hinzufügen von ListView zu LinearLayout
  • Das Android ist ein Google Android Fan-Website, Alles ├╝ber Android Phones, Android Wear, Android Dev und Android Spiele Apps und so weiter.