Jetpack Composeを使って、ユーザーのプロフィール情報を表示・編集できるUIを実装します。アバター画像の選択と永続化も含みます。

プロジェクトのセットアップ

Android Studioが最新版であることを確認し、新規Composeプロジェクトを作成します。必要な依存関係をbuild.gradleに追加:

dependencies {
    implementation "androidx.compose.ui:ui:1.6.0"
    implementation "androidx.compose.material3:material3:1.2.0"
    implementation "androidx.activity:activity-compose:1.8.0"
    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.7.0"
}

プロフィールUIの構築

円形のアバター、ユーザー名、メールアドレス、編集ボタンを中央揃えで配置します。

@Composable
fun ProfileCard(profile: UserProfile) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(24.dp)
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            AvatarDisplay(profile.avatarUri)
            Spacer(Modifier.height(12.dp))
            Text(profile.displayName, style = MaterialTheme.typography.titleLarge)
            Spacer(Modifier.height(4.dp))
            Text(profile.contactEmail, style = MaterialTheme.typography.bodyMedium)
            Spacer(Modifier.height(20.dp))
            ElevatedButton(onClick = { /* プロフィール編集画面へ */ }) {
                Text("プロフィールを編集")
            }
        }
    }
}

@Composable
private fun AvatarDisplay(uri: String?) {
    val painter = rememberAsyncImagePainter(
        model = ImageRequest.Builder(LocalContext.current)
            .data(uri ?: R.drawable.placeholder_avatar)
            .build()
    )
    Image(
        painter = painter,
        contentDescription = "User avatar",
        modifier = Modifier
            .size(100.dp)
            .clip(RoundedCornerShape(50.dp))
            .border(2.dp, Color.Gray, RoundedCornerShape(50.dp))
    )
}

画像選択と保存機能

ギャラリーから画像を選択し、URIをSharedPreferencesに保存します。

@Composable
fun AvatarPicker(updateAvatar: (String) -> Unit) {
    val context = LocalContext.current
    val picker = rememberLauncherForActivityResult(
        contract = ActivityResultContracts.GetContent()
    ) { selectedUri ->
        selectedUri?.toString()?.let(updateAvatar)
    }

    OutlinedButton(
        onClick = { picker.launch("image/*") },
        modifier = Modifier.padding(top = 8.dp)
    ) {
        Text("アバターを変更")
    }
}

// 保存処理
fun saveAvatarUri(context: Context, uri: String) {
    context.getSharedPreferences("UserPrefs", Context.MODE_PRIVATE)
        .edit()
        .putString("saved_avatar", uri)
        .apply()
}

// 読み込み処理
fun loadAvatarUri(context: Context): String? {
    return context.getSharedPreferences("UserPrefs", Context.MODE_PRIVATE)
        .getString("saved_avatar", null)
}