El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Components Bàsics de la Interfície d'Usuari

Següent ►
►

En aquest tema, explorarem els components bàsics de la interfície d'usuari (UI) en Android. Aquests components són fonamentals per crear aplicacions atractives i funcionals. Aprendrem a utilitzar els components més comuns com TextView, EditText, Button, ImageView, i altres elements essencials per construir la interfície d'usuari de la teva aplicació.

Objectius d'Aprenentatge

  • Comprendre els components bàsics de la UI en Android.
  • Aprendre a utilitzar TextView, EditText, Button, i ImageView.
  • Crear una interfície d'usuari simple utilitzant aquests components.

Components Bàsics

  1. TextView

El component TextView s'utilitza per mostrar text a la pantalla.

Exemple de codi:

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hola, Android!"
    android:textSize="18sp"
    android:layout_margin="16dp"/>

Explicació:

  • android:id: Identificador únic per al component.
  • android:layout_width i android:layout_height: Defineixen l'amplada i l'alçada del component.
  • android:text: El text que es mostrarà.
  • android:textSize: La mida del text.
  • android:layout_margin: El marge al voltant del component.

  1. EditText

El component EditText permet a l'usuari introduir text.

Exemple de codi:

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Escriu aquí"
    android:inputType="text"
    android:layout_margin="16dp"/>

Explicació:

  • android:hint: Text que es mostra quan el camp està buit.
  • android:inputType: Defineix el tipus d'entrada (text, número, correu electrònic, etc.).

  1. Button

El component Button s'utilitza per crear botons que l'usuari pot prémer.

Exemple de codi:

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Prem aquí"
    android:layout_margin="16dp"/>

Explicació:

  • android:text: El text que es mostrarà al botó.

  1. ImageView

El component ImageView s'utilitza per mostrar imatges.

Exemple de codi:

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_foreground"
    android:layout_margin="16dp"/>

Explicació:

  • android:src: La imatge que es mostrarà. Aquesta imatge ha d'estar a la carpeta res/drawable.

Exemple Pràctic: Creació d'una Interfície Simple

A continuació, crearem una interfície d'usuari simple que inclou un TextView, un EditText, un Button, i un ImageView.

Exemple de codi complet:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hola, Android!"
        android:textSize="18sp"
        android:layout_marginBottom="16dp"/>

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Escriu aquí"
        android:inputType="text"
        android:layout_marginBottom="16dp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Prem aquí"
        android:layout_marginBottom="16dp"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_foreground"/>
</LinearLayout>

Exercici Pràctic

Objectiu: Crear una interfície d'usuari que inclogui un TextView, un EditText, un Button, i un ImageView.

Instruccions:

  1. Crea un nou projecte a Android Studio.
  2. Afegeix un TextView amb el text "Benvingut a la meva aplicació".
  3. Afegeix un EditText amb el suggeriment "Introdueix el teu nom".
  4. Afegeix un Button amb el text "Enviar".
  5. Afegeix un ImageView amb una imatge de la carpeta drawable.

Solució:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Benvingut a la meva aplicació"
        android:textSize="18sp"
        android:layout_marginBottom="16dp"/>

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Introdueix el teu nom"
        android:inputType="text"
        android:layout_marginBottom="16dp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enviar"
        android:layout_marginBottom="16dp"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher_foreground"/>
</LinearLayout>

Resum

En aquest tema, hem après sobre els components bàsics de la interfície d'usuari en Android, incloent TextView, EditText, Button, i ImageView. Aquests components són essencials per crear interfícies d'usuari atractives i funcionals. Hem creat una interfície simple utilitzant aquests components i hem practicat amb un exercici pràctic.

En el següent tema, explorarem les activitats en Android, que són una part fonamental de qualsevol aplicació Android.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats