デジタルアート空間を提供するアプリを作ります。

引用ＵＲＬ

必要とする要素はこちら

・作品の画像
・作品に関する情報（タイトル、アーティスト、公開年など）
・その他、アプリをインタラクティブかつ動的にするボタンなどの要素

これに対して低忠実度（ローファイ）デザインを作ります。

画像をまずインポートします。今回使う画像は三つにします。
それぞれにタイトル、説明文、リリース年を付け加えます。

タイトル：art_space_image1_title
説明文:art_space_image1_description
リリース年：art_space_image1_release

これをあと二つの画像分、string.xmlに登録します。

string.xml

<resources>
    <string name="app_name">Art Space App</string>
    <string name="art_space_image1_title">AS Image1 Title</string>
    <string name="art_space_image1_description">Art Space Image1 Description</string>
    <string name="art_space_image1_release">2000</string>
    <string name="art_space_image2_title">AS Image2 Title</string>
    <string name="art_space_image2_description">Art Space Image2 Description</string>
    <string name="art_space_image2_release">2010</string>
    <string name="art_space_image3_title">AS Image3 Title</string>
    <string name="art_space_image3_description">Art Space Image3 Description</string>
    <string name="art_space_image3_release">2020</string>
</resources>

ひとまずの骨格を作成します。

MainActivity.kt

@Preview(showBackground = true)
@Composable
fun ArtSpaceAppPreview() {
    ArtSpaceAppTheme {
        Column {
            ArtDisplay()
            ArtDescription()
            PageTransition()

        }
    }
}


@Composable
fun ArtDisplay(modifier: Modifier=Modifier){
    Image(painter = painterResource(id = R.drawable.art_space_image1),
        contentDescription = null,
        modifier = modifier.fillMaxWidth())
}

@Composable
fun ArtDescription(modifier: Modifier=Modifier){
    Column {
        Text(text = stringResource(
            id = R.string.art_space_image1_title))
        Row {
            Text(text = stringResource(
                id = R.string.art_space_image1_description))
            Text(text = stringResource(
                id = R.string.art_space_image1_release))
        }
    }

}

@Composable
fun PageTransition(modifier: Modifier=Modifier){
    Row {
        Button(onClick = { /*TODO*/ }) {
            Text(text = "Previous")
        }
        Button(onClick = { /*TODO*/ }) {
            Text(text = "Next")
        }
    }

}

かなり不格好ですが、こちらでひとまず行います。

次にボタン操作を作成。

現在のページＩＤをpage_numとしてmutableStateOfに保存。
Nextボタンを押すごとにpage_numが１加わるようにしました。
そして画像の総数である３を超えた時に1に戻るように剰余を使いました。

page_numごとにどの画像にアクセスするのかを設定するためにmapを使用しました。
恐らくもっといい方法があるとは思いますが、今回はこちらを使いました。

mapはnullの可能性があるために使えないとエラーが出たので通常の方法のアクセスではなくgetValueを用いました。

完成品がこちらです。

MainActivity.kt


@Preview(showBackground = true)
@Composable
fun ArtSpaceAppPreview() {
    ArtSpaceAppTheme {
        var page_num:Int by remember { mutableStateOf(1) }
        page_num = PageTransitionNum(page_num)

        val data_map = mutableMapOf(
            1 to mutableMapOf(
                "image" to R.drawable.art_space_image1,
                "title" to R.string.art_space_image1_title,
                "description" to R.string.art_space_image1_description,
                "release" to R.string.art_space_image1_release,
            ),
            2 to mutableMapOf(
                "image" to R.drawable.art_space_image2,
                "title" to R.string.art_space_image2_title,
                "description" to R.string.art_space_image2_description,
                "release" to R.string.art_space_image2_release,
            ),
            3 to mutableMapOf(
                "image" to R.drawable.art_space_image3,
                "title" to R.string.art_space_image3_title,
                "description" to R.string.art_space_image3_description,
                "release" to R.string.art_space_image3_release,
            )
        )

        Column (modifier = Modifier
            .fillMaxSize()
            .padding(20.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center){
            ArtDisplay(painter = painterResource(id = data_map.getValue(page_num).getValue("image")),
                modifier = Modifier
                .fillMaxWidth()
                .weight(3f)
                )
            Text(text = "${page_num}")
            ArtDescription(
                title = stringResource(id = data_map.getValue(page_num).getValue("title")),
                description = stringResource(id = data_map.getValue(page_num).getValue("description")),
                release = stringResource(id = data_map.getValue(page_num).getValue("release")),
                modifier = Modifier
                .weight(1f)
                .padding(top = 20.dp, bottom = 20.dp))
            PageTransition(page_num = page_num,
                onClickNext = {page_num += 1},
                onClickPrevious = {page_num -= 1},
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .padding(top = 20.dp, bottom = 20.dp))

        }
    }
}

@Composable
fun MakeList(){
    
}

@Composable
private fun PageTransitionNum(page_num: Int): Int {
    var new_page = page_num % 3
    if(new_page == 0) new_page = 3
    return new_page
}


@Composable
fun ArtDisplay(painter:Painter,modifier: Modifier=Modifier){
    Surface(shadowElevation = 10.dp,
        modifier = modifier

            ) {
        Image(
            painter = painter,
            contentDescription = null,
            modifier = modifier.padding(20.dp),
            contentScale = ContentScale.FillWidth
        )
    }

}

@Composable
fun ArtDescription(title:String,description:String,release:String,modifier: Modifier=Modifier){
    Column (
        modifier = modifier
            .fillMaxWidth()
            .background(Color.LightGray)
            .padding(20.dp)){
        Text(text = title,
            fontSize = 20.sp,
            fontFamily = FontFamily.Serif,
        )
        Row() {
            Text(text = description,
                fontWeight = FontWeight.Bold)
            Text(text = "("+release+")")
        }
    }

}

@Composable
fun PageTransition(modifier: Modifier=Modifier,
                   page_num:Int,
                   onClickNext:() -> Unit,
                   onClickPrevious:() -> Unit
                   ){
    Row (verticalAlignment = Alignment.Bottom){
        Button(onClick = onClickPrevious,
            modifier = modifier
                .weight(1f)
                .padding(start = 10.dp, end = 10.dp)) {
            Text(text = "Previous")
        }
        Button(onClick = onClickNext,
            modifier = modifier
                .weight(1f)
                .padding(start = 10.dp, end = 10.dp)) {
            Text(text = "Next")
        }
    }
}