Udemy のこちらを参考に作っているところ
【Android開発/2023年版】3つのアプリを作りながらJetpack Composeでのアプリ開発の基礎をマスター
コード的な部分
自分で参考にするだけなので数日後削除
package com.example.jetprofile
import android.media.Image
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.ClickableText
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.LocationOn
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.Role.Companion.Image
import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.jetprofile.ui.theme.JetProfileTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
JetProfileTheme {
ProfileScreen()
}
}
}
}
@Composable
fun ProfileScreen() {
var showDetails by remember { mutableStateOf(false) }
Column(
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Spacer(modifier = Modifier.height(16.dp))
// ここでプロフィール画像を表示
Image(
painter = painterResource(id = R.drawable.ic_launcher_background),
contentDescription = "おれ"
)
Text("山田太郎", style = MaterialTheme.typography.h6)
Text("職業", style = MaterialTheme.typography.subtitle1)
Spacer(modifier = Modifier.height(8.dp))
Column(
modifier = Modifier
.fillMaxWidth()
.padding(start = 60.dp),
horizontalAlignment = Alignment.Start
) {
Text("会社名", fontSize = 20.sp, color = Color.Gray)
Spacer(modifier = Modifier.height(20.dp))
Text("部署グループ名", style = MaterialTheme.typography.body1)
Spacer(modifier = Modifier.height(20.dp))
Row(
modifier = Modifier
.height(30.dp)
.fillMaxSize(),
verticalAlignment = Alignment.CenterVertically
) {
Image(
painter = painterResource(id = R.drawable.ic_launcher_background),
contentDescription = ""
)
Spacer(modifier = Modifier.width(10.dp))
Text("Email", style = MaterialTheme.typography.body1)
}
Spacer(modifier = Modifier.height(20.dp))
ClickableText(
text = AnnotatedString("example@email.com"),
onClick = { }
)
}
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = { showDetails = !showDetails },
colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red)
) {
Text("詳細を表示", color = Color.White)
}
if (showDetails) {
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth()
.clip(RoundedCornerShape(12.dp))
.background(Color.LightGray)
) {
Column(modifier = Modifier.padding(16.dp)) {
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(Icons.Default.Home, contentDescription = "趣味", Modifier.size(24.dp))
Spacer(modifier = Modifier.width(8.dp))
Text("趣味: 映画鑑賞、読書、柔術", style = MaterialTheme.typography.body1)
}
Spacer(modifier = Modifier.height(8.dp))
Row(verticalAlignment = Alignment.CenterVertically) {
Icon(
Icons.Default.LocationOn,
contentDescription = "居住地",
Modifier.size(24.dp)
)
Spacer(modifier = Modifier.width(8.dp))
Text("居住地: 東京、赤坂", style = MaterialTheme.typography.body1)
}
}
}
}
}
}