Tugas 6 (Pertemuan ke 8): Membuat Image Scroll dengan menggunakan Desain Material
Oleh Arya Widia Putra / 5025201016
Membuat Image Scroll dengan menggunakan Desain Material
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
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 ) } } }
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) ) } } }
-
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 )
-
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), ) } }
-
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
Comments
Post a Comment