Skip to content

Commit

Permalink
Merge pull request #4 from NOW-SOPT-ANDROID/feat/week_compose1
Browse files Browse the repository at this point in the history
[1주차/필수/Compose] Android UI 구현 기초 : 회원가입 및 로그인
  • Loading branch information
SYAAINN authored Apr 15, 2024
2 parents 30b7f86 + d7f5efa commit 0309c38
Show file tree
Hide file tree
Showing 9 changed files with 473 additions and 34 deletions.
6 changes: 4 additions & 2 deletions app/build.gradle
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,17 @@ dependencies {
implementation 'androidx.core:core-ktx:1.12.0'
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0'
implementation 'androidx.activity:activity-compose:1.8.2'
implementation platform('androidx.compose:compose-bom:2024.03.00')
implementation platform('androidx.compose:compose-bom:2024.04.00')
implementation 'androidx.compose.ui:ui'
implementation 'androidx.compose.ui:ui-graphics'
implementation 'androidx.compose.ui:ui-tooling-preview'
implementation 'androidx.compose.material3:material3'
// Navigation
implementation 'androidx.navigation:navigation-compose:2.7.7'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
androidTestImplementation platform('androidx.compose:compose-bom:2024.03.00')
androidTestImplementation platform('androidx.compose:compose-bom:2024.04.00')
androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
debugImplementation 'androidx.compose.ui:ui-tooling'
debugImplementation 'androidx.compose.ui:ui-test-manifest'
Expand Down
1 change: 0 additions & 1 deletion app/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
<activity
android:name=".MainActivity"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/Theme.NOWSOPTAndroid">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
Expand Down
59 changes: 28 additions & 31 deletions app/src/main/java/com/sopt/now/compose/MainActivity.kt
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,41 @@ package com.sopt.now.compose
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.sopt.now.compose.ui.theme.NOWSOPTAndroidTheme
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.sopt.now.compose.screen.MyPageScreen
import com.sopt.now.compose.screen.SignInScreen
import com.sopt.now.compose.screen.SignUpScreen

class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NOWSOPTAndroidTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Greeting("Android")
val navController = rememberNavController()

NavHost(navController = navController, startDestination = "SignIn") {
composable("SignIn?ID={ID}&PW={PW}&Name={Name}&Place={Place}") { backStackEntry ->
SignInScreen(
navController = navController,
ID = backStackEntry.arguments?.getString("ID") ?: "",
PW = backStackEntry.arguments?.getString("PW") ?: "",
Name = backStackEntry.arguments?.getString("Name") ?: "",
Place = backStackEntry.arguments?.getString("Place") ?: ""
)
}
composable("SignUp") {
SignUpScreen(navController = navController)
}
composable("MyPage?ID={InputID}&PW={InputPW}&Name={Name}&Place={Place}") { backStackEntry ->
MyPageScreen(
ID = backStackEntry.arguments?.getString("InputID") ?: "",
PW = backStackEntry.arguments?.getString("InputPW") ?: "",
Name = backStackEntry.arguments?.getString("Name") ?: "",
Place = backStackEntry.arguments?.getString("Place") ?: ""
)
}
}
}
}
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Text(
text = "Hello $name!",
modifier = modifier
)
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
NOWSOPTAndroidTheme {
Greeting("Android")
}
}
35 changes: 35 additions & 0 deletions app/src/main/java/com/sopt/now/compose/Sources.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
package com.sopt.now.compose

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
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.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController


@Composable
fun SOPTOutlinedButton(text: Int, onClick: () -> Unit, enabled: Boolean) {
OutlinedButton(
onClick = onClick, modifier = Modifier.fillMaxWidth(), enabled = enabled
) {
Text(text = stringResource(id = text))
}
}

fun showToast(context: Context, message: Int) {
Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
}
60 changes: 60 additions & 0 deletions app/src/main/java/com/sopt/now/compose/screen/MyPageScreen.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
package com.sopt.now.compose.screen

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
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.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.sopt.now.compose.R

@Composable
fun MyPageScreen(ID: String, PW: String, Name: String, Place: String) {

Column(
modifier = Modifier
.fillMaxSize()
.padding(horizontal = 30.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Top
) {


Image(painter = painterResource(id = R.drawable.img_mypage_profile),
contentDescription = "Profile",
modifier = Modifier.size(300.dp)
)

MyPageText(text = stringResource(R.string.txt_MyPage_Title))
MyPageText(text = Name)
MyPageText(text = stringResource(R.string.txt_MyPage_Id))
MyPageText(text = ID)
MyPageText(text = stringResource(R.string.txt_MyPage_Pw))
MyPageText(text = PW)
MyPageText(text = stringResource(R.string.txt_MyPage_Place))
MyPageText(text = Place)
}
}

@Composable
fun MyPageText(
text: String
) {
Text(
text = text,
modifier = Modifier.padding(10.dp),
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)
}
142 changes: 142 additions & 0 deletions app/src/main/java/com/sopt/now/compose/screen/SignInScreen.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
package com.sopt.now.compose.screen

import android.content.Context
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.sopt.now.compose.R
import com.sopt.now.compose.SOPTOutlinedButton
import com.sopt.now.compose.showToast

@Composable
fun SignInScreen(
navController: NavController, ID: String, PW: String, Name: String, Place: String
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(horizontal = 30.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Top
) {
var inputID by remember { mutableStateOf("") }
var inputPW by remember { mutableStateOf("") }
val context = LocalContext.current

Text(
text = stringResource(id = R.string.txt_SignIn_Title),
modifier = Modifier.padding(10.dp),
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center
)

SignInTextField(
inputID,
{ inputID = it },
stringResource(id = R.string.tf_SignIn_ID_Hint),
Icons.Filled.Person
)

SignInTextField(
inputPW,
{ inputPW = it },
stringResource(id = R.string.tf_SignIn_PW_Hint),
Icons.Filled.Lock,
isPassword = true
)

SOPTOutlinedButton(
R.string.btn_SignIn_SignIn,
{ isSignInValid(navController, context, inputID, inputPW, ID, PW, Name, Place) },
true
)

SOPTOutlinedButton(
R.string.btn_SignIn_SignUp,
{ navController.navigate("SignUp") },
true
)
}
}

@Composable
fun SignInTextField(
value: String,
onValueChange: (String) -> Unit,
label: String,
leadingIcon: ImageVector,
modifier: Modifier = Modifier,
isPassword: Boolean = false,
) {
TextField(
value = value,
onValueChange = onValueChange,
modifier = modifier
.fillMaxWidth()
.padding(10.dp),
label = { Text(label) },
leadingIcon = { Icon(leadingIcon, contentDescription = null) },
singleLine = true,
visualTransformation = if (isPassword) PasswordVisualTransformation() else VisualTransformation.None
)
}

fun isSignInValid(
navController: NavController,
context: Context,
inputID: String,
inputPW: String,
ID: String,
PW: String,
Name: String,
Place: String
) {
when {
(inputID.isEmpty()) -> {
showToast(context, R.string.toast_SignIn_InvalidSignIn_IDBlank)
}

(inputPW.isEmpty()) -> {
showToast(context, R.string.toast_SignIn_InvalidSignIn_PWBlank)
}

(inputID == ID && inputPW == PW) -> {
showToast(context, R.string.toast_SignIn_ValidSignIn)
navController.navigate("MyPage?ID=$inputID&PW=$inputPW&Name=$Name&Place=$Place")
}

(inputID != ID) -> {
showToast(context, R.string.toast_SignIn_InvalidID)
}

(inputPW != PW) -> {
showToast(context, R.string.toast_SignIn_InvalidPW)
}
}
}
Loading

0 comments on commit 0309c38

Please sign in to comment.