Hogyan szervezhető a munka szöveggel és képekkel a delegáltban?

Szövegkezeléshez különböző UI-komponenseket használhatunk, mint például TextView, EditText és Button. A szöveg formázása HTML vagy Spannable objektumok segítségével történik.

Képek kezeléséhez az ImageView használatos. A képek betöltése aszinkron módon történhet Glide, Coil vagy Picasso könyvtárak segítségével, amelyek cache-elést és optimalizálást biztosítanak.

Az adatok (szöveg és/vagy képek) kötése a UI-elemekhez általában a Model-View-ViewModel (MVVM) mintán keresztül valósul meg, ahol a delegate a View szerepét tölti be, a ViewModel pedig az adatokat szolgáltatja.

XML-ben például így néz ki a TextView és ImageView használata:

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

    <TextView  
        android:id="@+id/textViewTitle"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="Példa cím"  
        android:textSize="18sp"  
        android:textStyle="bold"/>

    <ImageView  
        android:id="@+id/imageViewContent"  
        android:layout_width="match_parent"  
        android:layout_height="200dp"  
        android:scaleType="centerCrop"  
        android:src="@drawable/placeholder_image"/> <!-- Kép helyőrző -->

    <TextView  
        android:id="@+id/textViewContent"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:text="Példa szöveg"  
        android:layout_marginTop="8dp"/>

</LinearLayout>

A kódban a delegate logikája összekapcsolja az adatokat ezekkel az elemekkel. Például a RecyclerView adapterben a onBindViewHolder metódusban:

// Az adapterben
override fun onBindViewHolder(holder: ViewHolder, position: Int) {  
    val item = dataList[position] // Adat elem lekérése

    holder.textViewTitle.text = item.title  
    holder.textViewContent.text = item.content

    // Kép betöltése Glide segítségével
    Glide.with(holder.imageViewContent.context)  
        .load(item.imageUrl)  
        .placeholder(R.drawable.placeholder_image) // Helyőrző kép  
        .error(R.drawable.error_image) // Hibaképernyő kép  
        .into(holder.imageViewContent)  
}

Főbb pontok:

• Minta: XML-t használjunk a layout leírására.
• Adat kötés: Programozottan kötjük össze a modell adatait a UI elemekkel.
• Aszinkron betöltés: Képek esetén alkalmazzunk aszinkron betöltő könyvtárakat.
• Optimalizálás: Képek cache-elése és a View újrahasznosítása.
• Kattintáskezelés: Hozzáadhatunk OnClickListener-eket a UI elemekhez szükség szerint.

Az UI elemek és az adat típusok közötti megfeleltetés táblázata:

UI elem	Adat típus	Használati példa
TextView	String	Szöveg, címek, leírások megjelenítése.
EditText	String	Felhasználói szövegbevitel.
Button	String	Gomb szövege.
ImageView	Bitmap, Drawable, String (URL)	Képek megjelenítése.