13 Layout Elemente und GUI Elemente

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

13.1 Layout Elemente

Layout-Elemente sind Container, die andere UI-Elemente enthalten und organisieren. Sie definieren die Struktur der Benutzeroberfläche und bestimmen, wie die darin enthaltenen UI-Elemente angeordnet und dargestellt werden. Hier sind einige der wichtigsten Layout-Elemente in Android:

13.2 GUI Elemente

GUI-Elemente, auch als Widgets bekannt, sind die Komponenten, mit denen der Benutzer interagiert. Sie werden in den Layout-Elementen platziert und können Dinge wie Text, Bilder, Knöpfe, Checkboxes, Eingabefelder usw. darstellen. Hier sind einige der wichtigsten GUI-Elemente in Android:

Alle diese Elemente haben verschiedene Attribute und Methoden, mit denen Sie ihr Aussehen und Verhalten anpassen können. Sie können auch Event Listener zu diesen Elementen hinzufügen, um auf Benutzerinteraktionen zu reagieren, wie zum Beispiel Klicks oder Textänderungen.

Lassen Sie uns einen einfachen Fall betrachten, in dem wir ein TextView, einen Button und ein EditText in einem LinearLayout haben. Das zugehörige XML wäre in Ihrer res/layout-Datei, oft als activity_main.xml:

<?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 diesem XML definieren wir ein LinearLayout, das andere View-Elemente enthält. LinearLayout legt seine Kind-Views in einer einzelnen Spalte oder Zeile aus, je nachdem, ob die android:orientation auf “vertical” oder “horizontal” gesetzt ist.

Innerhalb dieses LinearLayout haben wir ein TextView, das zum Anzeigen von Text verwendet wird, einen Button, der zum Auslösen von Aktionen verwendet wird, und ein EditText, das zum Eingeben von Text verwendet wird.

Sie können auf diese Views in Ihrer Java- oder Kotlin-Aktivität zugreifen, um ihnen Verhalten zu geben. Zum Beispiel:

public class MainActivity extends AppCompatActivity {

    Button button;
    EditText editText;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        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(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String input = editText.getText().toString();
                textView.setText(input);
                editText.setText("");
            }
        });
    }
}

In diesem Code setzen wir einen OnClickListener auf den Button, der den Text aus dem EditText nimmt und ihn im TextView anzeigt, wenn der Button geklickt wird. Dann setzt es den EditText auf einen leeren String.