Android

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)
                    }
                }
            }
        }
    }
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です