Tugas 6 (Pertemuan ke 8): Membuat Image Scroll dengan menggunakan Desain Material

Oleh Arya Widia Putra / 5025201016

Membuat Image Scroll dengan menggunakan Desain Material

Fungsi scrolling adalah salah satu fungsi esensial yang patut dipahami saat membuat aplikasi Android. Ketika aplikasi terdiri dari banyak item yang tidak dapat dimuat dalam satu layar secara langsung, layar tersebut sebaiknya bisa discroll untuk dapat menunjukkan keseluruhan item. Dalam proyek ini, saya membuat aplikasi afirmasi dengan fitur image scroll untuk memahami penggunaan fungsi scroll pada pembuatan aplikasi Android.

1. Dokumentasi

  • Programming language (bahasa): Kotlin (Android Studio dan Jetpack Compose)
  • Goal (tujuan): Membuat Image Scroll menggunakan desain Material, studi kasus aplikasi afirmasi
  • Full code (kode): https://github.com/aryawidiap/AffirmationApp

Penjelasan kode

  1. Fungsi AffirmationCard

    Fungsi AffirmationCard digunakan untuk merancang tata letak item card untuk setiap gambar dan kalimat afirmasi.

    @Composable
fun AffirmationCard(
    affirmation: Affirmation,
    modifier: Modifier = Modifier
) {
     Card(
         modifier = modifier.fillMaxWidth(),
         shape = RoundedCornerShape(15.dp),
     ) {
         Column {
             Image(
                 painter = painterResource(id = affirmation.imageResourceId),
                 contentDescription = stringResource(id = affirmation.stringResourceId),
                 modifier = Modifier
                     .fillMaxWidth()
                     .height(194.dp),
                 contentScale = ContentScale.Crop
             )
             Text(
                 text = LocalContext.current.getString(affirmation.stringResourceId),
                 modifier = Modifier.padding(16.dp),
                 style = MaterialTheme.typography.headlineSmall
             )
         }
     }
}

  2. Fungsi AffirmationList

    Fungsi composable ini digunakan untuk menampilkan semua frasa-frasa afirmasi dan gambarnya dengan menggunakan fungsi items. Saya juga menambahkan text "Affirmations" untuk memberikan judul pada halaman aplikasi. Kedua elemen ini dibungkus dalam composable LazyColumn. LazyColumn adalah fungsi composable yang mirip dengan Column, tetapi dapat digulirkan/scrollable. 

    @Composable
fun AffirmationList(
    affirmationList: List<Affirmation>,
    modifier: Modifier = Modifier
) {

    LazyColumn(modifier = modifier) {
        item {
            Text(
                text = "Affirmations",
                modifier = Modifier.padding(16.dp),
                style = MaterialTheme.typography.displayMedium
            )
        }
        items(affirmationList) {affirmation ->
            AffirmationCard(
                affirmation = affirmation,
                modifier = Modifier.padding(8.dp)
            )
        }
    }
}

  3. Data Class Affirmation

    Data class Affirmation berfungsi sebagai struktur data untuk menyimpan informasi dari satu item afirmasi. Satu instance data class Affirmation berisi reference ke salah satu frasa afirmasi yang disimpan dalam strings.xml dan reference ke satu gambar yang bersesuaian dengan frasa tersebut.

    data class Affirmation(
    @StringRes val stringResourceId: Int,
    @DrawableRes val imageResourceId: Int
)

  4. Class Datasource dan Method loadAffirmations

    Class Datasource digunakan untuk menyimpan data untuk aplikasi. Method loadAffirmations akan membuat list object Affirmation yang sudah diinisiasi dengan frasa afirmasi dan gambarnya.

    class Datasource() {
    fun loadAffirmations(): List<Affirmation> {
        return listOf<Affirmation>(
            Affirmation(R.string.affirmation1, R.drawable.image1),
            Affirmation(R.string.affirmation2, R.drawable.image2),
            Affirmation(R.string.affirmation3, R.drawable.image3),
            Affirmation(R.string.affirmation4, R.drawable.image4),
            Affirmation(R.string.affirmation5, R.drawable.image5),
            Affirmation(R.string.affirmation6, R.drawable.image6),
            Affirmation(R.string.affirmation7, R.drawable.image7),
            Affirmation(R.string.affirmation8, R.drawable.image8),
            Affirmation(R.string.affirmation9, R.drawable.image9),
            Affirmation(R.string.affirmation10, R.drawable.image10),
        )
    }
}

  5. Fungsi AffirmationsApp

    Fungsi AffirmationsApp adalah fungsi untuk meneruskan frasa-frasa afirmasi dan gambarnya ke fungsi AffirmationList. 
    Fungsi ini nantinya akan dipanggil oleh fungsi utama onCreate.

    @Preview
@Composable
fun AffirmationsApp() {
    AffirmationList(affirmationList = Datasource().loadAffirmations(),)
}

2. Tampilan UI

Gambar 1. Tampilan awal untuk aplikasi afirmasi


Gambar 2. Tampilan aplikasi afirmasi setelah dilakukan scrolling



3. Video Demonstrasi

Comments

Post a Comment

Popular Posts