[Design/#25] 리스트 화면 UI 구현

app/src/main/java/com/sopt/umbba_android/presentation/MainActivity.kt

@@ -1,43 +1,43 @@
 package com.sopt.umbba_android.presentation
 
-import android.content.Intent
-import androidx.appcompat.app.AppCompatActivity
 import android.os.Bundle
 import androidx.fragment.app.Fragment
 import com.sopt.umbba_android.R
 import com.sopt.umbba_android.databinding.ActivityMainBinding
 import com.sopt.umbba_android.presentation.home.HomeFragment
-import com.sopt.umbba_android.presentation.qna.QuestionAnswerActivity
+import com.sopt.umbba_android.presentation.list.ListFragment
 import com.sopt.umbba_android.presentation.setting.SettingFragment
 import com.sopt.umbba_android.util.binding.BindingActivity
 
-class MainActivity :BindingActivity<ActivityMainBinding>(R.layout.activity_main){
+class MainActivity : BindingActivity<ActivityMainBinding>(R.layout.activity_main) {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         initView()
         setBottomNav()
     }
 
-    private fun initView(){
+    private fun initView() {
         val currentFragment = supportFragmentManager.findFragmentById(R.id.fcv_main)
         if (currentFragment == null) {
             changeFragment(HomeFragment())
         }
     }
-    private fun setBottomNav(){
-        binding.bnvMain.run(){
+
+    private fun setBottomNav() {
+        binding.bnvMain.run() {
             setOnItemSelectedListener {
                 changeFragment(
-                    when(it.itemId){
+                    when (it.itemId) {
                         R.id.menu_home -> HomeFragment()
                         R.id.menu_setting -> SettingFragment()
-                        else -> HomeFragment()
+                        else -> ListFragment()
                     }
                 )
                 true
             }
         }
     }
+
     private fun changeFragment(fragment: Fragment) {
         supportFragmentManager.beginTransaction()
             .replace(R.id.fcv_main, fragment)

app/src/main/java/com/sopt/umbba_android/presentation/list/ListFragment.kt

@@ -0,0 +1,19 @@
+package com.sopt.umbba_android.presentation.list
+
+import android.os.Bundle
+import androidx.fragment.app.Fragment
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import com.sopt.umbba_android.R
+import com.sopt.umbba_android.databinding.FragmentListBinding
+import com.sopt.umbba_android.util.binding.BindingFragment
+
+class ListFragment : BindingFragment<FragmentListBinding>(R.layout.fragment_list) {
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+    }
+
+}

app/src/main/java/com/sopt/umbba_android/presentation/list/ListQuestionAdapter.kt

@@ -0,0 +1,49 @@
+package com.sopt.umbba_android.presentation.list
+
+import android.view.LayoutInflater
+import android.view.ViewGroup
+import androidx.recyclerview.widget.DiffUtil
+import androidx.recyclerview.widget.ListAdapter
+import androidx.recyclerview.widget.RecyclerView
+import com.sopt.umbba_android.data.model.response.ExampleResponseDto
+import com.sopt.umbba_android.databinding.ItemQuestionListBinding
+
+class ListQuestionAdapter(private val itemClick: (ExampleResponseDto) -> (Unit)) :
+    ListAdapter<ExampleResponseDto, ListQuestionAdapter.ListViewHolder>(diffUtil) {
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ListViewHolder {
+        val binding =
+            ItemQuestionListBinding.inflate(LayoutInflater.from(parent.context), parent, false)
+        return ListViewHolder(binding)
+    }
+
+    override fun onBindViewHolder(holder: ListViewHolder, position: Int) {
+        holder.onBind(currentList[position])
+    }
+
+    class ListViewHolder(
+        private val binding: ItemQuestionListBinding
+    ) : RecyclerView.ViewHolder(binding.root) {
+        fun onBind(data: ExampleResponseDto) {
+            TODO("서버 연결할 때 채우기")
+        }
+    }
+
+    companion object {
+        val diffUtil = object : DiffUtil.ItemCallback<ExampleResponseDto>() {
+            override fun areItemsTheSame(
+                oldItem: ExampleResponseDto,
+                newItem: ExampleResponseDto
+            ): Boolean {
+                return oldItem.id == newItem.id
+            }
+
+            override fun areContentsTheSame(
+                oldItem: ExampleResponseDto,
+                newItem: ExampleResponseDto
+            ): Boolean {
+                return oldItem == newItem
+            }
+        }
+    }
+}

app/src/main/res/color/sel_choice_chip_color.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:color="@color/grey_btn_checked_solid" android:state_checked="true" />
-    <item android:color="@color/grey_btn_solid"/>
+    <item android:color="@color/primary_600" android:state_checked="true" />
+    <item android:color="@color/umbba_white"/>
 </selector>

app/src/main/res/color/sel_quest_choice_chip_text.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:color="@color/white" android:state_checked="true" />
-    <item android:color="@color/black"/>
+    <item android:color="@color/primary_600"/>
 </selector>

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

@@ -0,0 +1,146 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <data>
+
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        tools:context=".presentation.list.ListFragment">
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/cl_image"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <com.google.android.material.imageview.ShapeableImageView
+                android:id="@+id/iv_image"
+                android:layout_width="match_parent"
+                android:layout_height="0dp"
+                android:scaleType="centerCrop"
+                app:layout_constraintDimensionRatio="1:1"
+                app:layout_constraintTop_toTopOf="parent"
+                app:shapeAppearanceOverlay="@style/CornerRadiusImageView"
+                tools:src="@drawable/iv_maru" />
+
+            <TextView
+                android:id="@+id/tv_list"
+                style="@style/AndroidBody1_2Regular16"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="21dp"
+                android:text="@string/list"
+                android:textColor="@color/umbba_black"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+        <HorizontalScrollView
+            android:id="@+id/sv_titlegroup"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="12dp"
+            android:scrollbars="none"
+            app:layout_constraintTop_toBottomOf="@id/cl_image">
+
+            <com.google.android.material.chip.ChipGroup
+                android:id="@+id/cg_title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                app:checkedChip="@id/chip_1"
+                app:chipSpacingHorizontal="12dp"
+                app:selectionRequired="true"
+                app:singleSelection="true">
+
+                <com.google.android.material.chip.Chip
+                    android:id="@+id/chip_1"
+                    style="@style/ListChoiceChipStyle"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginStart="24dp"
+                    android:textAppearance="@style/AndroidBody2_2Regular12"
+                    app:chipMinHeight="26dp"
+                    app:textEndPadding="12dp"
+                    app:textStartPadding="12dp"
+                    tools:text="# 타임머신" />
+
+                <com.google.android.material.chip.Chip
+                    android:id="@+id/chip_2"
+                    style="@style/ListChoiceChipStyle"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textAppearance="@style/AndroidBody2_2Regular12"
+                    app:chipMinHeight="26dp"
+                    app:textEndPadding="12dp"
+                    app:textStartPadding="12dp"
+                    tools:text="# 어린 시절" />
+
+                <com.google.android.material.chip.Chip
+                    android:id="@+id/chip_3"
+                    style="@style/ListChoiceChipStyle"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textAppearance="@style/AndroidBody2_2Regular12"
+                    app:chipMinHeight="26dp"
+                    app:textEndPadding="12dp"
+                    app:textStartPadding="12dp"
+                    tools:text="# 학창 시절" />
+
+                <com.google.android.material.chip.Chip
+                    android:id="@+id/chip_4"
+                    style="@style/ListChoiceChipStyle"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:textAppearance="@style/AndroidBody2_2Regular12"
+                    app:chipMinHeight="26dp"
+                    app:textEndPadding="12dp"
+                    app:textStartPadding="12dp"
+                    tools:text="# 대학 생활" />
+
+                <com.google.android.material.chip.Chip
+                    android:id="@+id/chip_5"
+                    style="@style/ListChoiceChipStyle"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginEnd="24dp"
+                    android:textAppearance="@style/AndroidBody2_2Regular12"
+                    app:chipMinHeight="26dp"
+                    app:textEndPadding="12dp"
+                    app:textStartPadding="12dp"
+                    tools:text="# 회사 생활" />
+
+            </com.google.android.material.chip.ChipGroup>
+
+        </HorizontalScrollView>
+
+        <TextView
+            android:id="@+id/tv_title"
+            style="@style/BrandTypeBigRegular20"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="20dp"
+            android:layout_marginTop="12dp"
+            android:textColor="@color/primary_600"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/sv_titlegroup"
+            tools:text="# 어린 시절" />
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/rv_question_list"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="12dp"
+            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+            app:layout_constraintTop_toBottomOf="@id/tv_title"
+            tools:itemCount="3"
+            tools:listitem="@layout/item_question_list" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>

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

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <TextView
+        android:id="@+id/tv_title_number"
+        style="@style/BrandTypeSmallSemiBold16"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginVertical="20dp"
+        android:layout_marginStart="28dp"
+        android:text="@string/question_number"
+        android:textColor="@color/primary_500"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
+
+    <TextView
+        android:id="@+id/tv_question"
+        style="@style/AndroidBody1_2Regular16"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:textColor="@color/umbba_black"
+        android:layout_marginStart="12dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toEndOf="@id/tv_title_number"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:text="할머니와 엄마의 꿈이 달랐어?" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/res/values/strings.xml

@@ -82,5 +82,9 @@
     <string name="save_answer">답변을 저장하시겠어요?</string>
     <string name="back">돌아가기</string>
     <string name="save">저장</string>
-
+
+    <!--list fragment-->
+    <string name="list">리스트</string>
+    <string name="question_number">#%d</string>
+
 </resources>

app/src/main/res/values/styles.xml

@@ -70,4 +70,22 @@
         <item name="chipBackgroundColor">@color/sel_choice_chip_color</item>
     </style>
 
+    <style name="ListChoiceChipStyle" parent="Widget.MaterialComponents.Chip.Choice">
+        <!--Text Style-->
+        <item name="android:fontFamily">@font/pretendard_regular</item>
+        <item name="android:textStyle">normal</item>
+        <item name="android:textColor">@color/sel_quest_choice_chip_text</item>
+        <item name="android:textAlignment">center</item>
+
+        <!--Chip Design-->
+        <item name="chipCornerRadius">32dp</item>
+        <item name="chipStrokeColor">@color/primary_600</item>
+        <item name="chipStrokeWidth">1dp</item>
+        <item name="chipBackgroundColor">@color/sel_choice_chip_color</item>
+    </style>
+
+    <style name="CornerRadiusImageView">
+        <item name="cornerSizeBottomLeft">20dp</item>
+        <item name="cornerSizeBottomRight">20dp</item>
+    </style>
 </resources>