нужно исправить верстку входа

This commit is contained in:
VictoriaPresnyakova 2023-10-03 14:45:00 +04:00
parent 11bc140481
commit 72c903a0b3
16 changed files with 511 additions and 118 deletions

View File

@ -5,7 +5,7 @@ plugins {
android {
namespace = "com.example.androidlabs"
compileSdk = 33
compileSdk = 34
defaultConfig {
applicationId = "com.example.androidlabs"
@ -48,15 +48,14 @@ android {
dependencies {
implementation("androidx.core:core-ktx:1.9.0")
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.1")
implementation("androidx.activity:activity-compose:1.7.0")
implementation("androidx.core:core-ktx:1.12.0")
implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.2")
implementation("androidx.activity:activity-compose:1.7.2")
implementation(platform("androidx.compose:compose-bom:2023.03.00"))
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-graphics")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.material3:material3")
implementation("androidx.leanback:leanback:1.0.0")
implementation("androidx.compose.material:material")
testImplementation("junit:junit:4.13.2")
androidTestImplementation("androidx.test.ext:junit:1.1.5")
androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
@ -64,4 +63,7 @@ dependencies {
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-tooling")
debugImplementation("androidx.compose.ui:ui-test-manifest")
implementation("androidx.navigation:navigation-compose:2.7.3")
}

View File

@ -1,6 +1,4 @@
package com.example.androidlabs.homeScreen.CardItem
import android.media.Image
package com.example.androidlabs
data class Hotel(

View File

@ -3,45 +3,14 @@ package com.example.androidlabs
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
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.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.LocationOn
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
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.androidlabs.homeScreen.CardItem.HotelScrollBar
import com.example.androidlabs.ui.theme.AndroidLabsTheme
import com.example.androidlabs.Navigation.Navigate
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
HotelScrollBar()
}
setContent {
Navigate()
}
}
}

View File

@ -0,0 +1,31 @@
package com.example.androidlabs.Navigation
import androidx.compose.runtime.Composable
import androidx.navigation.NavHostController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import com.example.androidlabs.homeScreen.HomeScreen
import com.example.androidlabs.profileScreen.profile.ProfileScreen
import com.example.androidlabs.profileScreen.signIn.LoginScreen
@Composable
fun NavController(navController: NavHostController){
NavHost(
navController = navController,
startDestination = NavItem.Home.route
){
composable(NavItem.Home.route){
HomeScreen()
}
// composable(NavItem.Like.route){
// LikeScreen()
// }
composable(NavItem.Profile.route) {
ProfileScreen(navController)
}
composable(NavItem.SignIn.route){
LoginScreen(navController)
}
}
}

View File

@ -0,0 +1,15 @@
package com.example.androidlabs.Navigation
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Person
import androidx.compose.ui.graphics.vector.ImageVector
sealed class NavItem(val route: String, val icon: ImageVector?){
object Home : NavItem("home", Icons.Default.Home)
object Like : NavItem("like", Icons.Default.Favorite)
//object Order : NavItem("order", Icons.Default.ShoppingCart)
object Profile : NavItem("profile", Icons.Default.Person)
object SignIn : NavItem("login", null)
}

View File

@ -0,0 +1,83 @@
package com.example.androidlabs.Navigation
import android.annotation.SuppressLint
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.BottomNavigation
import androidx.compose.material.BottomNavigationItem
import androidx.compose.material.Icon
import androidx.compose.material.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.compose.currentBackStackEntryAsState
import androidx.navigation.compose.rememberNavController
@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun Navigate(){
val navController = rememberNavController()
val listItem = listOf(
NavItem.Home,
NavItem.Like,
NavItem.Profile,
)
Scaffold(bottomBar = {
BottomNavigation(
backgroundColor = Color.White
) {
val navBackStackEntry = navController.currentBackStackEntryAsState()
val currentState = navBackStackEntry.value
listItem.forEach { it ->
val isSelected = currentState?.destination?.route == it.route
BottomNavigationItem(
selected = isSelected,
onClick = {
if(!isSelected){
navController.graph.startDestinationRoute?.let {
navController.popBackStack(it, inclusive = true)
}
navController.navigate(it.route){
launchSingleTop
}
}
navController.navigate(it.route)
},
icon = {
val iconModifier = if (isSelected) {
Modifier
.background(color = Color.LightGray, shape = CircleShape)
.padding(8.dp)
} else {
Modifier
}
it.icon?.let { it1 ->
Icon(
imageVector = it1,
contentDescription = null,
modifier = iconModifier.then(Modifier.size(24.dp))
)
}
}
)
}
}
}) {
NavController(navController = navController)
}
}
@Composable
@Preview
fun NavigatePreview(){
Navigate()
}

View File

@ -1,6 +1,9 @@
package com.example.androidlabs.homeScreen.CardItem
import android.util.Log
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
@ -11,34 +14,34 @@ import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.LocationOn
import androidx.compose.material.icons.filled.Star
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CardElevation
import androidx.compose.material3.Text
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
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.androidlabs.Hotel
import com.example.androidlabs.R
import com.example.androidlabs.ui.theme.AndroidLabsTheme
@Composable
fun Card (hotel: Hotel){
androidx.compose.material3.Card(
androidx.compose.material.Card(
modifier = Modifier
.fillMaxWidth()
.padding(10.dp),
.padding(10.dp)
.clickable {
Log.d("My log", "Clicked")
},
shape = RoundedCornerShape(15.dp),
elevation = CardDefaults.cardElevation(
defaultElevation = 20.dp
) ) {
elevation = 5.dp
) {
Box(
//modifier = Modifier.background(Color.Green)
modifier = Modifier.background(Color.White)
) {
Row(
modifier = Modifier
@ -65,31 +68,21 @@ fun Card (hotel: Hotel){
) {
Text(text = hotel.name, fontSize = 40.sp, fontWeight = FontWeight.Bold)
Row() {
Image(
imageVector = Icons.Filled.Star,
contentDescription = "location",
modifier = Modifier.size(20.dp)
)
Image(
imageVector = Icons.Filled.Star,
contentDescription = "location",
modifier = Modifier.size(20.dp)
)
Image(
imageVector = Icons.Filled.Star,
contentDescription = "location",
modifier = Modifier.size(20.dp)
)
Image(
imageVector = Icons.Filled.Star,
contentDescription = "location",
modifier = Modifier.size(20.dp)
)
Image(
imageVector = Icons.Filled.Star,
contentDescription = "location",
modifier = Modifier.size(20.dp)
)
for (i in 1..hotel.stars){
Image(
painter = painterResource(id = R.drawable.star_rate),
contentDescription = "star",
modifier = Modifier
.size(20.dp)
)
}
for (i in 1.. 5 - hotel.stars){
Image(
painter = painterResource(id = R.drawable.star_outline),
contentDescription = "star",
modifier = Modifier.size(20.dp)
)
}
}
Text(text = hotel.location)
}
@ -108,6 +101,6 @@ fun Card (hotel: Hotel){
@Composable
fun CardPreview() {
Card(Hotel("hotel", R.drawable.img, 5, "location"))
Card(Hotel("hotel", R.drawable.img, 4, "location"))
}

View File

@ -1,26 +0,0 @@
package com.example.androidlabs.homeScreen.CardItem
import androidx.compose.foundation.layout.Column
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.example.androidlabs.R
@Composable
fun HotelScrollBar() {
Column {
Card(Hotel("hotel", R.drawable.img, 5, "location"))
Card(Hotel("hotel", R.drawable.img, 5, "location"))
Card(Hotel("hotel", R.drawable.img, 5, "location"))
Card(Hotel("hotel", R.drawable.img, 5, "location"))
Card(Hotel("hotel", R.drawable.img, 5, "location"))
Card(Hotel("hotel", R.drawable.img, 5, "location"))
Card(Hotel("hotel", R.drawable.img, 5, "location"))
Card(Hotel("hotel", R.drawable.img, 5, "location"))
}
}
@Preview(showBackground = true)
@Composable
fun HotelPreview() {
HotelScrollBar()
}

View File

@ -0,0 +1,68 @@
package com.example.androidlabs.homeScreen
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
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.androidlabs.R
import com.example.androidlabs.homeScreen.CardItem.Card
import com.example.androidlabs.Hotel
import com.example.androidlabs.homeScreen.SearchField.SearchField
@Composable
fun HomeScreen() {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White)
) {
Box(modifier = Modifier
.background(Color(red = 0x2A, green = 0x7D, blue = 0xB9, alpha = 0xFF))
.fillMaxHeight(0.18f)
){
Column(
modifier = Modifier
.fillMaxHeight(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.SpaceEvenly
){
Text(text= "Beautiful Place to Live", fontSize = 20.sp, fontWeight = FontWeight.Bold,
color = Color.White)
Text(text="Find a Source you want to spent times", color = Color.White)
SearchField(
modifier = Modifier
.padding(horizontal = 10.dp, vertical = 20.dp)
) { searchText ->
// Обработка введенного текста поиска
}
}
}
LazyColumn (
modifier = Modifier
//.verticalScroll(rememberScrollState())
){
items(count = 100 ){
Card(Hotel("hotel", R.drawable.img, it % 6, "location"))
}
}
}
}
@Preview(showBackground = true)
@Composable
fun HotelPreview() {
HomeScreen()
}

View File

@ -0,0 +1,76 @@
package com.example.androidlabs.homeScreen.SearchField
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
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.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
@Composable
fun SearchField(
modifier: Modifier = Modifier,
onSearch: (String) -> Unit
) {
var searchText by remember { mutableStateOf("") }
Box(
modifier = modifier
.clip(RoundedCornerShape(30.dp))
.fillMaxWidth()
.background(Color.LightGray)
,
) {
Row(
modifier = Modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
content = {
BasicTextField(
value = searchText,
singleLine = true,
onValueChange = {
searchText = it
onSearch(it)
},
textStyle = TextStyle(color = Color.Black),
modifier = Modifier
.weight(1f)
)
Image(
imageVector = Icons.Filled.Search,
contentDescription = "search",
modifier = Modifier.size(50.dp)
.padding(3.dp)
)
}
)
}
}
@Preview(showBackground = true)
@Composable
fun FieldPreview() {
SearchField(
) { searchText ->
// Обработка введенного текста поиска
}
}

View File

@ -0,0 +1,60 @@
package com.example.androidlabs.profileScreen.profile
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.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable;
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavHostController
import androidx.navigation.compose.rememberNavController
@Composable
fun ProfileScreen(navController: NavHostController) {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
){
Row(
modifier = Modifier.padding(vertical = 16.dp)
){
Button(
onClick = {
navController.navigate("login")
},
modifier = Modifier
.requiredSize(100.dp, 40.dp)
) {
Text(text = "Sign In")
}
}
Row{
Button(
onClick = { /*TODO*/ },
modifier = Modifier
.requiredSize(100.dp, 40.dp)
) {
Text(text = "Sign Up")
}
}
}
}
@Composable
@Preview
fun ProfileScreenPreview(){
val navController = rememberNavController()
ProfileScreen(navController = navController)
}

View File

@ -0,0 +1,110 @@
package com.example.androidlabs.profileScreen.signIn
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material.Button
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import androidx.navigation.NavHostController
import androidx.compose.material.Text as Text1
@Composable
fun LoginScreen(navController : NavHostController) {
var username by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White)
.padding(15.dp, 0.dp)
,
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text1(text = "Sign In", fontSize = 24.sp, fontWeight = FontWeight.Bold)
Spacer(modifier = Modifier.height(16.dp))
BasicTextField(
value = username,
onValueChange = { username = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(8.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp))
.padding(8.dp),
singleLine = true,
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
)
BasicTextField(
value = password,
onValueChange = { password = it },
modifier = Modifier
.fillMaxWidth()
.height(50.dp)
.padding(8.dp)
.border(1.dp, Color.Gray, RoundedCornerShape(4.dp))
.padding(8.dp),
singleLine = true,
visualTransformation = PasswordVisualTransformation(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
imeAction = ImeAction.Next
),
keyboardActions = KeyboardActions(
onNext = {
}
),
){
}
Button(
onClick = {
navController.navigate("login")
},
modifier = Modifier.fillMaxWidth()
) {
Text1("Sign In")
}
}
}
fun performLogin(username: String, password: String) {
}
@Composable
@Preview
fun SignInScreen(){
//LoginScreen()
}

View File

@ -1,13 +1,14 @@
package com.example.androidlabs.ui.theme
package com.example.androidlabs.ui.theme
/*
import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColorScheme
import androidx.compose.material.dynamicDarkColorScheme
import androidx.compose.material.dynamicLightColorScheme
import androidx.compose.material.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.toArgb
@ -67,4 +68,6 @@ fun AndroidLabsTheme(
typography = Typography,
content = content
)
}
}
*/

View File

@ -1,5 +1,5 @@
package com.example.androidlabs.ui.theme
/*
import androidx.compose.material3.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
@ -15,7 +15,7 @@ val Typography = Typography(
lineHeight = 24.sp,
letterSpacing = 0.5.sp
)
/* Other default text styles to override
Other default text styles to override
titleLarge = TextStyle(
fontFamily = FontFamily.Default,
fontWeight = FontWeight.Normal,
@ -30,5 +30,6 @@ val Typography = Typography(
lineHeight = 16.sp,
letterSpacing = 0.5.sp
)
*/
)
)
*/

View File

@ -0,0 +1,5 @@
<vector android:height="24dp" android:tint="#000000"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M22,9.24l-7.19,-0.62L12,2 9.19,8.63 2,9.24l5.46,4.73L5.82,21 12,17.27 18.18,21l-1.63,-7.03L22,9.24zM12,15.4l-3.76,2.27 1,-4.28 -3.32,-2.88 4.38,-0.38L12,6.1l1.71,4.04 4.38,0.38 -3.32,2.88 1,4.28L12,15.4z"/>
</vector>

View File

@ -0,0 +1,5 @@
<vector android:height="24dp" android:tint="#000000"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M14.43,10l-2.43,-8l-2.43,8l-7.57,0l6.18,4.41l-2.35,7.59l6.17,-4.69l6.18,4.69l-2.35,-7.59l6.17,-4.41z"/>
</vector>