21 Layout Elemente und GUI Elemente

In Android werden Layout-Elemente und GUI-Elemente genutzt, um die Benutzeroberfläche einer Anwendung zu gestalten. Diese Elemente werden in XML definiert und zur Laufzeit von der Anwendung geladen und angezeigt.

21.1 Layout Elemente

Layout-Elemente dienen als Container für andere UI-Elemente. Sie definieren die Struktur der Benutzeroberfläche und legen fest, wie enthaltene UI-Elemente angeordnet und präsentiert werden. Hier sind einige wesentliche Layout-Elemente in Android:

• LinearLayout: Organisiert seine Kinder linear in einer einzigen Richtung, horizontal oder vertikal.
• RelativeLayout: Ermöglicht die Positionierung seiner Kinder relativ zueinander oder zum Elternelement.
• FrameLayout: Ein einfacher Container, der seine Kinder übereinander stapelt.
• GridLayout: Ordnet seine Kinder in einem Raster aus Zellen an.
• ConstraintLayout: Ermöglicht komplexe Layouts durch Definition von Einschränkungen zwischen Elementen.

21.2 GUI Elemente

GUI-Elemente, auch bekannt als Widgets, sind interaktive Komponenten innerhalb der Layouts. Beispiele für GUI-Elemente sind:

• TextView: Zeigt Text an.
• EditText: Ermöglicht Texteingabe.
• Button: Ermöglicht Aktionen bei Klicks.
• ImageView: Zeigt Bilder an.
• CheckBox: Ermöglicht Auswahl/Auswahl aufheben.
• RadioButton und RadioGroup: Ermöglichen die Auswahl einer Option aus mehreren.
• Spinner: Bietet ein Dropdown-Menü zur Auswahl.

Diese Elemente besitzen verschiedene Attribute und Methoden zur Anpassung von Aussehen und Verhalten sowie Event Listener für die Reaktion auf Benutzerinteraktionen.

Beispiel eines einfachen Layouts mit TextView, Button und EditText in einem LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click me" />

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Type something here" />

</LinearLayout>

In Kotlin könnte der zugehörige Code in einer Activity aussehen wie folgt:

class MainActivity : AppCompatActivity() {

    private lateinit var button: Button
    private lateinit var editText: EditText
    private lateinit var textView: TextView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button = findViewById(R.id.button1)
        editText = findViewById(R.id.editText1)
        textView = findViewById(R.id.textView1)

        button.setOnClickListener {
            val input = editText.text.toString()
            textView.text = input
            editText.text.clear()
        }
    }
}

In diesem Beispiel wird ein OnClickListener für den Button gesetzt, der den Text aus dem EditText liest, ihn im TextView anzeigt und den EditText für eine neue Eingabe leert.