WhatTheFantasy
/
WF-Android
15
0
Fork 0
Code Issues 20 Pull Requests Packages Projects 1 Releases Wiki Activity

NavBar inférieur et supérieur faite style bouton a corigé & mettre la nav dans les onclick

Browse Source
pull/24/head
brongniart 2 months ago
parent c0301aa604
commit 0224bbf149
9 changed files with 198 additions and 106 deletions
Show Stats Download Patch File Download Diff File

81
What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/components/NavBar.kt
Unescape View File

@ -4,29 +4,92 @@ import android.widget.ImageView
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.what_the_fantasy.R
import com.example.what_the_fantasy.ui.navigations.AppNavigator
import com.example.what_the_fantasy.ui.theme.colorNavBar
@Composable
fun NavBar(actualPage :String) {
FlowRow(modifier = Modifier
.background(colorNavBar),
Arrangement.SpaceAround
){
Text("Favorie")
Image( painter = painterResource(R.mipmap.ic_launcher_foreground), contentDescription = "Accueil")
Text("Quiz")
fun NavBar(content : @Composable ()-> Unit ) {
val nav = AppNavigator()
Column(
modifier = Modifier
.fillMaxSize()
) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(55.dp)
.background(colorNavBar)
.padding(10.dp),
Arrangement.SpaceBetween,
verticalAlignment = Alignment.Bottom
) {
Button(onClick = {}, Modifier.background(Color.Unspecified)) {
Text("Profile", fontSize = 25.sp, color = Color.White)
}
Button(onClick = {}) {
Text("Theme", fontSize = 25.sp, color = Color.White)
}
}
Box(modifier = Modifier.background(Color.Black).fillMaxHeight(0.92f)){
content()
}
Row(modifier = Modifier
.background(colorNavBar)
.fillMaxSize(),
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.CenterVertically
) {
Button(onClick = {}) {
Text("Favorie", fontSize = 25.sp, color = Color.White)
}
Button(onClick = {}) {
Image(
painter = painterResource(R.mipmap.ic_launcher_foreground),
contentDescription = "Accueil",
modifier = Modifier
.size(100.dp)
)
}
Button(onClick = {}) {
Text("Quiz", fontSize = 25.sp, color = Color.White)
}
}
}
}

7
What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/AccueilPage.kt
Unescape View File

@ -1,6 +1,11 @@
package com.example.what_the_fantasy.ui.screens
import androidx.compose.runtime.Composable
import com.example.what_the_fantasy.ui.components.NavBar
@Composable
fun AccueilPage() {}
fun AccueilPage() {
NavBar {
}
}

7
What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/FavoritePage.kt
Unescape View File

@ -1,6 +1,11 @@
package com.example.what_the_fantasy.ui.screens
import androidx.compose.runtime.Composable
import com.example.what_the_fantasy.ui.components.NavBar
@Composable
fun FavoritePage() {}
fun FavoritePage() {
NavBar {
}
}

4
What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/LoginPage.kt
Unescape View File

@ -50,7 +50,6 @@ fun LoginPage(navControllerSignUp: () -> Unit, navControllerProfil: () -> Unit)
val users = UserStub.allUsers;
Box(
modifier = Modifier
.fillMaxSize()
@ -76,8 +75,9 @@ fun LoginPage(navControllerSignUp: () -> Unit, navControllerProfil: () -> Unit)
SpaceHeightComponent(16)
CreateAccountButton(R.string.ButtonCreateLogin,12, Color.White, navControllerSignUp)
}
NavBar("")
}
}

78
What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/ProfilPage.kt
Unescape View File

@ -62,6 +62,7 @@ import com.example.what_the_fantasy.R
import com.example.what_the_fantasy.data.local.QuestionStub
import com.example.what_the_fantasy.data.local.UserStub
import com.example.what_the_fantasy.ui.components.ErrorMessageProfileComponent
import com.example.what_the_fantasy.ui.components.NavBar
import com.example.what_the_fantasy.ui.components.SpaceHeightComponent
import com.example.what_the_fantasy.ui.components.TitlePageComponent
import com.example.what_the_fantasy.ui.theme.What_The_FantasyTheme
@ -75,47 +76,48 @@ fun ProfilPage(navController: NavController) {
)
val user = UserStub.allUsers
val index = 2 // Pour changer l'utilisateur pour le moment
Box(
modifier = Modifier
.fillMaxSize()
.background(Color(0xFF100C1B)),
contentAlignment = Alignment.Center
) {
Column(
NavBar {
Box(
modifier = Modifier
.fillMaxWidth(0.9f)
.padding(20.dp)
.clip(RoundedCornerShape(16.dp))
.background(gradient)
.padding(20.dp),
horizontalAlignment = Alignment.CenterHorizontally
.fillMaxSize()
.background(Color(0xFF100C1B)),
contentAlignment = Alignment.Center
) {
Column(
modifier = Modifier
.fillMaxWidth(0.9f)
.padding(20.dp)
.clip(RoundedCornerShape(16.dp))
.background(gradient)
.padding(20.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
// Titre
TitlePageComponent(R.string.titleProfile, 20, Color.White)
SpaceHeightComponent(16)
// Image de profil
ImageProfil(user[index].imgUrl, 120, 2, Color.White)
SpaceHeightComponent(16)
EditUsername(user[index].username)// Édition du Username
SpaceHeightComponent(16)
EditEmail(user[index].email)// Édition du Email
Spacer(modifier = Modifier.height(8.dp))
EditPasswd()
SpaceHeightComponent(16)
// Bouton
ButtonProfile(R.string.ButtonAddQuoteprofile, 18, Color.Black, Color.White)
SpaceHeightComponent(16)
ButtonProfile(R.string.ButtonLanguageprofile, 18, Color.Black, Color.White)
SpaceHeightComponent(16)
ButtonProfile(R.string.ButtonUnlogprofile, 18, Color.Black, Color.White)
// Titre
TitlePageComponent(R.string.titleProfile, 20, Color.White)
SpaceHeightComponent(16)
// Image de profil
ImageProfil(user[index].imgUrl, 120, 2, Color.White)
SpaceHeightComponent(16)
EditUsername(user[index].username)// Édition du Username
SpaceHeightComponent(16)
EditEmail(user[index].email)// Édition du Email
Spacer(modifier = Modifier.height(8.dp))
EditPasswd()
SpaceHeightComponent(16)
// Bouton
ButtonProfile(R.string.ButtonAddQuoteprofile,18, Color.Black, Color.White)
SpaceHeightComponent(16)
ButtonProfile(R.string.ButtonLanguageprofile,18, Color.Black, Color.White)
SpaceHeightComponent(16)
ButtonProfile(R.string.ButtonUnlogprofile, 18, Color.Black, Color.White)
}
}
}
}

106
What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/QuizPage.kt
Unescape View File

@ -27,6 +27,7 @@ import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.what_the_fantasy.data.local.QuestionStub
import com.example.what_the_fantasy.data.model.Question
import com.example.what_the_fantasy.ui.components.NavBar
@Composable
fun QuizPage() {
@ -37,68 +38,69 @@ fun QuizPage() {
)
val questions = QuestionStub.allQuestions
Box(
modifier = Modifier
.fillMaxSize()
.background(Color(0xFF100C1B)) // Fond global de l'écran
.padding(16.dp) // Marges autour de tout le contenu
) {
// Numéro de la question en haut
Text(
text = "Question numéro : " + questions.first().id.toString(),
color = Color.White,
fontSize = 18.sp, // Taille réduite pour tenir sur un écran portrait
modifier = Modifier
.align(Alignment.TopCenter) // Position en haut au centre
.padding(top = 16.dp) // Un peu d'espace en haut
)
// Contenu centré, mais avec une gestion plus équilibrée du placement
Column(
NavBar {
Box(
modifier = Modifier
.fillMaxSize()
.padding(top = 48.dp), // Réduit l'espace entre le numéro de la question et la question elle-même
verticalArrangement = Arrangement.Center, // Centre verticalement
horizontalAlignment = Alignment.CenterHorizontally // Centre horizontalement
.background(Color(0xFF100C1B)) // Fond global de l'écran
.padding(16.dp) // Marges autour de tout le contenu
) {
// Question principale
// Numéro de la question en haut
Text(
text = questions.first().question,
text = "Question numéro : " + questions.first().id.toString(),
color = Color.White,
fontSize = 22.sp, // Taille plus petite pour tenir sur un écran portrait
modifier = Modifier.padding(bottom = 16.dp) // Réduit l'espacement entre la question et les réponses
fontSize = 18.sp, // Taille réduite pour tenir sur un écran portrait
modifier = Modifier
.align(Alignment.TopCenter) // Position en haut au centre
.padding(top = 16.dp) // Un peu d'espace en haut
)
// Liste des réponses
val answers = listOf(
questions.first().ansA,
questions.first().ansB,
questions.first().ansC,
questions.first().ansD
)
// Contenu centré, mais avec une gestion plus équilibrée du placement
Column(
modifier = Modifier
.fillMaxSize()
.padding(top = 48.dp), // Réduit l'espace entre le numéro de la question et la question elle-même
verticalArrangement = Arrangement.Center, // Centre verticalement
horizontalAlignment = Alignment.CenterHorizontally // Centre horizontalement
) {
// Question principale
Text(
text = questions.first().question,
color = Color.White,
fontSize = 22.sp, // Taille plus petite pour tenir sur un écran portrait
modifier = Modifier.padding(bottom = 16.dp) // Réduit l'espacement entre la question et les réponses
)
// Liste des réponses
val answers = listOf(
questions.first().ansA,
questions.first().ansB,
questions.first().ansC,
questions.first().ansD
)
// Pour chaque réponse, on applique une Box avec un espacement uniforme
answers.forEach { answer ->
Box(
modifier = Modifier
.width(220.dp) // Largeur plus petite pour que ça tienne mieux
.height(50.dp) // Hauteur ajustée
.background(
brush = gradient,
shape = RoundedCornerShape(16.dp) // Coins arrondis
// Pour chaque réponse, on applique une Box avec un espacement uniforme
answers.forEach { answer ->
Box(
modifier = Modifier
.width(220.dp) // Largeur plus petite pour que ça tienne mieux
.height(50.dp) // Hauteur ajustée
.background(
brush = gradient,
shape = RoundedCornerShape(16.dp) // Coins arrondis
)
.clickable { /* Action pour la réponse */ }
.padding(horizontal = 8.dp), // Padding interne
contentAlignment = Alignment.Center
) {
Text(
text = answer,
color = Color.White,
fontSize = 18.sp // Taille du texte ajustée pour un écran portrait
)
.clickable { /* Action pour la réponse */ }
.padding(horizontal = 8.dp), // Padding interne
contentAlignment = Alignment.Center
) {
Text(
text = answer,
color = Color.White,
fontSize = 18.sp // Taille du texte ajustée pour un écran portrait
)
}
Spacer(modifier = Modifier.height(16.dp)) // Espacement réduit entre les réponses
}
Spacer(modifier = Modifier.height(16.dp)) // Espacement réduit entre les réponses
}
}
}

7
What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/QuotePage.kt
Unescape View File

@ -1,6 +1,11 @@
package com.example.what_the_fantasy.ui.screens
import androidx.compose.runtime.Composable
import com.example.what_the_fantasy.ui.components.NavBar
@Composable
fun QuotePage() {}
fun QuotePage() {
NavBar {
}
}

7
What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/SearchPage.kt
Unescape View File

@ -1,6 +1,11 @@
package com.example.what_the_fantasy.ui.screens
import androidx.compose.runtime.Composable
import com.example.what_the_fantasy.ui.components.NavBar
@Composable
fun SearchPage() {}
fun SearchPage() {
NavBar {
}
}

7
What_The_Fantasy/app/src/main/java/com/example/what_the_fantasy/ui/screens/SubmitQuotePage.kt
Unescape View File

@ -1,6 +1,11 @@
package com.example.what_the_fantasy.ui.screens
import androidx.compose.runtime.Composable
import com.example.what_the_fantasy.ui.components.NavBar
@Composable
fun SubmitQuotePage() {}
fun SubmitQuotePage() {
NavBar {
}
}
Write Preview
Loading…
Cancel
Save