From 7902a9fa6349bf494bc574fa8c9cb0eb9e20f161 Mon Sep 17 00:00:00 2001 From: hyeumm <20221159@sungshin.ac.kr> Date: Wed, 17 Apr 2024 00:18:25 +0900 Subject: [PATCH] =?UTF-8?q?feat/#6:=202=EC=A3=BC=EC=B0=A8=20=EA=B3=BC?= =?UTF-8?q?=EC=A0=9C=20(=ED=86=B5=EC=A7=9C=20=EC=BB=A4=EB=B0=8B=20?= =?UTF-8?q?=EC=A3=84=EC=86=A1=ED=95=A9=EB=8B=88=EB=8B=A4...)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/java/com/sopt/now/compose/Friend.kt | 9 ++ .../com/sopt/now/compose/FriendProfileItem.kt | 50 ++++++ .../main/java/com/sopt/now/compose/HomeUi.kt | 102 ++++++++++++ .../java/com/sopt/now/compose/MainActivity.kt | 145 +++++++++++------- .../com/sopt/now/compose/NavigationData.kt | 8 + .../java/com/sopt/now/compose/ProfileUi.kt | 58 +++++++ .../main/java/com/sopt/now/compose/User.kt | 9 ++ .../com/sopt/now/compose/UserProfileItem.kt | 51 ++++++ 8 files changed, 379 insertions(+), 53 deletions(-) create mode 100644 app/src/main/java/com/sopt/now/compose/Friend.kt create mode 100644 app/src/main/java/com/sopt/now/compose/FriendProfileItem.kt create mode 100644 app/src/main/java/com/sopt/now/compose/HomeUi.kt create mode 100644 app/src/main/java/com/sopt/now/compose/NavigationData.kt create mode 100644 app/src/main/java/com/sopt/now/compose/ProfileUi.kt create mode 100644 app/src/main/java/com/sopt/now/compose/User.kt create mode 100644 app/src/main/java/com/sopt/now/compose/UserProfileItem.kt diff --git a/app/src/main/java/com/sopt/now/compose/Friend.kt b/app/src/main/java/com/sopt/now/compose/Friend.kt new file mode 100644 index 0000000..df0ec70 --- /dev/null +++ b/app/src/main/java/com/sopt/now/compose/Friend.kt @@ -0,0 +1,9 @@ +package com.sopt.now.compose + +import androidx.compose.ui.graphics.vector.ImageVector + +data class Friend( + val profileImage: ImageVector, + val name: String, + val selfDescription: String, +) \ No newline at end of file diff --git a/app/src/main/java/com/sopt/now/compose/FriendProfileItem.kt b/app/src/main/java/com/sopt/now/compose/FriendProfileItem.kt new file mode 100644 index 0000000..c843186 --- /dev/null +++ b/app/src/main/java/com/sopt/now/compose/FriendProfileItem.kt @@ -0,0 +1,50 @@ +package com.sopt.now.compose + +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp + + +@Composable +fun FriendProfileItem(friend: Friend) { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(vertical = 10.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Icon( + modifier = Modifier.size(50.dp), + imageVector = friend.profileImage, + contentDescription = null + ) + Spacer(modifier = Modifier.width(10.dp)) + Text( + text = friend.name, + fontSize = 14.sp, + fontWeight = FontWeight.Bold, + overflow = TextOverflow.Ellipsis, + maxLines = 1 + ) + Spacer(modifier = Modifier.width(30.dp)) + Spacer(modifier = Modifier.weight(1f)) + Text( + text = friend.selfDescription, + fontSize = 10.sp, + overflow = TextOverflow.Ellipsis, + maxLines = 1 + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/sopt/now/compose/HomeUi.kt b/app/src/main/java/com/sopt/now/compose/HomeUi.kt new file mode 100644 index 0000000..907ff74 --- /dev/null +++ b/app/src/main/java/com/sopt/now/compose/HomeUi.kt @@ -0,0 +1,102 @@ +package com.sopt.now.compose + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.lazy.LazyColumn +import androidx.compose.foundation.lazy.items +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Person +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp + +@Composable +fun HomeUi() { + Column( + modifier = Modifier + .fillMaxSize() + .padding(horizontal = 10.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + LazyColumn { + items(userList) { + UserProfileItem(it) + } + items(friendList) { + FriendProfileItem(it) + } + } + } +} +val userList = listOf( + User( + profileImage = Icons.Filled.Person, + name = "송혜음", + selfDescription = "컴포즈 커피 최고" + ) +) + +val friendList = listOf( + Friend( + profileImage = Icons.Filled.Person, + name = "이의경", + selfDescription = "다들 빨리 끝내고 뒤풀이 가고 싶지?" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "우상욱", + selfDescription = "나보다 안드 잘하는 사람 있으면 나와봐" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "배지현", + selfDescription = "표정 풀자 ^^" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "이의경", + selfDescription = "다들 빨리 끝내고 뒤풀이 가고 싶지?" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "우상욱", + selfDescription = "나보다 안드 잘하는 사람 있으면 나와봐" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "배지현", + selfDescription = "표정 풀자 ^^" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "이의경", + selfDescription = "다들 빨리 끝내고 뒤풀이 가고 싶지?" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "우상욱", + selfDescription = "나보다 안드 잘하는 사람 있으면 나와봐" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "배지현", + selfDescription = "표정 풀자 ^^" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "이의경", + selfDescription = "다들 빨리 끝내고 뒤풀이 가고 싶지?" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "우상욱", + selfDescription = "나보다 안드 잘하는 사람 있으면 나와봐" + ), + Friend( + profileImage = Icons.Filled.Person, + name = "배지현", + selfDescription = "표정 풀자 ^^" + ) +) diff --git a/app/src/main/java/com/sopt/now/compose/MainActivity.kt b/app/src/main/java/com/sopt/now/compose/MainActivity.kt index dbd27e7..efaeaf9 100644 --- a/app/src/main/java/com/sopt/now/compose/MainActivity.kt +++ b/app/src/main/java/com/sopt/now/compose/MainActivity.kt @@ -3,20 +3,40 @@ package com.sopt.now.compose import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent -import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize -import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Home +import androidx.compose.material.icons.filled.Person +import androidx.compose.material.icons.filled.Search +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.NavigationBar +import androidx.compose.material3.NavigationBarItem +import androidx.compose.material3.Scaffold import androidx.compose.material3.Surface import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBar +import androidx.compose.material3.TopAppBarDefaults.topAppBarColors import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableIntStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.res.painterResource +import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp @@ -27,7 +47,6 @@ class MainActivity : ComponentActivity() { super.onCreate(savedInstanceState) setContent { NOWSOPTAndroidTheme { - // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background @@ -35,67 +54,87 @@ class MainActivity : ComponentActivity() { val userId = intent.getStringExtra("userId") val userPw = intent.getStringExtra("userPw") val userNick = intent.getStringExtra("userNick") - MainUI(userId,userPw,userNick) + ScaffoldExample(userId, userPw, userNick) } } } } } -//메인화면 + +@OptIn(ExperimentalMaterial3Api::class) @Composable -fun MainUI(userId: String?="", userPw:String?="", userNick:String?=""){ - Column( - modifier = Modifier - .fillMaxSize() - .padding(30.dp), - horizontalAlignment = Alignment.CenterHorizontally - ) { - Text( - text = stringResource(R.string.app_name), - fontSize = 30.sp - ) - Text( - text = stringResource(R.string.text_main_title2), - fontSize = 20.sp - ) - Spacer(modifier = Modifier.height(50.dp),) - Image( - painter = painterResource(id = R.drawable.cute), - contentDescription = "귀여운 뱁새" - ) - Spacer(modifier = Modifier.height(50.dp),) - Text( - text = "ID", - fontSize = 20.sp - ) - Text( - text = "$userId", - fontSize = 15.sp - ) - Spacer(modifier = Modifier.height(50.dp),) - Text( - text = stringResource(R.string.text_pw), - fontSize = 20.sp - ) - Text( - text = "$userPw", - fontSize = 15.sp - ) - Spacer(modifier = Modifier.height(50.dp),) - Text( - text = stringResource(R.string.text_nick), - fontSize = 20.sp - ) - Text( - text = "$userNick", - fontSize = 15.sp +fun ScaffoldExample(userId: String? = "", userPw: String? = "", userNick: String? = "") { + var selectedItem by remember { mutableIntStateOf(0) } + val items = listOf( + BottomNavigationItem( + icon = Icons.Filled.Home, + label = "Home" + ), + BottomNavigationItem( + icon = Icons.Filled.Search, + label = "Search" + ), + BottomNavigationItem( + icon = Icons.Filled.Person, + label = "Profile" ) + ) + + Scaffold( + topBar = { + TopAppBar( + colors = topAppBarColors( + containerColor = MaterialTheme.colorScheme.primaryContainer, + titleContentColor = MaterialTheme.colorScheme.primary, + ), + title = { + Text( + text = stringResource(R.string.app_name), + fontSize = 30.sp, + fontWeight = FontWeight.Bold + ) + } + ) + }, + bottomBar = { + NavigationBar { + items.forEachIndexed { index, item -> + NavigationBarItem( + icon = { Icon(item.icon, contentDescription = item.label) }, + label = { Text(item.label) }, + selected = selectedItem == index, + onClick = { selectedItem = index } + ) + } + } + }, + ) { innerPadding -> + Column( + modifier = Modifier + .padding(innerPadding), + verticalArrangement = Arrangement.spacedBy(16.dp), + ) { + when (selectedItem) { + 0 -> { + HomeUi() + } + + 1 -> { + Text(text = "Search") + } + + 2 -> { + ProfileUi(userId, userPw, userNick) + } + } + + } } } @Preview(showBackground = true) @Composable fun GreetingPreview() { NOWSOPTAndroidTheme { - MainUI() + ScaffoldExample() } } \ No newline at end of file diff --git a/app/src/main/java/com/sopt/now/compose/NavigationData.kt b/app/src/main/java/com/sopt/now/compose/NavigationData.kt new file mode 100644 index 0000000..efc4679 --- /dev/null +++ b/app/src/main/java/com/sopt/now/compose/NavigationData.kt @@ -0,0 +1,8 @@ +package com.sopt.now.compose + +import androidx.compose.ui.graphics.vector.ImageVector + +data class BottomNavigationItem( + val icon: ImageVector, + val label: String +) \ No newline at end of file diff --git a/app/src/main/java/com/sopt/now/compose/ProfileUi.kt b/app/src/main/java/com/sopt/now/compose/ProfileUi.kt new file mode 100644 index 0000000..4060268 --- /dev/null +++ b/app/src/main/java/com/sopt/now/compose/ProfileUi.kt @@ -0,0 +1,58 @@ +package com.sopt.now.compose + +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp + +@Composable +fun ProfileUi(userId: String? = "", userPw: String? = "", userNick: String? = "") { + Column( + modifier = Modifier + .fillMaxSize() + .padding(30.dp), + horizontalAlignment = Alignment.CenterHorizontally + ) { + Image( + painter = painterResource(id = R.drawable.cute), + contentDescription = "귀여운 뱁새" + ) + Spacer(modifier = Modifier.height(50.dp)) + Text( + text = "ID", + fontSize = 20.sp + ) + Text( + text = "$userId", + fontSize = 15.sp + ) + Spacer(modifier = Modifier.height(50.dp)) + Text( + text = stringResource(R.string.text_pw), + fontSize = 20.sp + ) + Text( + text = "$userPw", + fontSize = 15.sp + ) + Spacer(modifier = Modifier.height(50.dp)) + Text( + text = stringResource(R.string.text_nick), + fontSize = 20.sp + ) + Text( + text = "$userNick", + fontSize = 15.sp + ) + } +} \ No newline at end of file diff --git a/app/src/main/java/com/sopt/now/compose/User.kt b/app/src/main/java/com/sopt/now/compose/User.kt new file mode 100644 index 0000000..0766754 --- /dev/null +++ b/app/src/main/java/com/sopt/now/compose/User.kt @@ -0,0 +1,9 @@ +package com.sopt.now.compose + +import androidx.compose.ui.graphics.vector.ImageVector + +data class User( + val profileImage: ImageVector, + val name: String, + val selfDescription: String, +) \ No newline at end of file diff --git a/app/src/main/java/com/sopt/now/compose/UserProfileItem.kt b/app/src/main/java/com/sopt/now/compose/UserProfileItem.kt new file mode 100644 index 0000000..6609c53 --- /dev/null +++ b/app/src/main/java/com/sopt/now/compose/UserProfileItem.kt @@ -0,0 +1,51 @@ +package com.sopt.now.compose + +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.material3.Icon +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp + + +@Composable +fun UserProfileItem(user: User) { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(vertical = 10.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Icon( + modifier = Modifier.size(50.dp), + imageVector = user.profileImage, + contentDescription = null + ) + Spacer(modifier = Modifier.width(10.dp)) + Text( + text = user.name, + fontSize = 18.sp, + fontWeight = FontWeight.Bold, + overflow = TextOverflow.Ellipsis, + maxLines = 1 + ) + Spacer(modifier = Modifier.width(30.dp)) + Spacer(modifier = Modifier.weight(1f)) + Text( + text = user.selfDescription, + fontSize = 14.sp, + fontWeight = FontWeight.Bold, + overflow = TextOverflow.Ellipsis, + maxLines = 1 + ) + } +} \ No newline at end of file