浏览代码

Updated UI for item's list from lazyverticalgrid to lazycolumn and showing items in row

Khubaib 4 月之前
父节点
当前提交
7ddd42d263

+ 0 - 6
app/src/main/java/com/fastest/pass/home/presentation/ui/components/AddNewItemCard.kt

@@ -1,6 +1,5 @@
 package com.fastest.pass.home.presentation.ui.components
 
-import android.util.Log
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
@@ -17,15 +16,10 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 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.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.colorResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign

+ 95 - 0
app/src/main/java/com/fastest/pass/home/presentation/ui/components/AddNewItemRow.kt

@@ -0,0 +1,95 @@
+package com.fastest.pass.home.presentation.ui.components
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+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.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.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.fastest.pass.R
+import com.fastest.pass.home.domain.model.AddNewItem
+
+@Composable
+fun AddNewItemRow(item: AddNewItem, clickType: (ClickTypeAddNewItem) -> Unit) {
+    Row(
+        modifier = Modifier
+            .padding(top = 10.dp)
+            .border(
+                border = BorderStroke(1.dp, colorResource(id = R.color.home_background_color)),
+                shape = RoundedCornerShape(15.dp)
+            )
+            .clip(RoundedCornerShape(15.dp))
+            .background(colorResource(id = R.color.white))
+            .fillMaxWidth()
+            .clickable {
+                clickType.invoke(ClickTypeAddNewItem.valueOf(item.id))
+            },
+        horizontalArrangement = Arrangement.Start,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Surface(
+            modifier = Modifier.padding(start = 10.dp),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = item.icon),
+                contentDescription = "Icon",
+                modifier = Modifier
+                    .padding(start = 0.dp)
+                    .padding(vertical = 15.dp)
+                    .size(34.dp)
+                    .weight(1f),
+            )
+        }
+
+        Surface(
+            modifier = Modifier.padding(start = 15.dp, end = 5.dp),
+            color = Color.Transparent
+        ) {
+            Text(
+                text = item.name,
+                style = MaterialTheme.typography.displayMedium,
+                color = colorResource(id = R.color.gray_splash),
+                maxLines = 1,
+                modifier = Modifier
+                    .weight(1F)
+            )
+        }
+
+        Spacer(modifier = Modifier.weight(1f))
+
+        Surface(
+            modifier = Modifier
+                .padding(end = 15.dp)
+                .align(Alignment.CenterVertically),
+            color = Color.Transparent
+        ) {
+            Image(
+                painter = painterResource(id = R.drawable.arrow_right),
+                contentDescription = "Front_Arrow",
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 0.dp)
+                    .size(24.dp)
+                    .weight(1f),
+            )
+        }
+    }
+}

+ 21 - 9
app/src/main/java/com/fastest/pass/home/presentation/ui/components/AddNewItemsScreen.kt

@@ -14,9 +14,11 @@ import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material3.IconButton
@@ -156,20 +158,30 @@ fun AddNewItemList(clickType: (ClickTypeAddNewItem) -> Unit) {
         modifier = Modifier
             .fillMaxSize()
             .padding(horizontal = 30.dp)
-            .padding(bottom = 15.dp)
+            .padding(vertical = 15.dp)
             .background(Color.Transparent)
     ) {
-        LazyVerticalGrid(
-            columns = GridCells.Fixed(3),
-            modifier = Modifier.weight(1F),
-            contentPadding = PaddingValues(6.dp)
+        LazyColumn(
+            contentPadding = PaddingValues(top = 0.dp)
         ) {
-            items(itemList) { item ->
-                AddNewItemCard(item = item) { itemName ->
-                    clickType(itemName)
+            items(itemList, itemContent = { item ->
+                AddNewItemRow(item = item) {
+                    clickType(it)
                 }
-            }
+            })
         }
+
+//        LazyVerticalGrid(
+//            columns = GridCells.Fixed(3),
+//            modifier = Modifier.weight(1F),
+//            contentPadding = PaddingValues(6.dp)
+//        ) {
+//            items(itemList) { item ->
+//                AddNewItemCard(item = item) { itemName ->
+//                    clickType(itemName)
+//                }
+//            }
+//        }
     }
 
 }

+ 13 - 0
app/src/main/res/drawable/arrow_right.xml

@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="25dp"
+    android:viewportWidth="25"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M9.248,20.785L15.769,14.265C16.538,13.495 16.538,12.235 15.769,11.465L9.248,4.945"
+      android:strokeLineJoin="round"
+      android:strokeWidth="1.5"
+      android:fillColor="#00000000"
+      android:strokeColor="#404B69"
+      android:strokeLineCap="round"/>
+</vector>