Tutorials  /  JavaScript

Effektive Android UI-Gestaltung: Die Bedeutung von LinearLayout und RelativeLayout

Ccentron Redaktion · September 2024 ·3 Min. Lesezeit ·JavaScript, Tutorial

Entdecken Sie in unserem neuesten Blogbeitrag die Grundlagen der Android-Benutzeroberflächengestaltung mit einem Schwerpunkt auf LinearLayout und RelativeLayout. Erfahren Sie, wie diese Layouts in Android-Apps verwendet werden und welche Attribute sie steuern.

Android Layout - Grundlagen

Zunächst einmal besteht die Benutzeroberfläche aus View-Objekten, die rechteckige Bereiche auf dem Bildschirm einnehmen. Diese Views, wie z.B. TextView oder Button, sind Instanzen der Klasse View. ViewGroup ist eine Unterklasse von View, mit der Views gruppiert werden können. Ein ViewGroup definiert dabei das Layout, in dem die Views angeordnet werden. Beispiele für ViewGroup sind LinearLayout, FrameLayout und RelativeLayout.

VM

Passende Infrastruktur bei centron

Node-Anwendungen wollen deployt werden: ccloud³ VMs mit vollem Root-Zugriff ab 3,12 € im Monat – oder gleich als Managed Server, wenn der Betrieb nicht bei Ihnen liegen soll. Cloud Server mieten →

Android Layout-Typen

Android bietet verschiedene Layout-Typen, darunter:

  • LinearLayout: Ordnet alle Kinder in eine einzige Richtung an, vertikal oder horizontal.
  • RelativeLayout: Positioniert die Kind-Views relativ zueinander oder zum Elternelement.
  • AbsoluteLayout: Ermöglicht die genaue Positionierung von Kind-Views.
  • TableLayout: Gruppiert Kind-Views in Zeilen und Spalten.
  • FrameLayout: Ein Platzhalter auf dem Bildschirm für die Anzeige einer einzelnen Ansicht.
  • ScrollView: Ermöglicht das Scrollen durch eine Liste von Ansichten.
  • ListView: Zeigt eine scrollbare Liste von Elementen an.
  • GridView: Zeigt Elemente in einem zweidimensionalen scrollbaren Raster an.

In diesem Beitrag konzentrieren wir uns auf die beiden häufig verwendeten Layouts: LinearLayout und RelativeLayout.

Android Layout-Attribute

Die Layouts in Android werden mithilfe von Attributen gesteuert, darunter:

  • android:id: Eindeutige ID zur Identifizierung der Ansicht.
  • android:layout_width: Breite des Layouts.
  • android:layout_height: Höhe des Layouts.
  • android:layout_margin: Zusätzlicher Abstand außerhalb der Ansicht.
  • android:layout_padding: Zusätzlicher Abstand innerhalb der Ansicht.
  • android:layout_gravity: Positionierung der Kind-Views.
  • android:layout_weight: Verteilung des zusätzlichen Platzes im Layout.
  • android:layout_x und android:layout_y: Koordinaten des Layouts.

Android LinearLayout

LinearLayout organisiert Elemente entlang einer einzigen Linie, die vertikal oder horizontal sein kann. Durch das Attribut android:orientation wird die Ausrichtung festgelegt. Hier ein Beispiel-Layout mit LinearLayout:

Code
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:id="@+id/backbutton"
        android:text="Back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 2"
        android:layout_width="wrap_content"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_height="wrap_content" />
    <!-- Weitere Kind-Views -->
</LinearLayout>

Android RelativeLayout

RelativeLayout positioniert Elemente relativ zueinander oder zum Elternelement. Dabei können verschiedene Attribute wie android:layout_alignParentBottom oder android:layout_toRightOf verwendet werden. Hier ein Beispiel-Layout mit RelativeLayout:

Code
<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="https://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/backbutton"
        android:text="Back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/firstName"
        android:text="First Name"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/backbutton" />
    <!-- Weitere Kind-Views -->
</RelativeLayout>

Fazit

Die Wahl des richtigen Layouts ist entscheidend für die Gestaltung einer benutzerfreundlichen und ansprechenden Android-App. LinearLayout und RelativeLayout bieten unterschiedliche Ansätze zur Organisation von Benutzeroberflächenelementen. Mit diesem Beitrag haben Sie einen kompakten Überblick über die Android-Layouts LinearLayout und RelativeLayout erhalten. Diese sind grundlegend für die Gestaltung von Android-Apps und bieten verschiedene Möglichkeiten zur Anordnung von Ansichtselementen.

Jetzt 200 € Guthaben sichern

Testen Sie Ihr Setup auf ccloud³

Registrieren Sie sich in der ccloud³ und erhalten Sie 200 € Startguthaben für Ihr Projekt – z. B. für eine PostgreSQL-VM mit automatischen Backups.

centron Redaktion Technische Redaktion

Das Redaktionsteam von centron schreibt Anleitungen aus dem Betriebsalltag: getestet auf unserer eigenen Plattform, betrieben im Rechenzentrum in Hallstadt bei Bamberg.

Kategorie JavaScript
Teilen
Noch offene Fragen?

Our team will help you with your specific setup - in German or English, by people who run the platform themselves.

War dieses Tutorial hilfreich?

Your answer is stored anonymously and helps us improve our tutorials.

Kommentare

No comments yet - be the first to ask a question about this tutorial.

Sign in to comment

Comments are open to centron customers. Sign in to your account to ask a question about this tutorial.

Weiterlesen

Das könnte Sie auch interessieren

Jetzt kostenlos anfangen

Melden Sie sich an und erhalten Sie in den ersten 60 Tagen ein Guthaben von 200 € bei centron.

Dieses Werbeangebot gilt nur für neue Konten. Angebot ausschließlich für Gewerbetreibende.

Jetzt loslegen Sales kontaktieren