PPB G - Pertemuan 11

 Nama: Moh. rosy haqqy aminy

NRP: 5025211012

Kelas: PPB G

Membuat Scroll App

link github: https://github.com/rosyhaqqy/Tugas_Tugas_PPB/tree/main/img_scroll

Aplikasi ini terdiri dari tiga bagian utama:

1. MainActivity.kt → Entry point aplikasi

2. Datasource.kt → Menyediakan data afirmasi

3. Affirmation.kt → Model data afirmasi

---

MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        setContent {
            AffirmationsTheme {
                Surface(...) {
                    AffirmationsApp()
                }
            }
        }
    }
}

• ComponentActivity: Aktivitas berbasis Jetpack Compose.

• setContent: Tempat kita mulai mendesain UI menggunakan Compose.

• AffirmationsTheme: Menggunakan tema dari aplikasi.

• Surface: Kontainer UI dengan latar belakang dari tema.

---

AffirmationsApp()

@Composable
fun AffirmationsApp() {
    val layoutDirection = LocalLayoutDirection.current
    Surface(
        modifier = Modifier
            .fillMaxSize()
            .statusBarsPadding()
            .padding(...)
    ) {
        AffirmationList(affirmationList = Datasource().loadAffirmations())
    }
}

• Surface: Area UI utama.

• statusBarsPadding(): Memberi padding agar tidak tertutup status bar.

• WindowInsets.safeDrawing: Menyesuaikan padding agar elemen UI tidak berbenturan dengan notch atau status bar.

• Memanggil Datasource() untuk memuat daftar afirmasi, lalu diteruskan ke AffirmationList().

---

AffirmationList()

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

• LazyColumn: Daftar vertikal efisien (hanya memuat item yang tampil di layar).

• items(): Mengiterasi setiap Affirmation dan menampilkannya lewat AffirmationCard().

---

AffirmationCard()

@Composable
fun AffirmationCard(affirmation: Affirmation, modifier: Modifier = Modifier) {
    Card(modifier = modifier) {
        Column {
            Image(...) // menampilkan gambar
            Text(...)  // menampilkan teks afirmasi
        }
    }
}

• Menampilkan satu kartu afirmasi:

  • Image(): Menampilkan gambar dari affirmation.imageResourceId

  • Text(): Menampilkan teks dari affirmation.stringResourceId

  • MaterialTheme.typography.headlineSmall: Mengatur gaya teks agar konsisten dengan tema.

---

Datasource.kt

class Datasource {
    fun loadAffirmations(): List<Affirmation> {
        return listOf(
            Affirmation(R.string.affirmation1, R.drawable.image1),
            ...
        )
    }
}

• Menyediakan daftar Affirmation, tiap item berisi ID untuk string (teks afirmasi) dan ID gambar.

---

Affirmation.kt

data class Affirmation(
    val stringResourceId: Int,
    val imageResourceId: Int
)

• data class: Model data untuk afirmasi. Menyimpan referensi ke string (teks motivasi) dan gambar (image resource).