Na maioria do Apps temos uma tela de autenticação que recebe as informações para entrar no App com login e senha e uma tela de cadastro que permite cadastrar novos usuarios. Neste tutorial vamos desenvolver a tela de login e cadastro para o SO android utilizado o kit de ferramenta Jetpack compose para criar Interface.
Definido espaço, margen, size do texto
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
val PADDING_STAR = 12.dp
val PADDING_END = 12.dp
val PADDING_BOTTON = 120.dp
val TEXT_SIZE = 18.sp
val TEXT_DEFAUL = 16.sp
val CORNER_RADIUS = 25.dp
val SIZE_OUTLINE_BUTTON = 46.dp
val PADDING_VALUES = 8.dp
val BORDER_STROKE = 0.dp
val DEFAULT_ELEVATION = 4.dp
val WIDTH = 64.dp
val THISCKNESS = 1.dp
//CAMPOS
val PADDING_FIELD = 32.dp
val LETTERSPACING = 1.sp
//SPACE
val SPACER_HEIGHT = 48.dp
val SPACED_BY = 8.dp
MainActivity
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
LoginExemploTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
LoginSignup()
}
}
}
}
}
Criar a função composable Divider: Objetivo de preencher um determinado espaço com um tamanho definido
@Composable
fun Divider(){
Divider(modifier = Modifier
.width(WIDTH),
color = Color(0xFF333333),
thickness = THISCKNESS
)
}
Vamos criar uma função composable para incluir icones do google e facebook
@Composable
fun SignupWithIcons(
iconRes: Int,
contentDescription:String,
contetx: Context
){
OutlinedButton(
modifier = Modifier.size(SIZE_OUTLINE_BUTTON),
shape = CircleShape,
contentPadding = PaddingValues(PADDING_VALUES),
border = BorderStroke(BORDER_STROKE, Color.Transparent),
elevation = ButtonDefaults.elevation(defaultElevation = DEFAULT_ELEVATION),
onClick = { showToast(context = contetx, message = "Click") }) {
Icon(painter = painterResource(id = iconRes), contentDescription = contentDescription, tint = Color.Unspecified)
}
}
função composable LoginSignupTextField para criar nossa caixa de entrada da informações onde vamos receber por paramtros um text (string) e hint(String) e leadingIcon(imageVector) e onText(String)
@Composable
fun LoginSignupTextField(
text: String,
hint: String,
leadingIcon: ImageVector,
onText: (String) -> Unit
){
OutlinedTextField(
modifier = Modifier
.fillMaxWidth()
.padding(
start = PADDING_FIELD,
end = PADDING_FIELD,
top = PADDING_FIELD
)
.background(Color.White, RoundedCornerShape(CORNER_RADIUS)),
value = text,
colors = TextFieldDefaults.outlinedTextFieldColors(
focusedBorderColor = MaterialTheme.colors.primary,
unfocusedBorderColor = Color.White,
cursorColor = MaterialTheme.colors.primary
),
onValueChange = {onText(it)},
singleLine = true,
shape = RoundedCornerShape(CORNER_RADIUS),
textStyle = TextStyle(color = MaterialTheme.colors.primary, letterSpacing = LETTERSPACING, fontWeight = FontWeight.Medium),
placeholder = { Text(
text = hint,
style = TextStyle(color = Color(0xFF808080), letterSpacing = LETTERSPACING, fontWeight = FontWeight.Medium)
)},
leadingIcon = {
Icon(
imageVector = leadingIcon,
contentDescription = hint,
tint = MaterialTheme.colors.primary)
}
)
}
Vamos função composable LoginSignup onde vamos chamar as funções criada em anteriormente e passar os parametros solicitados
@Composable
fun LoginSignup(){
val context: Context = LocalContext.current
var isSignup by remember {
mutableStateOf(false)
}
var textName by remember {
mutableStateOf("")
}
var textPhone by remember {
mutableStateOf("")
}
var textEmail by remember {
mutableStateOf("")
}
var textPassword by remember {
mutableStateOf("")
}
Column(modifier = Modifier
.background(Color(0xFFEEEEEE))
.fillMaxSize()
.verticalScroll(rememberScrollState()),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.SpaceBetween) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text(
modifier = Modifier.padding(top = 24.dp),
text = if (isSignup) "Criar uma conta" else "Bem vindo de volta",
style = TextStyle(fontWeight = FontWeight.Bold,
fontSize = 30.sp,
letterSpacing = 1.sp,
color = Color.Black)
)
Text(
modifier = Modifier.padding(top = 4.dp),
text = if (isSignup) "Inscreva-se para começar" else "Faça login em sua conta",
style = TextStyle(fontWeight = FontWeight.Bold,
fontSize = 18.sp,
letterSpacing = 1.sp,
color = Color.Black)
)
//campo de texto de nome completo
if (isSignup){
LoginSignupTextField(text = textName, hint = "Nome", leadingIcon = Icons.Default.Person, onText = {textName = (it)})
}
//campo email
if (isSignup){
LoginSignupTextField(text = textEmail, hint = "Email", leadingIcon = Icons.Default.Email, onText ={textEmail = (it)} )
}else{
LoginSignupTextField(text = textEmail, hint = "Email", leadingIcon = Icons.Default.Email, onText ={textEmail = (it)} )
}
//campo celular
if (isSignup){
LoginSignupTextField(text = textPhone, hint = "Telefone", leadingIcon = Icons.Default.Phone, onText ={textPhone = (it)} )
}
//campo senha
if (isSignup){
LoginSignupTextField(text = textPassword, hint = "Senha", leadingIcon = Icons.Default.Lock, onText = {textPassword=(it)})
}else{
LoginSignupTextField(text = textPassword, hint = "Senha", leadingIcon = Icons.Default.Lock, onText = {textPassword=(it)})
}
//Botão cadastrar ou Entrar
Button(
modifier = Modifier
.fillMaxWidth()
.padding(
start = PADDING_FIELD,
end = PADDING_FIELD,
top = PADDING_FIELD
),
shape = RoundedCornerShape(CORNER_RADIUS),
colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary),
onClick = {
//evento
if (isSignup){
showToast(context,"Cadastro Realizado com sucesso!")
}else{
showToast(context,"Login realizado com sucesso")
}
/*TODO*/ }) {
Text(
text = if (isSignup) "Inscrever-se" else "Entrar",
style = TextStyle(
fontWeight = FontWeight.Medium,
fontSize = TEXT_SIZE,
color = Color.White,
letterSpacing = LETTERSPACING
)
)
}
Spacer(modifier = Modifier.height(SPACER_HEIGHT))
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
) {
Divider()
Text(
modifier = Modifier.padding(start = PADDING_STAR, end = PADDING_END),
text = if(isSignup) "Cadastre-se COM" else "Entrar com",
style = TextStyle(
fontSize = TEXT_DEFAUL,
letterSpacing = LETTERSPACING,
color = Color.Black
)
)
Divider()
}
Row(modifier = Modifier.padding(PADDING_VALUES),
horizontalArrangement = Arrangement.spacedBy(SPACED_BY)) {
SignupWithIcons(iconRes = R.drawable.icon_google,
contentDescription = if (isSignup) "Cadastre-se com Google" else "Entrar com Google", contetx = context)
SignupWithIcons(iconRes = R.drawable.icon_facebook,
contentDescription = if (isSignup) "Cadastre-se com Facebook" else "Entrar com Facebook", contetx = context)
}
}
Row(modifier = Modifier.padding(bottom = PADDING_BOTTON),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically) {
Text(text = if(isSignup)"Já um Membro? " else " Não tem uma conta? ", color = Color.Black, fontSize = TEXT_DEFAUL, fontWeight = FontWeight.Bold)
Text(
modifier = Modifier.clickable { isSignup =!isSignup },
text = if(isSignup)" Entrar " else " Inscrever-se ", color = Color.Black, fontSize = TEXT_DEFAUL, fontWeight = FontWeight.Bold)
}
}
}
Top comments (0)