Image Scroll - Android

 

Nama: Richard Ryan

NRP: 5025211141

Kelas: PPB (G)

Tema: Image Scroll

Link Github :  Github

Penjelasan Kode:

data class ImageItem(val imageResId: Int, val description: String)

val sampleImages = listOf(
    ImageItem(R.drawable.image1, "Pantai saat senja"),
    ImageItem(R.drawable.image2, "Orang mendayung perahu di laut"),
    ImageItem(R.drawable.image3, "Golden Gate"),
    ImageItem(R.drawable.image4, "Gunung di tepi pantai"),
    ImageItem(R.drawable.image5, "Danau")
)

Pertama akan dibuat terlebih dahulu data class untuk menyimpan gambar-gambar yang akan ditampilkan ke sebuah list.

@Composable
fun HomeScreen() {
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(sampleImages) { item ->
            ImageCard(imageItem = item)
        }
    }
}

Kemudian, akan dibuat ImageCard untuk setiap item pada list tersebut.

• Digunakan LazyColumn agar halaman bisa discroll dengan efisien.
• Halaman diberikan padding sebesar 24 dp di keempat sisi.
• Setiap gambar dipisahkan dengan jarak sebesar 16 dp.

@Composable
fun ImageCard(imageItem: ImageItem) {
    Card(
        modifier = Modifier.fillMaxWidth()
    ) {
        Column {
            Image(
                painter = painterResource(id = imageItem.imageResId),
                contentDescription = imageItem.description,
                modifier = Modifier
                    .fillMaxWidth()
                    .aspectRatio(16f / 9f),
                contentScale = ContentScale.Crop
            )
            Text(
                text = imageItem.description,
                fontSize = 16.sp,
                modifier = Modifier.padding(16.dp),
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

Setiap ImageCard terdiri dari sebuah gambar dan teks deskripsi, kedua hal ini akan diambil dari setiap item pada dipassing.

Hasil: