Réarrangement des dossiers + affiches des articles

Vue
Shana CASCARRA 4 months ago
parent f0ebbb91fb
commit 6a414e3796

@ -1,56 +1,12 @@
package com.example.veraxapplication
import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.ui.graphics.Color
import androidx.compose.material3.Text
import androidx.compose.ui.res.colorResource
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
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.draw.clip
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.rememberImagePainter
import coil.size.Scale
import com.example.veraxapplication.data.Article
import com.example.veraxapplication.data.Paragraph
import com.example.veraxapplication.ui.theme.Salmon
import com.example.veraxapplication.ui.topBar.*
// doc navBar: https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)
// doc compose, pleins de trucs: https://developer.android.com/jetpack/compose/text?hl=fr
//doc couleur background pas finie: https://developer.android.com/jetpack/compose/components/scaffold
@ -59,184 +15,19 @@ import com.example.veraxapplication.ui.theme.Salmon
class MainActivity : ComponentActivity() {
// un truc vite fait pour avoir un visi
// un truc vite fait pour avoir un visu
var article = listOf("Thinkerview", "thinkerview.jgp", "Thinkerview est une chaîne youtube d'interview-débat")
var articles = listOf( Article("Thinkerview", "This is a descrition", Author = "IAmAGreatAuthor", Image = "https://www.gstatic.com/webp/gallery/1.jpg", LectureTime = "12", Content = listOf(Paragraph("This is a paragraph"), Paragraph("This is another paragraph"), Paragraph("This is a third paragraph"))))
var articles = listOf( Article("Thinkerview", "This is a descrition", Author = "IAmAGreatAuthor", Image = "https://www.gstatic.com/webp/gallery/1.jpg", LectureTime = "12", Content = listOf(Paragraph("This is a paragraph"), Paragraph("This is another paragraph"), Paragraph("This is a third paragraph"))), Article("Thinkerview2", "This is a descrition2", Author = "IAmAGreatAuthor2", Image = "https://www.gstatic.com/webp/gallery/1.jpg", LectureTime = "122", Content = listOf(Paragraph("This is a paragraph2"), Paragraph("This is another paragraph2"), Paragraph("This is a third paragraph2"))))
var theme = listOf("Economique","Culture","Politique","Faits divers")
var color = Color(0xFF00FF00)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TopBarVerax(theme = theme, article = articles)
TopBarVerax(theme = theme, articles = articles)
// allez sur la doc de Scaffold sur Android Dev et si vous comprenez comment on doit faire bien ouej
}
}
}
// Il faudrait mettre ca dans un fichier appart mais je connais plus les conventions ...
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarVerax(theme : List<String>, article : List<Article>) {
var leMenu by remember {
mutableStateOf(false)
}
Row() {
Scaffold(
topBar = {
CenterAlignedTopAppBar(
title = {
Text(
text = "Verax",
style = TextStyle(fontSize = 35.sp),
color = colorResource(R.color.red),
textAlign = TextAlign.Center,
/*backcolor = topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer),*/ //version recommandée par le prof
modifier = Modifier.fillMaxWidth()
)
},
navigationIcon = {
IconButton(onClick = { /* action() */ }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Retour",
Modifier.size(30.dp)
)
}
},
actions = {
IconButton(onClick = { leMenu = !leMenu }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Menu",
Modifier.size(35.dp)
)
}
DropdownMenu(
expanded = leMenu, onDismissRequest = { leMenu = false },
modifier = Modifier
.background(Color.hsl(0.08F, 1F, 0.96F))
) {
theme.sorted().forEach {
DropdownMenuItem(
text = {
Text(
it,
style = TextStyle(fontSize = 25.sp),
modifier = Modifier
.padding(10.dp)
)
},
onClick = { /* faut un moyen d'appeler une methode diff pour chaque, ca doit etre faisable facilement */ }
)
}
}
}
)
},
bottomBar = {
// Faudrait pouvoir faire un flex sur les boutons parce que là ils sont juste côte à côte
BottomAppBar(containerColor = Color.Black, contentColor = Color.White) {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Filled.Home,
contentDescription = "Home",
Modifier.size(35.dp)
)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Filled.Person,
contentDescription = "Account",
Modifier.size(35.dp)
)
}
}
}
) { innerPadding ->
Column(
modifier = Modifier
.padding(innerPadding),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
AffichageUnArticle(article = article)
}
}
}
}
@Composable
fun AffichageUnArticle(article : List<Article>){
Column() {
for(e in article){
DisplayTitle(title = e.Title)
DisplayHeader(author = e.Author, description = e.Description, lectureTime = e.LectureTime)
DisplayImage(image = e.Image)
DisplayContentArticle(content = e.Content)
}
}
}
@Composable
fun DisplayImage(image: String) {
Log.d("DisplayImage", "Chargement de l'image à partir de l'URL : $image")
val painter = rememberImagePainter(
data = image,
builder = {
scale(Scale.FILL)
}
)
Log.d("DisplayImage", "Painter créé avec succès")
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
androidx.compose.foundation.Image(
painter = painter,
contentDescription = null,
modifier = Modifier.fillMaxSize(),
)
}
}
@Composable
fun DisplayHeader(author: String, description: String, lectureTime: String) {
Box(modifier = Modifier
.fillMaxWidth()
.border(width = 1.dp, color = Color.Black, shape = RoundedCornerShape(10.dp))
.clip(RoundedCornerShape(10.dp))
.background(Salmon)
.padding(10.dp)) {
Column () {
Text(text = author)
Text(text = description)
Text(text = "Lecture Time: " + lectureTime + " minutes")
}
}
}
@Composable
fun DisplayTitle(title: String) {
Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally){
Text(text = title, fontFamily = FontFamily.Serif, fontSize = 30.sp)
}
}
@Composable
fun DisplayContentArticle(content: List<Paragraph>) {
Column {
for(e in content){
Text(text = e.Content, fontSize = 15.sp, fontFamily = FontFamily.Serif, textAlign = TextAlign.Justify, modifier = Modifier.padding(10.dp))
}
}
}

@ -0,0 +1,143 @@
package com.example.veraxapplication.ui.article
import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
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.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
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.text.font.FontFamily
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.rememberImagePainter
import coil.size.Scale
import com.example.veraxapplication.data.Article
import com.example.veraxapplication.data.Paragraph
import com.example.veraxapplication.ui.theme.Salmon
@Composable
fun AffichageLesArticles(articles : List<Article>){
//Row(modifier = Modifier.verticalScroll(rememberScrollState())){
for(article in articles){
AffichageUnArticle(e = article)
}
//}
}
@Composable
fun AffichageUnArticle(e : Article){
Column( modifier = Modifier.verticalScroll(rememberScrollState())) {
/*DisplayTitle(title = e.Title)
DisplayHeader(author = e.Author, description = e.Description, lectureTime = e.LectureTime)
DisplayImage(image = e.Image)
DisplayContentArticle(content = e.Content)*/
Text(text = e.Title, fontFamily = FontFamily.Serif, fontSize = 30.sp)
Box(modifier = Modifier
.fillMaxWidth()
.border(width = 1.dp, color = Color.Black, shape = RoundedCornerShape(10.dp))
.clip(RoundedCornerShape(10.dp))
.background(Salmon)
.padding(10.dp)) {
Column () {
Text(text = e.Author)
Text(text = e.Description)
Text(text = "Lecture Time: " + e.LectureTime + " minutes")
}
}
Image(
painter = rememberImagePainter(
data = e.Image,
builder = {
scale(Scale.FILL)
}
),
contentDescription = null,
modifier = Modifier.size(250.dp),
)
Column {
for(c in e.Content){
Text(text = c.Content, fontSize = 15.sp, fontFamily = FontFamily.Serif, textAlign = TextAlign.Justify, modifier = Modifier.padding(10.dp))
}
}
}
}
@Composable
fun DisplayImage(image: String) {
Log.d("DisplayImage", "Chargement de l'image à partir de l'URL : $image")
Log.d("DisplayImage", "Painter créé avec succès")
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Image(
painter = rememberImagePainter(
data = image,
builder = {
scale(Scale.FILL)
}
),
contentDescription = null,
modifier = Modifier.fillMaxSize(),
)
}
}
@Composable
fun DisplayHeader(author: String, description: String, lectureTime: String) {
Box(modifier = Modifier
.fillMaxWidth()
.border(width = 1.dp, color = Color.Black, shape = RoundedCornerShape(10.dp))
.clip(RoundedCornerShape(10.dp))
.background(Salmon)
.padding(10.dp)) {
Column () {
Text(text = author)
Text(text = description)
Text(text = "Lecture Time: " + lectureTime + " minutes")
}
}
}
@Composable
fun DisplayTitle(title: String) {
Column(modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally){
Text(text = title, fontFamily = FontFamily.Serif, fontSize = 30.sp)
}
}
@Composable
fun DisplayContentArticle(content: List<Paragraph>) {
Column {
for(e in content){
Text(text = e.Content, fontSize = 15.sp, fontFamily = FontFamily.Serif, textAlign = TextAlign.Justify, modifier = Modifier.padding(10.dp))
}
}
}

@ -0,0 +1,132 @@
package com.example.veraxapplication.ui.topBar
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
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.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.veraxapplication.R
import com.example.veraxapplication.data.Article
import com.example.veraxapplication.ui.article.*
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopBarVerax(theme : List<String>, articles : List<Article>) {
var leMenu by remember {
mutableStateOf(false)
}
Row() {
Scaffold(
topBar = {
CenterAlignedTopAppBar(
title = {
Text(
text = "Verax",
style = TextStyle(fontSize = 35.sp),
color = colorResource(R.color.red),
textAlign = TextAlign.Center,
/*backcolor = topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer),*/ //version recommandée par le prof
modifier = Modifier.fillMaxWidth()
)
},
navigationIcon = {
IconButton(onClick = { /* action() */ }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Retour",
Modifier.size(30.dp)
)
}
},
actions = {
IconButton(onClick = { leMenu = !leMenu }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Menu",
Modifier.size(35.dp)
)
}
DropdownMenu(
expanded = leMenu, onDismissRequest = { leMenu = false },
modifier = Modifier
.background(Color.hsl(0.08F, 1F, 0.96F))
) {
theme.sorted().forEach {
DropdownMenuItem(
text = {
Text(
it,
style = TextStyle(fontSize = 25.sp),
modifier = Modifier
.padding(10.dp)
)
},
onClick = { /* faut un moyen d'appeler une methode diff pour chaque, ca doit etre faisable facilement */ }
)
}
}
}
)
}/*,
bottomBar = {
// Faudrait pouvoir faire un flex sur les boutons parce que là ils sont juste côte à côte
BottomAppBar(containerColor = Color.Black, contentColor = Color.White) {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Filled.Home,
contentDescription = "Home",
Modifier.size(35.dp)
)
}
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Filled.Person,
contentDescription = "Account",
Modifier.size(35.dp)
)
}
}
}*/
) { innerPadding ->
Column(
modifier = Modifier
.padding(innerPadding),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
AffichageLesArticles(articles = articles)
}
}
}
}
Loading…
Cancel
Save