add(personal): home personal page

app/src/main/java/com/zaojiao/app/ui/home/HomePlanFragment.kt

@@ -8,6 +8,7 @@ import androidx.compose.ui.platform.ComposeView
 import androidx.fragment.app.Fragment
 import com.zaojiao.app.R
 import com.zaojiao.app.ui.demo.BalanceColumn
+import com.zaojiao.component.personal.HomePersonalPage
 
 class HomePlanFragment : Fragment() {
     override fun onCreateView(
@@ -15,15 +16,13 @@ class HomePlanFragment : Fragment() {
         container: ViewGroup?,
         savedInstanceState: Bundle?
     ): View? {
-        return inflater.inflate(R.layout.fragment_plan, container, false)
+        return inflater.inflate(R.layout.fragment_compose, container, false)
     }
 
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
         super.onViewCreated(view, savedInstanceState)
-
-        val composeStage = view.findViewById<ComposeView>(R.id.compose_stage)
-        composeStage.setContent {
-            BalanceColumn()
+        if (view is ComposeView) {
+            view.setContent { HomePersonalPage() }
         }
     }
 }

app/src/main/java/com/zaojiao/app/ui/home/main/MainComponents.kt

@@ -62,7 +62,7 @@ fun HomeMainTopBarUserInfo() {
         verticalAlignment = Alignment.CenterVertically,
     ) {
         Image(
-            painter = painterResource(id = R.mipmap.ic_message),
+            painter = painterResource(id = R.mipmap.ic_default_avatar),
             contentDescription = "这是用户的头像",
             modifier = Modifier
                 .clip(
@@ -143,7 +143,7 @@ fun HomeMainTopBarSearchBar() {
 @Composable
 fun HomeMainTopMainSignupButton() {
     Image(
-        painter = painterResource(id = R.mipmap.ic_message),
+        painter = painterResource(id = R.mipmap.ic_default_avatar),
         contentDescription = "这是用户的头像",
         modifier = Modifier
             .padding(end = 16.dp)

app/src/main/res/layout/activity_home.xml

@@ -13,7 +13,7 @@
         android:layout_width="0dp"
         android:layout_height="0dp"
         app:defaultNavHost="true"
-        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintBottom_toTopOf="@id/home_nav"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
         app:layout_constraintTop_toTopOf="parent"

app/src/main/res/layout/fragment_person.xml

@@ -1,54 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent">
-
-    <androidx.appcompat.widget.LinearLayoutCompat
-        android:layout_width="match_parent"
-        android:layout_height="41dp"
-        android:fitsSystemWindows="true"
-        android:gravity="center_vertical"
-        android:orientation="vertical">
-
-        <androidx.appcompat.widget.LinearLayoutCompat
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:layout_marginVertical="9dp"
-            android:gravity="end">
-
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="25dp"
-                android:layout_height="23dp"
-                android:src="@mipmap/ic_message" />
-
-            <View
-                android:layout_width="21dp"
-                android:layout_height="0dp" />
-
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="25dp"
-                android:layout_height="23dp"
-                android:src="@mipmap/ic_cart" />
-
-            <View
-                android:layout_width="21dp"
-                android:layout_height="0dp" />
-
-            <androidx.appcompat.widget.AppCompatImageView
-                android:layout_width="25dp"
-                android:layout_height="23dp"
-                android:src="@mipmap/ic_qrcode" />
-
-            <View
-                android:layout_width="13dp"
-                android:layout_height="0dp" />
-        </androidx.appcompat.widget.LinearLayoutCompat>
-
-        <View
-            android:layout_width="0dp"
-            android:layout_height="23dp" />
-
-        <include layout="@layout/include_person_info" />
-
-    </androidx.appcompat.widget.LinearLayoutCompat>
-</ScrollView>

app/src/main/res/layout/include_person_info.xml

@@ -7,7 +7,7 @@
         android:id="@+id/person_avatar"
         android:layout_width="70dp"
         android:layout_height="70dp"
-        android:src="@mipmap/ic_qrcode" />
+        android:src="@mipmap/personal_qrcode" />
 
     <View
         android:layout_width="12dp"

component/common/src/main/java/com/zaojiao/component/common/Colors.kt

@@ -0,0 +1,9 @@
+package com.zaojiao.component.common
+
+import androidx.compose.ui.graphics.Color
+
+object Colors {
+    val FF333333 = Color(0xFF333333)
+    val FF666666 = Color(0xFF666666)
+    val FF999999 = Color(0xFF999999)
+}

component/common/src/main/java/com/zaojiao/component/common/Icons.kt

@@ -0,0 +1,39 @@
+package com.zaojiao.component.common
+
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Paint
+import androidx.compose.ui.graphics.drawscope.drawIntoCanvas
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+
+object Icons {
+
+    @Composable
+    fun Forward(
+        size: Size,
+        color: Color,
+        width: Dp,
+    ) {
+        Canvas(
+            modifier = Modifier.size(size.width.dp, size.height.dp),
+        ) {
+            drawIntoCanvas { canvas ->
+                val paint = Paint()
+                paint.color = color
+                paint.strokeWidth = width.toPx()
+
+                canvas.drawLine(
+                    p1 = Offset.Zero,
+                    p2 = Offset(size.width.dp.toPx(), size.height.dp.toPx()),
+                    paint = paint,
+                )
+            }
+        }
+    }
+}

component/common/src/main/java/com/zaojiao/component/common/Spacer.kt

@@ -0,0 +1,20 @@
+package com.zaojiao.component.common
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+
+@Composable
+fun ColumnScope.Spacer(height: Dp) {
+    return Box(modifier = Modifier.height(height))
+}
+
+@Composable
+fun RowScope.Spacer(width: Dp) {
+    return Box(modifier = Modifier.width(width))
+}

component/personal/src/main/kotlin/com/zaojiao/component/personal/HomePersonalBottom.kt

@@ -0,0 +1,30 @@
+package com.zaojiao.component.personal
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun HomePersonalBottom() {
+    Box(
+        modifier = Modifier
+            .padding(bottom = 20.dp)
+            .padding(vertical = 20.dp)
+            .fillMaxWidth(),
+        contentAlignment = Alignment.Center,
+    ) {
+        Image(
+            painter = painterResource(id = R.mipmap.personal_bottom),
+            contentDescription = "一起成长",
+            modifier = Modifier.size(304.dp, 37.dp)
+        )
+    }
+}

component/personal/src/main/kotlin/com/zaojiao/component/personal/HomePersonalEngage.kt

@@ -0,0 +1,69 @@
+package com.zaojiao.component.personal
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+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.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.zaojiao.component.common.Colors
+import com.zaojiao.component.common.Spacer
+
+
+@Composable
+fun HomePersonalEngage() {
+    Row(
+        modifier = Modifier
+            .padding(bottom = 6.dp)
+            .padding(vertical = 5.dp, horizontal = 8.dp)
+            .fillMaxWidth(),
+        horizontalArrangement = Arrangement.SpaceAround,
+    ) {
+        HomePersonalEngageItem(num = 20, title = "关注")
+        HomePersonalEngageItem(num = 200, title = "粉丝")
+        HomePersonalEngageItem(num = 2999, title = "获赞")
+        HomePersonalEngageItem(num = 2848180, title = "收藏")
+    }
+}
+
+@Composable
+fun RowScope.HomePersonalEngageItem(
+    num: Int = 0,
+    title: String,
+) {
+    Column(
+        modifier = Modifier.weight(1f),
+        horizontalAlignment = Alignment.CenterHorizontally,
+    ) {
+        Text(
+            text = if (num > 999) "999+" else num.toString(),
+            style = TextStyle(
+                fontSize = 17.sp,
+                lineHeight = 17.sp,
+                fontWeight = FontWeight.Medium,
+                color = Colors.FF333333,
+            ),
+        )
+
+        Spacer(height = 5.5.dp)
+
+        Text(
+            text = title,
+            style = TextStyle(
+                fontSize = 13.sp,
+                lineHeight = 14.sp,
+                fontWeight = FontWeight.Normal,
+                color = Colors.FF999999,
+            ),
+        )
+    }
+}

component/personal/src/main/kotlin/com/zaojiao/component/personal/HomePersonalPage.kt

@@ -1,42 +1,32 @@
 package com.zaojiao.component.personal
 
-import androidx.annotation.DrawableRes
-import androidx.compose.foundation.Image
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
 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.RowScope
-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.statusBarsPadding
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.Text
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.painterResource
-import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
-import com.zaojiao.component.common.shadow
 
+/**
+ *  首页 - 我的勋章
+ */
 @Composable
 fun HomePersonalPage() {
     Box(
         modifier = Modifier
-            .statusBarsPadding()
             .background(
                 brush = Brush.verticalGradient(
                     listOf(Color(0xFFFEFEFE), Color(0xFFFAFAFA)),
@@ -44,9 +34,10 @@ fun HomePersonalPage() {
             )
             .fillMaxSize()
     ) {
+        val state = rememberLazyListState()
 
         LazyColumn(
-
+            state = state
         ) {
             item {
                 HomePersonalTopBar()
@@ -72,26 +63,25 @@ fun HomePersonalPage() {
                 HomePersonalService()
             }
 
-            item{
-
+            item {
+                HomePersonalBottom()
             }
         }
-    }
-}
 
-@Composable
-fun HomePersonalTopBar() {
-
-}
-
-@Composable
-fun HomePersonalUserBar() {
-
-}
-
-@Composable
-fun HomePersonalEngage() {
+        val showTop by remember {
+            derivedStateOf {
+                state.firstVisibleItemIndex > 1
+            }
+        }
 
+        AnimatedVisibility(
+            visible = showTop,
+            enter = fadeIn(),
+            exit = fadeOut(),
+        ) {
+            HomePersonalScrollTopBar()
+        }
+    }
 }
 
 

component/personal/src/main/kotlin/com/zaojiao/component/personal/HomePersonalTopBar.kt

@@ -0,0 +1,72 @@
+package com.zaojiao.component.personal
+
+import androidx.annotation.DrawableRes
+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.Row
+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.statusBarsPadding
+import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.layout.wrapContentWidth
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.zaojiao.component.common.Spacer
+
+@Composable
+fun HomePersonalTopBar() {
+    Row(
+        modifier = Modifier
+            .statusBarsPadding()
+            .padding(vertical = 9.dp)
+            .fillMaxWidth()
+            .wrapContentHeight(),
+        horizontalArrangement = Arrangement.End,
+    ) {
+        HomePersonalTopBarItem(iconRes = R.mipmap.personal_message)
+        Spacer(width = 21.dp)
+        HomePersonalTopBarItem(iconRes = R.mipmap.personal_cart)
+        Spacer(width = 21.dp)
+        HomePersonalTopBarItem(iconRes = R.mipmap.personal_qrcode)
+        Spacer(width = 13.dp)
+    }
+}
+
+@Composable
+fun HomePersonalScrollTopBar() {
+    Row(
+        modifier = Modifier
+            .background(Color.Red)
+            .statusBarsPadding()
+            .padding(vertical = 9.dp)
+            .fillMaxWidth()
+            .wrapContentHeight(),
+        horizontalArrangement = Arrangement.End,
+    ) {
+        HomePersonalTopBarItem(iconRes = R.mipmap.personal_message)
+        Spacer(width = 21.dp)
+        HomePersonalTopBarItem(iconRes = R.mipmap.personal_cart)
+        Spacer(width = 21.dp)
+        HomePersonalTopBarItem(iconRes = R.mipmap.personal_qrcode)
+        Spacer(width = 13.dp)
+    }
+}
+
+@Composable
+fun HomePersonalTopBarItem(
+    @DrawableRes iconRes: Int,
+    description: String = "",
+) {
+    Image(
+        painter = painterResource(id = iconRes),
+        contentDescription = description,
+        modifier = Modifier.size(25.dp, 23.dp)
+    )
+}

component/personal/src/main/kotlin/com/zaojiao/component/personal/HomePersonalUserBar.kt

@@ -0,0 +1,49 @@
+package com.zaojiao.component.personal
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.dp
+import com.zaojiao.component.common.Colors
+import com.zaojiao.component.common.Icons
+import com.zaojiao.component.common.Spacer
+
+@Composable
+fun HomePersonalUserBar() {
+    Row(
+        modifier = Modifier
+            .padding(top = 16.dp)
+            .padding(horizontal = 16.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Image(
+            painter = painterResource(id = R.mipmap.ic_default_avatar),
+            contentDescription = "用户头像",
+            modifier = Modifier.size(70.dp, 70.dp)
+        )
+        Text(
+            text = "逻辑狗",
+            modifier = Modifier.weight(1f),
+            style = TextStyle(
+
+            )
+        )
+        Text(
+            text = "个人主页",
+        )
+        Spacer(width = 7.dp)
+        Icons.Forward(
+            size = Size(5f, 8f),
+            color = Colors.FF999999,
+            width = 1.dp,
+        )
+    }
+}