Skip to content

Commit

Permalink
feat：布局
Browse files Browse the repository at this point in the history
  • Loading branch information
@licoba
licoba committed Aug 11, 2023
1 parent e143cc1 commit ddaf0d8
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 11 deletions.
1 change: 1 addition & 0 deletions app/build.gradle.kts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ dependencies {
implementation(libs.ui.graphics)
implementation(libs.ui.tooling.preview)
implementation(libs.material3)
implementation(libs.material.icons)
implementation(libs.navigation.compose)
implementation(libs.utilcode)
implementation(libs.xxpermissions)
Expand Down
39 changes: 32 additions & 7 deletions app/src/main/java/com/licoba/composego/features/login/LoginScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ import com.licoba.composego.ui.theme.dimens
import com.licoba.composego.ui.widgets.AppButton
import com.licoba.composego.ui.widgets.InputTextField
import com.licoba.composego.ui.widgets.MediumTitleText
import com.licoba.composego.ui.widgets.PasswordTextField
import com.licoba.composego.ui.widgets.TitleText


@Composable
Expand All @@ -68,12 +70,14 @@ fun LoginScreen(
login: () -> Unit,
navigateToHome: () -> Unit
) {

Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState())
.imePadding()
.padding(20.dp),
verticalArrangement = Arrangement.Top
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally
) {

ElevatedCard(
Expand Down Expand Up @@ -106,8 +110,11 @@ fun LoginScreen(
.build(),
contentDescription = stringResource(id = R.string.login_do_login)
)

Spacer(modifier = Modifier.height(20.dp))
// 欢迎
TitleText(
modifier = Modifier.padding(top = 20.dp, bottom = 36.dp),
text = stringResource(id = R.string.welcome)
)
InputTextField(
icon = Icons.Default.AccountBox,
label = stringResource(R.string.login_user_name),
Expand All @@ -116,10 +123,9 @@ fun LoginScreen(
onUserNameChanged(it)
}
Spacer(modifier = Modifier.height(10.dp))
InputTextField(
icon = Icons.Default.Lock,
PasswordTextField(
label = stringResource(R.string.login_password),
text = loginUiInfo.password
value = loginUiInfo.password
) {
onPasswordChanged(it)
}
Expand All @@ -134,6 +140,25 @@ fun LoginScreen(
}


// Register Section
Row(
modifier = Modifier.padding(dimens.paddingNormal),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
// Don't have an account?
Text(text = stringResource(id = R.string.do_not_have_account))

//Register
Text(
modifier = Modifier
.padding(start = dimens.paddingExtraSmall)
.clickable {
},
text = stringResource(id = R.string.register),
color = MaterialTheme.colorScheme.primary
)
}
}
}

Expand Down
96 changes: 92 additions & 4 deletions app/src/main/java/com/licoba/composego/ui/widgets/InputTextField.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,32 @@ import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountBox
import androidx.compose.material.icons.filled.Email
import androidx.compose.material3.*
import androidx.compose.material.icons.outlined.Visibility
import androidx.compose.material.icons.outlined.VisibilityOff
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.material3.TextFieldDefaults
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.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import com.licoba.composego.R
import com.licoba.composego.ui.theme.AppTheme


Expand All @@ -29,8 +47,8 @@ fun InputTextField(
keyboardActions: KeyboardActions = KeyboardActions.Default,
imeAction: ImeAction = ImeAction.Done,
enabled: Boolean = true,
maxLine: Int = 3,
type: InputTextFieldType = InputTextFieldType.WithIcon,
maxLine: Int = 1,
type: InputTextFieldType = InputTextFieldType.Outlined,
onValueChange: (String) -> Unit
) {
when (type) {
Expand All @@ -51,6 +69,7 @@ fun InputTextField(
placeholder = { Text(text = label) },
maxLines = maxLine
)

InputTextFieldType.Outlined -> OutlinedTextField(
value = text,
onValueChange = onValueChange,
Expand All @@ -65,6 +84,7 @@ fun InputTextField(
shape = MaterialTheme.shapes.small,
maxLines = maxLine
)

InputTextFieldType.WithIcon -> OutlinedTextField(
value = text,
onValueChange = onValueChange,
Expand All @@ -89,6 +109,7 @@ fun InputTextField(
shape = MaterialTheme.shapes.small,
maxLines = maxLine
)

InputTextFieldType.IconClickable -> OutlinedTextField(
value = text,
onValueChange = onValueChange,
Expand Down Expand Up @@ -148,4 +169,71 @@ fun PreviewWithIconTextField() {

enum class InputTextFieldType {
Classic, Outlined, WithIcon, IconClickable
}
}


@OptIn(ExperimentalComposeUiApi::class, ExperimentalMaterial3Api::class)
@Composable
fun PasswordTextField(
modifier: Modifier = Modifier,
value: String,
label: String,
isError: Boolean = false,
errorText: String = "",
imeAction: ImeAction = ImeAction.Done,
onValueChange: (String) -> Unit,
) {
val keyboardController = LocalSoftwareKeyboardController.current

var isPasswordVisible by remember {
mutableStateOf(false)
}

OutlinedTextField(
modifier = modifier,
value = value,
onValueChange = onValueChange,
label = { Text(text = label) },
trailingIcon = {
IconButton(onClick = {
isPasswordVisible = !isPasswordVisible
}) {

val visibleIconAndText = Pair(
first = Icons.Outlined.Visibility,
second = stringResource(id = R.string.icon_password_visible)
)

val hiddenIconAndText = Pair(
first = Icons.Outlined.VisibilityOff,
second = stringResource(id = R.string.icon_password_hidden)
)

val passwordVisibilityIconAndText =
if (isPasswordVisible) visibleIconAndText else hiddenIconAndText

Icon(
imageVector = passwordVisibilityIconAndText.first,
contentDescription = passwordVisibilityIconAndText.second
)
}
},
singleLine = true,
shape = MaterialTheme.shapes.small,
visualTransformation = if (isPasswordVisible) VisualTransformation.None else PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Password,
imeAction = imeAction
),
keyboardActions = KeyboardActions(onDone = {
keyboardController?.hide()
}),
isError = isError,
supportingText = {
if (isError) {
ErrorTextInputField(text = errorText)
}
}

)
}
5 changes: 5 additions & 0 deletions app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,10 @@
<string name="login_password">密码</string>
<string name="login_do_login">登录</string>
<string name="jetpack_compose">Jetpack Compose</string>
<string name="icon_password_visible">显示密码</string>
<string name="icon_password_hidden">隐藏密码</string>
<string name="do_not_have_account">没有账号？</string>
<string name="register">去注册</string>
<string name="welcome">欢迎！</string>

</resources>
2 changes: 2 additions & 0 deletions gradle/libs.versions.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ mmkv = "1.3.0"
splashscreen = "1.0.1"
timber = "5.0.1"
parcelize = "1.5.1"
material-icons = "1.4.3"

[libraries]
core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "core-ktx" }
Expand All @@ -44,6 +45,7 @@ ui-tooling-preview = { group = "androidx.compose.ui", name
ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
material3 = { group = "androidx.compose.material3", name = "material3" }
material-icons = { group = "androidx.compose.material", name = "material-icons-extended", version.ref = "material-icons" }
navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigation-compose" }
hilt-navigation = { group = "androidx.hilt", name = "hilt-navigation-compose", version.ref = "hilt-navigation" }
hilt-android = { group = "com.google.dagger", name = "hilt-android", version.ref = "hilt" }
Expand Down

0 comments on commit ddaf0d8

Please sign in to comment.