Die Schönheit von benutzerdefinierten Ansichten in Android und wie es geht!

Manchmal haben Sie in Android ein bestimmtes Layout, das an mehreren Stellen mit nur geringfügigen Änderungen verwendet werden muss. Manchmal handelt es sich nur um eine kleine Menge von Ansichten, und Sie möchten RecyclerView nicht implementieren, weil der Code des Boilerplates zu wenig Elemente enthält, um es wert zu sein.

Für diese speziellen Fälle empfehle ich, eine eigene CustomView zu erstellen. Das liegt daran, dass Sie am Ende Zeit sparen, wenn Sie Änderungen an dieser Ansicht usw. vornehmen möchten.

Warum kann ich nicht einfach verwenden?

Da sie Ansichten so enthalten sollen, wie sie sind, können Sie keine Parameter übergeben.

Lassen Sie uns programmieren

Sie erfahren, wie Sie ein benutzerdefiniertes Layout für Ihre Ansicht aufblasen und zwei verschiedene Parameter übergeben. Es ist schnell und einfach!

Der Code ist auf meinem Github verfügbar

Das suchen wir:

Design von Jonny Czar

Grundsätzlich kann dies mit einer HorizontalScrollView und einer CustomView mit unterschiedlichen Bildern und Texten erreicht werden:

Lassen Sie uns zunächst unser benutzerdefiniertes Layout erstellen: Dieses wird als "benefit_view.xml" bezeichnet

Beachten Sie, dass ich die Android: ID für beide Komponenten erstellt habe, deren Inhalt ich ändern möchte.

Tipp: Verwenden Sie tools: text und tools: src, um eine Vorschau Ihrer Ansichten anzuzeigen.

Jetzt müssen wir eine Datei mit dem Namen attrs.xml in den Werten erstellen. Wenn Sie bereits einen haben, überspringen Sie die Erstellung.

Fügen Sie nun einfach die Tags

  1. Es wird empfohlen, den Namen der deklarierbaren Ansicht mit der benutzerdefinierten Ansicht identisch zu halten. In diesem Fall rufe ich mein customView BenefitView auf
  2. Erstellen Sie die attr-Tags für die gewünschten benutzerdefinierten Parameter.
  3. Wenn Sie andere Formate kennen möchten, die Sie als Parameter erhalten können, überprüfen Sie diese Antwort unter StackOverflow

Jetzt können wir unsere BenefitView.kt erstellen

  1. Der Konstruktor erhält zwei Argumente, Context und AttributeSet. Und es sollte eine vorhandene Ansicht erweitern, z. B. LinearLayout oder RelativeLayout. Wenn Sie den EditText oder einen Button anpassen möchten, können Sie diese auch erweitern.
  2. Das Init-Tag wird nach der Instanziierung des Objekts in Kotlin automatisch ausgeführt
  3. Wir werden die Referenz der von uns angegebenen Elemente erhalten.
  4. Wir setzen die Variablenattribute mit dem Stil, den wir in attrs.xml erstellt haben
  5. Wir setzen die Bild- und Textwerte, indem wir sie mit dieser Notation erhalten: R.styleable.BenefitView_image und R.styleable.BenefitView_text
  6. Vergessen Sie nicht, die Attribute zu recyceln, es ist für die Android-Speicherverwaltung notwendig.

Wir sind fast fertig. Jetzt müssen wir nur noch unsere CustomViews verwenden. Wenn es zunächst nicht angezeigt wird, bereinigen Sie das Projekt und erstellen Sie es neu.

So nutzen wir unser BenefitView

Dies ist der Namespace Ihres Projekts, bis sich der Ordner befindet, in dem sich Ihre CustomView befindet.

Sie können weiterhin Parameter wie Breite und Höhe verwenden, da dadurch eine Android-Ansicht erweitert wird.

Beachten Sie, dass Sie zum Verwenden der benutzerdefinierten Attribute diese Zeile zum Stammlayoutelement hinzufügen müssen:

xmlns: app = "http://schemas.android.com/apk/res-auto

Verwenden Sie dann diese Präfix-App vor dem benutzerdefinierten Attribut. Hier ist das Beispiel für die Verwendung.

Denken Sie daran: Wenn es zuerst nicht angezeigt wird, bereinigen Sie das Projekt und erstellen Sie es neu.

Code auf meinem Github verfügbar

Wenn es Ihnen gefällt, zeigen Sie bitte Ihre Unterstützung, indem Sie auf das unten stehende Klatschsymbol klicken und es mit Ihren Freunden teilen :) Danke!

Aktualisieren:

Einige Leute hinterließen Kommentare zu dem Artikel, in denen behauptet wurde, ich hätte das Zusammenführungs-Tag verwenden können, um die Anzahl der Layouts zu verringern. Aufgrund einiger Tatsachen konnte ich es jedoch nicht verwenden:

Das Root-Tag dieser benutzerdefinierten Ansicht hat einen darstellbaren Hintergrund und eine definierte Breite. Ich habe einen Weg gefunden, diese Probleme zu lösen:

  • Hintergrund: Legen Sie es programmgesteuert bei der Initialisierung der Ansicht fest: setBackgroundResource (...) und legen Sie das Auffüllen auch programmgesteuert fest.
  • Breite: Stellen Sie sie bei jeder Verwendung von BenefitView manuell ein

Das Zusammenführungs-Tag ist in der Tat nützlich, aber in Fällen, in denen das übergeordnete Tag einfacher ist. Meiner Meinung nach ist das ein Kompromiss, den ich nicht eingehen möchte. Die heutigen Telefone sind nicht mehr die gleichen wie früher, und sie sind viel leistungsfähiger. Heutzutage haben wir ConstraintLayout, mit dessen Hilfe wir bereits die Tiefe unserer Layouts reduzieren können. Daher ziehe ich es vor, das LinearLayout als Stamm-Tag meiner benutzerdefinierten Ansicht beizubehalten, wenn eine bestimmte Anpassungsstufe erforderlich ist :)

Ich lade Sie ein, mein Repo zu teilen und in den Kommentaren zu posten, wenn Sie eine bessere Möglichkeit finden, dies mit dem Merge-Tag zu tun.