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

Construcció d'Interfícies d'Usuari

Següent ►
►

En aquest tema, aprendrem a construir interfícies d'usuari (UI) per a aplicacions Android utilitzant Kotlin. Ens centrarem en els conceptes bàsics de la creació de layouts, la utilització de components d'UI i la manipulació d'aquests components des del codi Kotlin.

Objectius

  • Entendre els conceptes bàsics de la creació de layouts en Android.
  • Aprendre a utilitzar els components d'UI més comuns.
  • Manipular els components d'UI des del codi Kotlin.

  1. Introducció als Layouts en Android

1.1. Tipus de Layouts

Els layouts són contenidors que defineixen l'estructura de la interfície d'usuari en una aplicació Android. Els tipus de layouts més comuns són:

  • LinearLayout: Organitza els seus fills en una única columna o fila.
  • RelativeLayout: Permet posicionar els seus fills en relació amb altres elements o amb el contenidor pare.
  • ConstraintLayout: Proporciona un sistema de posicionament més flexible i potent.

1.2. Creació d'un Layout

Els layouts es defineixen en fitxers XML dins del directori res/layout. A continuació, es mostra un exemple d'un fitxer XML que defineix un LinearLayout amb dos TextView:

<!-- res/layout/activity_main.xml -->
<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!" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to Kotlin!" />
</LinearLayout>

  1. Components d'UI Comuns

2.1. TextView

El TextView és un component d'UI que mostra text a la pantalla. Es pot personalitzar amb diferents atributs com ara textSize, textColor, gravity, etc.

2.2. Button

El Button és un component d'UI que permet als usuaris interactuar amb l'aplicació mitjançant clics.

2.3. EditText

L'EditText és un component d'UI que permet als usuaris introduir text.

2.4. ImageView

L'ImageView és un component d'UI que mostra imatges a la pantalla.

Exemple de Components d'UI

A continuació, es mostra un exemple d'un layout que utilitza diversos components d'UI:

<!-- res/layout/activity_main.xml -->
<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="Enter your name:" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />

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

  1. Manipulació de Components d'UI des de Kotlin

3.1. Accés als Components d'UI

Per accedir als components d'UI des del codi Kotlin, utilitzem els seus identificadors (id). A continuació, es mostra un exemple de com accedir i manipular un TextView i un Button:

// MainActivity.kt
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

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

        val textView: TextView = findViewById(R.id.textView)
        val editText: EditText = findViewById(R.id.editText)
        val button: Button = findViewById(R.id.button)

        button.setOnClickListener {
            val enteredText = editText.text.toString()
            textView.text = "Hello, $enteredText!"
        }
    }
}

3.2. Exemple Pràctic

En aquest exemple pràctic, crearem una aplicació que permet als usuaris introduir el seu nom i mostrarà un missatge de benvinguda quan es faci clic al botó.

Pas 1: Definir el Layout

Crea un fitxer XML anomenat activity_main.xml dins del directori res/layout amb el següent contingut:

<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="Enter your name:" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />
</LinearLayout>

Pas 2: Escriure el Codi Kotlin

Crea un fitxer Kotlin anomenat MainActivity.kt dins del directori src/main/java/com/example/yourapp amb el següent contingut:

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

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

        val textView: TextView = findViewById(R.id.textView)
        val editText: EditText = findViewById(R.id.editText)
        val button: Button = findViewById(R.id.button)

        button.setOnClickListener {
            val enteredText = editText.text.toString()
            textView.text = "Hello, $enteredText!"
        }
    }
}

Exercicis Pràctics

Exercici 1: Afegir un ImageView

Modifica l'exemple anterior per afegir un ImageView que mostri una imatge quan es faci clic al botó.

Solució:

  1. Afegeix un ImageView al fitxer activity_main.xml:
<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_foreground"
    android:visibility="gone" />
  1. Modifica el fitxer MainActivity.kt per mostrar la imatge quan es faci clic al botó:
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

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

        val textView: TextView = findViewById(R.id.textView)
        val editText: EditText = findViewById(R.id.editText)
        val button: Button = findViewById(R.id.button)
        val imageView: ImageView = findViewById(R.id.imageView)

        button.setOnClickListener {
            val enteredText = editText.text.toString()
            textView.text = "Hello, $enteredText!"
            imageView.visibility = ImageView.VISIBLE
        }
    }
}

Exercici 2: Canviar el Color del Text

Modifica l'exemple per canviar el color del text del TextView a vermell quan es faci clic al botó.

Solució:

  1. Modifica el fitxer MainActivity.kt per canviar el color del text:
import android.graphics.Color
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

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

        val textView: TextView = findViewById(R.id.textView)
        val editText: EditText = findViewById(R.id.editText)
        val button: Button = findViewById(R.id.button)

        button.setOnClickListener {
            val enteredText = editText.text.toString()
            textView.text = "Hello, $enteredText!"
            textView.setTextColor(Color.RED)
        }
    }
}

Conclusió

En aquesta secció, hem après a construir interfícies d'usuari en Android utilitzant Kotlin. Hem explorat els diferents tipus de layouts, els components d'UI més comuns i com manipular aquests components des del codi Kotlin. A més, hem realitzat exercicis pràctics per reforçar els conceptes apresos. En la següent secció, explorarem com gestionar l'entrada de l'usuari en les nostres aplicacions Android.

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