Tugas Minggu 8 PPB I

Nama    : Tegar Ganang Satrio Priambodo

NRP       : 5025201002

Kelas     : PPB I

Membuat Komponen Image Scroll

Pada tugas pertemuan 8 ini akan membuat implementasi tampilan komponen image scroll yang berisi gambar dan kata kata afirmasi dengan referensi berikut

Pertama tama kita load starter project pada branch starter di github dalam bentuk ZIP yang di ekstrak. Selanjutnya load project pada android studio. Setelah semua resource sudah siap selanjutnya kita akan membuat class dataitem

• Membuat class dataitem

1. Buat class data affirmation
   Klik kanan com.example.affirmation pilih new>package>model. 
2. Buat class affirmation
   Klik kanan package model lalu pilih new>Kotlin class/file>Data Class. Tambahkan kode sumber berikut
   
   

   	package com.example.affirmations.model
   	import androidx.annotation.DrawableRes
   	import androidx.annotation.StringRes
   	data class Affirmation(
   	@StringRes val stringResourceId: Int,
   	@DrawableRes val imageResourceId: Int
   	)

   view raw Affitmation.kt hosted with ❤ by GitHub
3. Hapus tanda komen pada sumber kode Datasource.kt
   
   

   	package com.example.affirmations.data
   	import com.example.affirmations.R
   	import com.example.affirmations.model.Affirmation
   	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))
   	}
   	}

   view raw Datasource.kt hosted with ❤ by GitHub

   	<resources>
   	<string name="app_name">Affirmations</string>
   	<string name="affirmation1">I am strong.</string>
   	<string name="affirmation2">I believe in myself.</string>
   	<string name="affirmation3">Each day is a new opportunity to grow and be a better version of myself.</string>
   	<string name="affirmation4">Every challenge in my life is an opportunity to learn from.</string>
   	<string name="affirmation5">I have so much to be grateful for.</string>
   	<string name="affirmation6">Good things are always coming into my life.</string>
   	<string name="affirmation7">New opportunities await me at every turn.</string>
   	<string name="affirmation8">I have the courage to follow my heart.</string>
   	<string name="affirmation9">Things will unfold at precisely the right time.</string>
   	<string name="affirmation10">I will be present in all the moments that this day brings.</string>
   	</resources>

   view raw strings.xml hosted with ❤ by GitHub

• Menambahkan daftar affirmation card

1. Buat AffirmationCard
   
   

   	@Composable
   	fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) {
   	Card(modifier = modifier) {
   	Column {
   	Image(
   	painter = painterResource(affirmation.imageResourceId),
   	contentDescription = stringResource(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
   	)
   	}
   	}
   	}

   view raw MainActivity.kt hosted with ❤ by GitHub
2. Buat preview card
   
   

   	@Preview
   	@Composable
   	private fun AffirmationCardPreview() {
   	AffirmationCard(Affirmation(R.string.affirmation1, R.drawable.image1))
   	}

   view raw MainActivity.kt hosted with ❤ by GitHub
3. Buat list card
   
   

   	@Composable
   	fun AffirmationList(affirmationList: List<Affirmation>, modifier: Modifier = Modifier) {
   	LazyColumn(modifier = modifier) {
   	items(affirmationList) { affirmation ->
   	AffirmationCard(
   	affirmation = affirmation,
   	modifier = Modifier.padding(8.dp)
   	)
   	}
   	}
   	}

   view raw MainActivity.kt hosted with ❤ by GitHub
4. Tampilan hasil list pada aplikasi

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

   view raw MainActivity.kt hosted with ❤ by GitHub