Image Scroll

 Membuat Komponen Image Scroll

Kita akan membuat aplikasi dengan tampilan komponen image scroll seperti card dengan isi gambar. Yuk kita mulai dengan mengikuti tutorial referensi ini.

Load projek starter

pada github ini download file pada branch starter dalam bentuk ZIP. Setelah terdownload, ekstrak. Pada android studio kita akan membuka projek dengan open dan mengarahkan ke folder hasil ekstraksi tadi. Dalam membuka projek memang memakan waktu yang cukup lama, jadi harap sabar. Ketika selesai load, maka coba run program, maka akan memiliki tampilan sebagai berikut:

Membuat class data item daftar

1. Membuat class data untuk affirmation

klik kanan pada folder com.example.affirmation pilin new, lalu package dan beri nama model. package ini akan berisi class data.

2. Membuat class affirmation

klik kanan pada package model lalu pilih new, lalu Kotlin class/File, lalu pilih Data Class. Beri nama Affirmation. Ubah sumber kode menjadi seperti 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 Affirmation.kt hosted with ❤ by GitHub

3. Aktifkan sumber kode Datasource.kt pada folder data di com.example.affirmation

Hapus komen pada sumber kode yang sudah ada pada Datasource.kt, sehingga menjadi seperti berikut:

	/*
	* Copyright (C) 2023 The Android Open Source Project
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* https://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*/
	package com.example.affirmations.data
	import com.example.affirmations.R
	import com.example.affirmations.model.Affirmation
	/**
	* [Datasource] generates a list of [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

Menambahkan daftar ke aplikasi 

1. Membuat AffirmationCard untuk card per gambar

Tambahkan method AffirmationCard, dimana kita menggunakan fungsi Card berisi Column dengan konten pada Column berupa Gambar dan Text. 

	@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. Membuat preview untuk card

Untuk menampilkan previes dari card yang sudah kita buat, kita dapat mendefinisikan method jenis preview sebagai berikut:

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

view raw MainActivity.kt hosted with ❤ by GitHub

3. Membuat list card

Tambahkan method AffirmationList untuk merangkai beberapa card gambar menjadi satu, di sini kita menggunakan fungsi LaztColumn dan items, serta memanfaatkan method AffirmationCard yang sudah kita definisikan sebelumnya.

	@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. Manampilkan hasil list card pada aplikasi

Modifikasi method AffirmationApp jadi seperti ini:

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

view raw MainActivity.kt hosted with ❤ by GitHub

Hasil Aplikasi