デジタルアート空間を提供するアプリを作ります。
引用ＵＲＬ
必要とする要素はこちら
・作品の画像
・作品に関する情報（タイトル、アーティスト、公開年など）
・その他、アプリをインタラクティブかつ動的にするボタンなどの要素
これに対して低忠実度（ローファイ）デザインを作ります。
画像をまずインポートします。今回使う画像は三つにします。
それぞれにタイトル、説明文、リリース年を付け加えます。
タイトル：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")
}
}
}