Finished try-on ui

app/build.gradle

@@ -63,9 +63,9 @@ dependencies {
     implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
     implementation 'androidx.navigation:navigation-fragment-ktx:2.3.5'
     implementation 'androidx.navigation:navigation-ui-ktx:2.3.5'
-    testImplementation 'junit:junit:4.+'
-    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
-    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
+    testImplementation 'junit:junit:'
+    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
+    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
     androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
     debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"
 
@@ -74,5 +74,7 @@ dependencies {
 
     implementation("io.coil-kt:coil-compose:1.4.0")
 
+    implementation 'com.github.zane618:NiceImageView:1.0.0'
+
     implementation("androidx.navigation:navigation-compose:2.4.0-beta02")
 }

app/src/main/AndroidManifest.xml

@@ -9,6 +9,11 @@
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
         android:theme="@style/Theme.MakeupBeauty">
+        <activity
+            android:name=".TryOn.TryOn"
+            android:exported="true"
+            android:label="TryOnActivity"
+            android:theme="@style/Theme.MakeupBeauty.NoActionBar"/>
         <activity
             android:name=".CommunityPost.PostActivity"
             android:exported="true"

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

@@ -1,5 +1,6 @@
 package com.example.makeupbeauty
 
+import android.content.Intent
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
@@ -18,6 +19,7 @@ import com.example.makeupbeauty.BottomNavigation.BottomNavigation
 import com.example.makeupbeauty.CommunityPost.PostActivity
 import com.example.makeupbeauty.CommunityPost.PostContent
 import com.example.makeupbeauty.Topbars.TopBarNavigation
+import com.example.makeupbeauty.TryOn.TryOn
 import com.google.accompanist.pager.ExperimentalPagerApi
 import kotlinx.coroutines.InternalCoroutinesApi
 
@@ -30,7 +32,6 @@ class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            val currentScreen= mutableStateOf<NavigationItem>(NavigationItem.Home)
             val navController = rememberNavController()
 
             MakeupBeautyTheme {

app/src/main/java/com/example/makeupbeauty/Screens/HomeScreen.kt

@@ -1,6 +1,7 @@
 package com.example.makeupbeauty.Screens
 
 
+import android.content.Intent
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
@@ -13,13 +14,16 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.core.content.ContextCompat.startActivity
 import com.example.makeupbeauty.R
+import com.example.makeupbeauty.TryOn.TryOn
 import com.example.makeupbeauty.component.card.TopLabCards
 import com.example.makeupbeauty.data.DemoDataProvider
 import androidx.compose.foundation.lazy.items as items
@@ -40,6 +44,9 @@ fun HomeScreen() {
 
 @Composable
 fun HomeHeader() {
+    val face_intent = Intent(LocalContext.current, TryOn::class.java)
+    val context = LocalContext.current
+
     Column(
         modifier = Modifier
             .background(MaterialTheme.colors.background)
@@ -62,7 +69,10 @@ fun HomeHeader() {
         ) {
             item {
                 TopLabCards(labTitle = "美发实验室", labContent = "尝试新发色\n秋冬发色\n总有一款是你心仪的", labImage = painterResource(id = R.drawable.ic_hair_card))
-                TopLabCards(labTitle = "脸部实验室", labContent = "尝试新妆容\n圣诞特定妆容\n快来试试吧", labImage = painterResource(id = R.drawable.ic_face_card))
+                TopLabCards(labTitle = "脸部实验室", labContent = "尝试新妆容\n圣诞特定妆容\n快来试试吧", labImage = painterResource(id = R.drawable.ic_face_card),
+                            onClick = {
+                                startActivity(context, face_intent, null)
+                            })
                 TopLabCards(labTitle = "美甲实验室", labContent = "尝试新美甲\n圣诞美甲新品来咯！\n快叫上你的姐妹一起来试试！", labImage = painterResource(id = R.drawable.ic_hand_card))
             }
 
@@ -114,6 +124,4 @@ private fun ListItemDivider() {
         modifier = Modifier.padding(horizontal = 12.dp, vertical = 12.dp),
 //        color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.08f)
     )
-}
-
-
+}

app/src/main/java/com/example/makeupbeauty/Screens/ProfileScreen.kt

@@ -98,7 +98,7 @@ fun Head(imageid: Int, name: String, vip: String, prefer: Int, fans: Int) {
                 Row(modifier = Modifier.padding(horizontal = 4.dp), Arrangement.Center) {
                     Text(text = name, fontWeight = FontWeight.ExtraBold, fontSize = 25.sp)
                     Spacer(modifier = Modifier.padding(4.dp))
-                    Text(text = "vip "+vip,color = Color.Cyan, textAlign = TextAlign.Center, fontSize = 17.sp)
+                    Text(text = "vip $vip",color = Color.Cyan, textAlign = TextAlign.Center, fontSize = 17.sp)
                 }
                 Spacer(
                     Modifier

app/src/main/java/com/example/makeupbeauty/TryOn/TryOn.kt

@@ -0,0 +1,180 @@
+package com.example.makeupbeauty.TryOn
+
+import android.content.Context
+import android.content.res.ColorStateList
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.Button
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.node.getOrAddAdapter
+import androidx.recyclerview.widget.LinearLayoutManager
+import androidx.recyclerview.widget.RecyclerView
+import com.example.makeupbeauty.R
+import com.shehuan.niv.NiceImageView
+import java.util.*
+
+
+class TryOn : AppCompatActivity() {
+
+    private val lip_data = ArrayList<Pair<Int, String>>()
+    private val eye_data = ArrayList<Pair<Int, String>>()
+    private val brow_data = ArrayList<Pair<Int, String>>()
+
+    // Todo: get below from intent parameters
+    private var selected_lip = 2
+    private var selected_eye = -1
+    private var selected_brow = -1
+    private var current = "LIP";
+
+    fun goBack(view: View) {
+        finish()
+    }
+
+    private fun setRecyclerView() {
+        val recyclerview = findViewById<RecyclerView>(R.id.rec)
+        //设置布局管理器
+        val linearLayoutManager = LinearLayoutManager(this)
+        linearLayoutManager.orientation = LinearLayoutManager.HORIZONTAL
+        recyclerview.layoutManager = linearLayoutManager
+        //设置适配器
+        var mAdapter = GalleryAdapter(this, lip_data)
+
+        if (current == "LIP")
+            mAdapter = GalleryAdapter(this, lip_data)
+        else if (current == "EYE")
+            mAdapter = GalleryAdapter(this, eye_data)
+        else if (current == "BROW")
+            mAdapter = GalleryAdapter(this, brow_data)
+
+        if (current == "LIP")
+            mAdapter.selected_pos = selected_lip
+        else if (current == "EYE")
+            mAdapter.selected_pos = selected_eye
+        else if (current == "BROW")
+            mAdapter.selected_pos = selected_brow
+
+        recyclerview.adapter = mAdapter
+    }
+
+    fun lip_onClick(view: View) {
+        current = "LIP"
+        change_category()
+    }
+
+    fun eye_onClick(view: View) {
+        current = "EYE"
+        change_category()
+    }
+
+    fun brow_onClick(view: View) {
+        current = "BROW"
+        change_category()
+    }
+
+    private fun change_category() {
+        val lip_btn = findViewById<Button>(R.id.btn_lip)
+        val eye_btn = findViewById<Button>(R.id.btn_eye)
+        val brow_btn = findViewById<Button>(R.id.btn_brow)
+
+        lip_btn.setTextColor(getResources().getColor(R.color.black));
+        brow_btn.setTextColor(getResources().getColor(R.color.black))
+        eye_btn.setTextColor(getResources().getColor(R.color.black))
+
+        if(current == "LIP")
+            lip_btn.setTextColor(getResources().getColor(R.color.purple_500))
+        if(current == "EYE")
+            eye_btn.setTextColor(getResources().getColor(R.color.purple_500))
+        if(current == "BROW")
+            brow_btn.setTextColor(getResources().getColor(R.color.purple_500))
+
+        setRecyclerView()
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        setContentView(R.layout.activity_try_on)
+
+        // Todo: Get data from api
+        for (index in 1..20) {
+            var item = Pair<Int, String>(R.drawable.dior1, "口红# $index")
+            lip_data.add(item)
+            item = Pair<Int, String>(R.drawable.dior1, "美瞳# $index")
+            eye_data.add(item)
+            item = Pair<Int, String>(R.drawable.dior1, "眉毛# $index")
+            brow_data.add(item)
+        }
+
+        change_category()
+    }
+
+    inner class GalleryAdapter(context: Context?, data: ArrayList<Pair<Int, String>>):
+        RecyclerView.Adapter<GalleryAdapter.ViewHolder>() {
+        private val mInflater: LayoutInflater = LayoutInflater.from(context)
+        private val mData: ArrayList<Pair<Int, String>> = data
+
+        var selected_pos = -1
+
+        inner class ViewHolder(arg0: View?) : RecyclerView.ViewHolder(arg0!!), View.OnClickListener
+        {
+            var mImg: ImageView? = null
+            var mTxt: TextView? = null
+
+            override fun onClick(p0: View?) {
+                if (adapterPosition == RecyclerView.NO_POSITION)
+                    return;
+                // Updating old as well as new positions
+                notifyItemChanged(selected_pos);
+                selected_pos = adapterPosition;
+
+                if(current == "LIP")
+                    selected_lip = selected_pos
+                if(current == "EYE")
+                    selected_eye = selected_pos
+                if(current == "BROW")
+                    selected_brow = selected_pos
+
+                notifyItemChanged(selected_pos);
+            }
+        }
+
+        override fun getItemCount(): Int {
+            return mData.size
+        }
+
+        /**
+         * 创建ViewHolder
+         */
+        override fun onCreateViewHolder(viewGroup: ViewGroup, i: Int): ViewHolder {
+            val view: View = mInflater.inflate(
+                R.layout.activity_try_on_recycler_view_item,
+                viewGroup, false
+            )
+            val viewHolder = ViewHolder(view)
+            view.setOnClickListener(viewHolder)
+            viewHolder.mImg = view.findViewById<NiceImageView>(R.id.try_on_item_img)
+            viewHolder.mTxt = view.findViewById<TextView>(R.id.try_on_item_txt)
+            return viewHolder
+        }
+
+        /**
+         * 设置值
+         */
+        override fun onBindViewHolder(viewHolder: ViewHolder, i: Int) {
+            viewHolder.mImg?.setImageResource(mData[i].first)
+            (viewHolder.mImg as NiceImageView).isCircle(true)
+            (viewHolder.mImg as NiceImageView).setCornerRadius(32)
+            viewHolder.mTxt?.text = mData[i].second
+            if (selected_pos == i)
+                (viewHolder.mImg as NiceImageView).setBorderWidth(4)
+            else
+                (viewHolder.mImg as NiceImageView).setBorderWidth(0)
+        }
+
+    }
+}

app/src/main/res/drawable/ic_baseline_add_business_24.xml

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M15,17h2v-3h1v-2l-1,-5H2l-1,5v2h1v6h9v-6h4V17zM9,18H4v-4h5V18z"/>
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M2,4h15v2h-15z"/>
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M20,18l0,-3l-2,0l0,3l-3,0l0,2l3,0l0,3l2,0l0,-3l3,0l0,-2z"/>
+</vector>

app/src/main/res/drawable/ic_baseline_arrow_back_24.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="?attr/colorControlNormal"
+    android:autoMirrored="true">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
+</vector>