feat : Mainpage et connexionpage responsive
continuous-integration/drone/push Build is passing Details

androidCompose
Maxence GUITARD 1 year ago
parent ef784ff3d3
commit 14951c5d01

@ -1,6 +1,7 @@
package com.example.mathseduc package com.example.mathseduc
import android.content.Intent import android.content.Intent
import android.content.res.Configuration
import android.os.Bundle import android.os.Bundle
import android.widget.Toast import android.widget.Toast
import androidx.activity.ComponentActivity import androidx.activity.ComponentActivity
@ -17,25 +18,25 @@ import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.input.KeyboardType import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.core.view.WindowCompat
import androidx.core.view.WindowInsetsCompat
import com.example.mathseduc.controllers.ControllerPlayer import com.example.mathseduc.controllers.ControllerPlayer
import com.example.mathseduc.ui.theme.MathsEducTheme
class ConnexionPlayerActivity : ComponentActivity() { class ConnexionPlayerActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) super.onCreate(savedInstanceState)
setContent { setContent {
MathsEducTheme {
ConnexionPlayerContent(activity = this@ConnexionPlayerActivity) ConnexionPlayerContent(activity = this@ConnexionPlayerActivity)
} }
} }
}
} }
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@ -46,8 +47,17 @@ fun ConnexionPlayerContent(activity: ConnexionPlayerActivity) {
var showDialog by rememberSaveable { mutableStateOf(false) } var showDialog by rememberSaveable { mutableStateOf(false) }
val context = LocalContext.current val context = LocalContext.current
val isPortrait = LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT
WindowCompat.setDecorFitsSystemWindows(activity.window, false)
val windowInsetsController = remember {
WindowCompat.getInsetsController(activity.window, activity.window.decorView)
}
// Hide the status bar
windowInsetsController?.hide(WindowInsetsCompat.Type.statusBars())
Column(modifier = Modifier.fillMaxSize()) {
TopAppBar( TopAppBar(
colors = TopAppBarDefaults.topAppBarColors( colors = TopAppBarDefaults.topAppBarColors(
containerColor = Color.Transparent, containerColor = Color.Transparent,
@ -69,9 +79,8 @@ fun ConnexionPlayerContent(activity: ConnexionPlayerActivity) {
) )
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxSize()
.padding(16.dp) .padding(16.dp,0.dp),
.weight(1f),
verticalArrangement = Arrangement.Center, verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
@ -79,19 +88,19 @@ fun ConnexionPlayerContent(activity: ConnexionPlayerActivity) {
Image( Image(
painter = painterResource(id = R.drawable.logo), painter = painterResource(id = R.drawable.logo),
contentDescription = null, contentDescription = null,
modifier = Modifier modifier = Modifier.padding(0.dp, 2.dp, 0.dp)
.size(160.dp, 130.dp) .size(if (isPortrait) 120.dp else 90.dp)
) )
Spacer(modifier = Modifier.height(16.dp)) Spacer(modifier = Modifier.height(if (isPortrait) 16.dp else 4.dp))
OutlinedTextField( OutlinedTextField(
value = nickname, value = nickname,
onValueChange = { nickname = it }, onValueChange = { nickname = it },
label = { Text("Nickname") }, label = { Text("Nickname") },
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth(if (isPortrait) 1f else 0.5f)
.padding(8.dp), .padding(if (isPortrait) 8.dp else 8.dp,3.dp),
colors = OutlinedTextFieldDefaults.colors( colors = OutlinedTextFieldDefaults.colors(
focusedContainerColor = Color.White, focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White, unfocusedContainerColor = Color.White,
@ -110,7 +119,7 @@ fun ConnexionPlayerContent(activity: ConnexionPlayerActivity) {
keyboardType = KeyboardType.Password keyboardType = KeyboardType.Password
), ),
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth(if (isPortrait) 1f else 0.5f)
.padding(8.dp), .padding(8.dp),
colors = OutlinedTextFieldDefaults.colors( colors = OutlinedTextFieldDefaults.colors(
focusedContainerColor = Color.White, focusedContainerColor = Color.White,
@ -121,7 +130,7 @@ fun ConnexionPlayerContent(activity: ConnexionPlayerActivity) {
shape = RoundedCornerShape(8.dp) shape = RoundedCornerShape(8.dp)
) )
Spacer(modifier = Modifier.height(16.dp)) Spacer(modifier = Modifier.height(if (isPortrait) 16.dp else 7.dp))
Button( Button(
onClick = { onClick = {
@ -136,18 +145,18 @@ fun ConnexionPlayerContent(activity: ConnexionPlayerActivity) {
} }
}, },
modifier = Modifier modifier = Modifier
.fillMaxWidth() .width(230.dp)
.height(48.dp) .height(48.dp)
) { ) {
Text("Login") Text("Login")
} }
Spacer(modifier = Modifier.height(16.dp)) Spacer(modifier = Modifier.height(if (isPortrait) 16.dp else 10.dp))
Button( Button(
onClick = { showDialog = true }, onClick = { showDialog = true },
modifier = Modifier modifier = Modifier
.fillMaxWidth() .width(230.dp)
.height(48.dp), .height(48.dp),
colors = ButtonDefaults.buttonColors( colors = ButtonDefaults.buttonColors(
containerColor = Color(0xFF40E0D0)) containerColor = Color(0xFF40E0D0))
@ -160,7 +169,7 @@ fun ConnexionPlayerContent(activity: ConnexionPlayerActivity) {
} }
} }
} }
}
@Composable @Composable
fun RegisterDialog(onDismiss: () -> Unit) { fun RegisterDialog(onDismiss: () -> Unit) {
@ -229,7 +238,5 @@ fun RegisterDialog(onDismiss: () -> Unit) {
@Composable @Composable
fun ConnexionPlayerPreview() { fun ConnexionPlayerPreview() {
val fakeActivity = ConnexionPlayerActivity() val fakeActivity = ConnexionPlayerActivity()
MathsEducTheme {
ConnexionPlayerContent(activity = fakeActivity) ConnexionPlayerContent(activity = fakeActivity)
}
} }

@ -7,7 +7,6 @@ import androidx.activity.compose.setContent
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import com.example.mathseduc.ui.HomePage import com.example.mathseduc.ui.HomePage
import com.example.mathseduc.ui.theme.MathsEducTheme
class MainActivity : ComponentActivity() { class MainActivity : ComponentActivity() {
companion object { companion object {
@ -17,11 +16,9 @@ class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) super.onCreate(savedInstanceState)
setContent { setContent {
MathsEducTheme {
HomePage() HomePage()
} }
} }
}
} }

@ -1,6 +1,8 @@
package com.example.mathseduc.ui package com.example.mathseduc.ui
import android.app.Activity
import android.content.Intent import android.content.Intent
import android.content.res.Configuration
import android.widget.Toast import android.widget.Toast
import androidx.compose.foundation.Image import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
@ -16,14 +18,19 @@ import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.core.view.WindowCompat
import androidx.core.view.WindowInsetsCompat
import com.example.mathseduc.ConnexionPlayerActivity import com.example.mathseduc.ConnexionPlayerActivity
import com.example.mathseduc.MainActivity import com.example.mathseduc.MainActivity
import com.example.mathseduc.MultiActivity import com.example.mathseduc.MultiActivity
@ -39,6 +46,18 @@ fun HomePage() {
.fillMaxSize() .fillMaxSize()
.padding(16.dp) .padding(16.dp)
val view = LocalView.current
val isPortrait = LocalConfiguration.current.orientation == Configuration.ORIENTATION_PORTRAIT
val window = (view.context as Activity).window
WindowCompat.setDecorFitsSystemWindows(window, false)
val windowInsetsController = remember {
WindowCompat.getInsetsController(window, window.decorView)
}
// Hide the status bar
windowInsetsController?.hide(WindowInsetsCompat.Type.statusBars())
Column( Column(
modifier = modifier, modifier = modifier,
verticalArrangement = Arrangement.Center, verticalArrangement = Arrangement.Center,
@ -62,7 +81,7 @@ fun HomePage() {
shape = RoundedCornerShape(15), shape = RoundedCornerShape(15),
colors = ButtonDefaults.buttonColors(Colors.Green), colors = ButtonDefaults.buttonColors(Colors.Green),
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth(if (isPortrait) 1f else 0.5f)
.height(48.dp) .height(48.dp)
) { ) {
@ -90,7 +109,7 @@ fun HomePage() {
shape = RoundedCornerShape(15), shape = RoundedCornerShape(15),
colors = ButtonDefaults.buttonColors(Colors.Orange), colors = ButtonDefaults.buttonColors(Colors.Orange),
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth(if (isPortrait) 1f else 0.5f)
.height(48.dp) .height(48.dp)
) { ) {
Text( Text(
@ -108,7 +127,7 @@ fun HomePage() {
shape = RoundedCornerShape(15), shape = RoundedCornerShape(15),
colors = ButtonDefaults.buttonColors(Colors.Grey), colors = ButtonDefaults.buttonColors(Colors.Grey),
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth(if (isPortrait) 1f else 0.5f)
.height(48.dp) .height(48.dp)
.padding(horizontal = 16.dp) .padding(horizontal = 16.dp)
) { ) {

Loading…
Cancel
Save