Начал делать

app/build.gradle.kts

@@ -51,6 +51,7 @@ android {
 
 dependencies {
 
+    implementation("androidx.navigation:navigation-compose:2.6.0")
     implementation("androidx.core:core-ktx:1.9.0")
     implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2")
     implementation("androidx.activity:activity-compose:1.8.0")

app/src/main/java/com/example/mobileapp/MainActivity.kt

@@ -3,13 +3,21 @@ package com.example.mobileapp
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.tooling.preview.Preview
+import androidx.navigation.NavHostController
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
+import com.example.mobileapp.screens.Authorization
+import com.example.mobileapp.screens.ListDataScreen
+import com.example.mobileapp.screens.MailScreen
+import com.example.mobileapp.screens.MainScreen
+import com.example.mobileapp.screens.Registration
 import com.example.mobileapp.ui.theme.MobileAppTheme
 
 class MainActivity : ComponentActivity() {
@@ -22,7 +30,8 @@ class MainActivity : ComponentActivity() {
                     modifier = Modifier.fillMaxSize(),
                     color = MaterialTheme.colorScheme.background
                 ) {
-                    Greeting("Android")
+                    val navController = rememberNavController()
+                    AppNavigation(navController = navController)
                 }
             }
         }
@@ -30,17 +39,24 @@ class MainActivity : ComponentActivity() {
 }
 
 @Composable
-fun Greeting(name: String, modifier: Modifier = Modifier) {
+fun AppNavigation(navController: NavHostController){
-    Text(
+    NavHost(
-        text = "Hello $name!",
+        navController = navController, startDestination = "authorization"
-        modifier = modifier
+    ) {
-    )
+        composable("authorization"){
+            Authorization(navController = navController)
+        }
+        composable("registration"){
+            Registration(navController = navController)
+        }
+        composable("main"){
+            MainScreen(navController = navController)
+        }
+        composable("listdata"){
+            ListDataScreen(navController = navController)
+        }
+        composable("mail"){
+            MailScreen(navController = navController)
         }
-
-@Preview(showBackground = true)
-@Composable
-fun GreetingPreview() {
-    MobileAppTheme {
-        Greeting("Android")
     }
 }

app/src/main/java/com/example/mobileapp/components/InputContent.kt

@@ -0,0 +1,45 @@
+package com.example.mobileapp.components
+
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.example.mobileapp.ui.theme.MobileAppTheme
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun PlaceholderInputField(label: String){
+    var text = remember { mutableStateOf("") }
+
+    OutlinedTextField(
+        value = text.value,
+        onValueChange = {
+            text.value = it
+        },
+        placeholder = {
+            Text(label)
+        },
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(top = 8.dp, start = 16.dp, bottom = 8.dp, end = 16.dp))
+}
+
+@Preview(showBackground = true)
+@Composable
+fun PlaceholderTextFieldPreview() {
+    MobileAppTheme {
+        Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
+            PlaceholderInputField("Email")
+        }
+    }
+}

app/src/main/java/com/example/mobileapp/components/ListContent.kt

@@ -0,0 +1,111 @@
+package com.example.mobileapp.components
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+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.lazy.LazyColumn
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Button
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.example.mobileapp.R
+
+@Composable
+fun DataListScroll(){
+    LazyColumn(
+        horizontalAlignment = Alignment.CenterHorizontally,
+        modifier = Modifier
+            .fillMaxWidth()
+            .fillMaxHeight(0.8f)
+    ){
+        itemsIndexed(
+            listOf("")
+        ){ index, item ->
+            DataListItem()
+        }
+    }
+}
+
+@Preview(showBackground = true)
+@Composable
+fun DataListItem(){
+    val isExpanded = remember {
+        mutableStateOf(false)
+    }
+
+    Card(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(18.dp)
+            .clickable {
+                isExpanded.value = !isExpanded.value
+            },
+        shape = RoundedCornerShape(15.dp),
+        elevation = CardDefaults.cardElevation(
+            defaultElevation = 5.dp
+        )
+    ) {
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            Row(
+                verticalAlignment = Alignment.Top
+            ){
+                Image(painter = painterResource(id = R.drawable.home),
+                    contentDescription = "description",
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier
+                        .padding(8.dp)
+                        .size(128.dp))
+                Column (
+                    modifier = Modifier.padding(8.dp)
+                ){
+                    Text(
+                        text = "Title",
+                        fontSize = 20.sp,
+                        fontWeight = FontWeight.Bold)
+                    Text(text = "description")
+                }
+            }
+            AnimatedVisibility(visible = isExpanded.value) {
+                Row{
+                    Button(
+                        onClick = { /* Действие при нажатии кнопки */ },
+                        modifier = Modifier.padding(top = 8.dp)
+                    ) {
+                        Text("Изменить")
+                    }
+                    Button(
+                        onClick = { /* Действие при нажатии кнопки */ },
+                        modifier = Modifier.padding(top = 8.dp)
+                    ) {
+                        Text("Удалить")
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/example/mobileapp/components/NavigationBar.kt

@@ -0,0 +1,73 @@
+package com.example.mobileapp.components
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+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.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import androidx.navigation.NavHostController
+import com.example.mobileapp.R
+
+@Composable
+fun NavBar(navController: NavHostController) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .fillMaxHeight(0.2f)
+            .padding(bottom = 16.dp),
+        horizontalArrangement = Arrangement.SpaceEvenly,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        NavItem(navController = navController, imageId = R.drawable.home, description = "homeButton", destination = "main")
+        NavItem(navController = navController, imageId = R.drawable.edit, description = "editButton", destination = "listdata")
+        NavItem(navController = navController, imageId = R.drawable.mail, description = "mailButton", destination = "mail")
+        NavItem(navController = navController, imageId = R.drawable.settings, description = "settingsButton", destination = "")
+    }
+}
+
+@Composable
+fun NavItem(navController: NavHostController, imageId: Int, description: String, destination: String){
+    Image(painter = painterResource(id = imageId),
+        contentDescription = description,
+        contentScale = ContentScale.Crop,
+        modifier = Modifier
+            .size(64.dp)
+            .clickable {
+                navController.navigate(destination)
+            })
+}
+
+@Composable
+fun NavigationButton(navController: NavHostController, destination: String, label: String){
+    Button(
+        onClick = {
+            navController.navigate(destination)
+        },
+        modifier = Modifier
+            .fillMaxWidth()
+            .requiredHeight(64.dp)
+            .padding(top = 8.dp, start = 16.dp, bottom = 8.dp, end = 16.dp),
+        shape = RoundedCornerShape(10.dp)
+    ) {
+        Text(
+            text = label,
+            fontSize = 20.sp,
+            fontWeight = FontWeight.Bold
+        )
+    }
+}

app/src/main/java/com/example/mobileapp/screens/Authorization.kt

@@ -0,0 +1,27 @@
+package com.example.mobileapp.screens
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavHostController
+import com.example.mobileapp.components.NavigationButton
+import com.example.mobileapp.components.PlaceholderInputField
+
+@Composable
+fun Authorization(navController: NavHostController){
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        Column (
+            modifier = Modifier.padding(bottom = 8.dp)
+        ) {
+            PlaceholderInputField(label = "Логин")
+            PlaceholderInputField(label = "Пароль")
+            NavigationButton(navController = navController, destination = "main", label = "Вход")
+            NavigationButton(navController = navController, destination = "registration", label = "Регистрация")
+        }
+    }
+}

app/src/main/java/com/example/mobileapp/screens/EditScreen.kt

@@ -0,0 +1,17 @@
+package com.example.mobileapp.screens
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavHostController
+import com.example.mobileapp.components.NavBar
+
+@Composable
+fun EditScreen(navController: NavHostController) {
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        NavBar(navController = navController)
+    }
+}

app/src/main/java/com/example/mobileapp/screens/ListDataScreen.kt

@@ -0,0 +1,19 @@
+package com.example.mobileapp.screens
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavHostController
+import com.example.mobileapp.components.DataListItem
+import com.example.mobileapp.components.NavBar
+
+@Composable
+fun ListDataScreen(navController: NavHostController){
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        DataListItem()
+        NavBar(navController = navController)
+    }
+}

app/src/main/java/com/example/mobileapp/screens/MailScreen.kt

@@ -0,0 +1,17 @@
+package com.example.mobileapp.screens
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavHostController
+import com.example.mobileapp.components.NavBar
+
+@Composable
+fun MailScreen(navController: NavHostController){
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        NavBar(navController = navController)
+    }
+}

app/src/main/java/com/example/mobileapp/screens/MainScreen.kt

@@ -0,0 +1,17 @@
+package com.example.mobileapp.screens
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.navigation.NavHostController
+import com.example.mobileapp.components.NavBar
+
+@Composable
+fun MainScreen(navController: NavHostController) {
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        NavBar(navController = navController)
+    }
+}

app/src/main/java/com/example/mobileapp/screens/Registration.kt

@@ -0,0 +1,29 @@
+package com.example.mobileapp.screens
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavHostController
+import com.example.mobileapp.components.NavigationButton
+import com.example.mobileapp.components.PlaceholderInputField
+
+@Composable
+fun Registration(navController: NavHostController){
+    Column(
+        modifier = Modifier.fillMaxSize()
+    ) {
+        Column (
+            modifier = Modifier.padding(bottom = 8.dp)
+        ) {
+            PlaceholderInputField(label = "Логин")
+            PlaceholderInputField(label = "Email")
+            PlaceholderInputField(label = "Пароль")
+            PlaceholderInputField(label = "Пароль ещё раз")
+            NavigationButton(navController = navController, destination = "main", label = "Зарегистрироваться")
+            NavigationButton(navController = navController, destination = "authorization", label = "Назад")
+        }
+    }
+}