refactor: 경로 검색 화면 UI 수정(진행 중)

DoTheBestMayB · DoTheBestMayB · commit 8778254bf123 · 2022-12-05T20:53:25.000+09:00
diff --git a/presentation/src/main/java/com/stop/ui/route/TimeLineViewHolder.kt b/presentation/src/main/java/com/stop/ui/route/TimeLineViewHolder.kt
@@ -1,43 +1,74 @@
 package com.stop.ui.route
 
+import android.content.res.ColorStateList
+import android.graphics.Color
 import android.view.View
 import androidx.core.content.ContextCompat
 import androidx.recyclerview.widget.RecyclerView
 import com.stop.R
 import com.stop.databinding.TimeLineItemBinding
 import com.stop.domain.model.route.tmap.custom.MoveType
 import com.stop.domain.model.route.tmap.custom.Route
+import com.stop.domain.model.route.tmap.custom.TransportRoute
 
 class TimeLineViewHolder(
     private val binding: TimeLineItemBinding
 ) : RecyclerView.ViewHolder(binding.root) {
 
+    private val greyColor =
+        ContextCompat.getColor(binding.root.context, R.color.grey_for_route_walk)
+
     fun bind(route: Route, position: Int) {
-        val text = route.start.name + "   " +
-                binding.root.resources.getString(
-                    R.string.section_time,
-                    (route.sectionTime / 60).toInt().toString()
-                )
+        val text = binding.root.resources.getString(
+            R.string.section_time,
+            (route.sectionTime / 60).toInt().toString()
+        )
         binding.textViewSectionTime.text = text
 
-
         val imageSrc = when (route.mode) {
             MoveType.BUS -> R.drawable.time_line_bus_16
             MoveType.SUBWAY -> R.drawable.time_line_subway_16
             MoveType.WALK, MoveType.TRANSFER -> {
                 if (position != 0) {
+                    setDefaultColor()
+                    binding.viewIcon.visibility = View.GONE
                     binding.imageViewIcon.visibility = View.GONE
                     return
                 }
                 R.drawable.time_line_directions_walk_16
             }
             else -> R.drawable.time_line_help_16
         }
+        binding.viewIcon.visibility = View.VISIBLE
         binding.imageViewIcon.visibility = View.VISIBLE
 
         val drawable = ContextCompat.getDrawable(binding.root.context, imageSrc)
             ?: throw IllegalArgumentException()
 
         binding.imageViewIcon.setImageDrawable(drawable)
+
+        when (route) {
+            is TransportRoute -> setIdentityColor(route)
+            else -> setDefaultColor()
+        }
+    }
+
+    private fun setIdentityColor(route: TransportRoute) {
+        val identityColor = Color.parseColor("#${route.routeColor}")
+        binding.textViewSectionTime.setBackgroundColor(identityColor)
+        binding.textViewSectionTime.setTextColor(Color.WHITE)
+        binding.viewIcon.background.setTint(identityColor)
+        binding.imageViewIcon.imageTintList = ColorStateList.valueOf(Color.WHITE)
+    }
+
+    private fun setDefaultColor() {
+        binding.textViewSectionTime.setTextColor(Color.WHITE)
+        binding.textViewSectionTime.setBackgroundColor(greyColor)
+
+        val drawable =
+            ContextCompat.getDrawable(binding.root.context, R.drawable.time_stick_round_background)
+                ?: throw IllegalArgumentException()
+        binding.imageViewIcon.background = drawable
+        binding.viewIcon.background.setTintList(null)
     }
 }
diff --git a/presentation/src/main/res/layout/fragment_route.xml b/presentation/src/main/res/layout/fragment_route.xml
@@ -15,66 +15,61 @@
         android:layout_height="match_parent"
         tools:context=".ui.route.RouteFragment">
 
-        <androidx.appcompat.widget.AppCompatButton
-            android:id="@+id/button_back_to_home"
-            style="@style/Widget.AppCompat.Button.Small"
+        <ImageView
+            android:id="@+id/image_view_exit"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:background="@drawable/ic_baseline_close_24"
-            app:layout_constraintDimensionRatio="1:1"
+            android:contentDescription="@string/image_view_exit_content_description"
             app:layout_constraintEnd_toEndOf="@id/guideline_end_vertical"
-            app:layout_constraintTop_toTopOf="@id/guideline_start_horizontal" />
+            app:layout_constraintTop_toTopOf="@id/guideline_start_horizontal"
+            app:srcCompat="@drawable/ic_baseline_close_24" />
 
 
         <TextView
             android:id="@+id/text_view_origin"
-            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:background="@drawable/round_border"
-            android:paddingVertical="10dp"
-            app:layout_constraintEnd_toStartOf="@id/button_swap_origin_with_destination"
+            android:padding="10dp"
+            app:layout_constraintEnd_toStartOf="@id/image_view_swap_origin_with_destination"
+            app:layout_constraintHorizontal_bias="0.0"
             app:layout_constraintStart_toStartOf="@id/guideline_start_vertical"
-            app:layout_constraintTop_toBottomOf="@id/button_back_to_home"
+            app:layout_constraintTop_toBottomOf="@id/image_view_exit"
             app:set_place_name="@{viewModel.origin}"
             tools:text="이앤씨벤쳐드림타워3차" />
 
-        <androidx.appcompat.widget.AppCompatButton
-            android:id="@+id/button_swap_origin_with_destination"
-            style="@style/Widget.AppCompat.Button.Small"
+        <ImageView
+            android:id="@+id/image_view_swap_origin_with_destination"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:background="@drawable/ic_baseline_swap_vert_24"
+            android:contentDescription="@string/image_view_swap_origin_with_destination_content_description"
             app:layout_constraintBottom_toBottomOf="@id/text_view_origin"
-            app:layout_constraintDimensionRatio="1:1"
             app:layout_constraintEnd_toStartOf="@id/guideline_end_vertical"
-            app:layout_constraintTop_toTopOf="@id/text_view_origin" />
+            app:layout_constraintTop_toTopOf="@id/text_view_origin"
+            app:srcCompat="@drawable/ic_baseline_swap_vert_24" />
 
         <TextView
             android:id="@+id/text_view_destination"
-            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginTop="10dp"
             android:background="@drawable/round_border"
-            android:paddingVertical="10dp"
-            app:layout_constraintEnd_toStartOf="@id/button_swap_origin_with_destination"
+            android:padding="10dp"
+            app:layout_constraintEnd_toStartOf="@id/image_view_reset"
             app:layout_constraintStart_toStartOf="@id/guideline_start_vertical"
             app:layout_constraintTop_toBottomOf="@id/text_view_origin"
             app:set_place_name="@{viewModel.destination}"
             tools:text="Naver1784" />
 
-
-        <androidx.appcompat.widget.AppCompatButton
-            android:id="@+id/button_erase_origin_and_destination"
-            style="@style/Widget.AppCompat.Button.Small"
+        <ImageView
+            android:id="@+id/image_view_reset"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:background="@drawable/ic_baseline_replay_24"
+            android:contentDescription="@string/image_view_reset_content_description"
             app:layout_constraintBottom_toBottomOf="@id/text_view_destination"
-            app:layout_constraintDimensionRatio="1:1"
             app:layout_constraintEnd_toStartOf="@id/guideline_end_vertical"
-            app:layout_constraintTop_toTopOf="@id/text_view_destination" />
+            app:layout_constraintTop_toTopOf="@id/text_view_destination"
+            app:srcCompat="@drawable/ic_baseline_replay_24" />
 
         <androidx.recyclerview.widget.RecyclerView
             android:id="@+id/recyclerview_route"
diff --git a/presentation/src/main/res/layout/time_line_item.xml b/presentation/src/main/res/layout/time_line_item.xml
@@ -11,11 +11,13 @@
             android:id="@+id/text_view_section_time"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_marginTop="6dp"
             android:background="@drawable/time_stick_border"
             android:gravity="center"
             android:minWidth="60dp"
+            android:minHeight="20dp"
             android:paddingVertical="3dp"
-            android:layout_marginTop="3dp"
+            android:textSize="12sp"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="@id/dummy_view"
             app:layout_constraintTop_toTopOf="parent"
@@ -32,16 +34,26 @@
             app:layout_constraintTop_toTopOf="@id/image_view_icon"
             tools:layout_editor_absoluteY="234dp" />
 
+        <View
+            android:id="@+id/view_icon"
+            android:layout_width="36dp"
+            android:layout_height="36dp"
+            android:background="@drawable/time_stick_round_background"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
         <ImageView
             android:id="@+id/image_view_icon"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:background="@drawable/time_stick_round_background"
             android:padding="8dp"
+            android:contentDescription="@string/image_view_icon_content_description"
             android:scaleType="centerCrop"
-            app:layout_constraintBottom_toBottomOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintBottom_toBottomOf="@id/view_icon"
+            app:layout_constraintStart_toStartOf="@id/view_icon"
+            app:layout_constraintTop_toTopOf="@id/view_icon"
+            app:layout_constraintEnd_toEndOf="@id/view_icon"
             tools:src="@drawable/time_line_directions_walk_16" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/presentation/src/main/res/values/colors.xml b/presentation/src/main/res/values/colors.xml
@@ -7,6 +7,7 @@
     <color name="teal_700">#FF018786</color>
     <color name="black">#FF000000</color>
     <color name="white">#FFFFFFFF</color>
+    <color name="grey_for_route_walk">#E2E7EE</color>
 
     <color name="light_grey">#D3CCCC</color>
     <color name="gray_d9">#D9D9D9</color>
diff --git a/presentation/src/main/res/values/strings.xml b/presentation/src/main/res/values/strings.xml
@@ -46,4 +46,8 @@
     <string name="available_bus_no_exist_yet">탑승할 수 있는 버스가 아직 없습니다.</string>
     <string name="bus_disappear_suddenly">버스가 갑자기 사라졌습니다.</string>
     <string name="mission_something_wrong">미션 진행 중 무언가 잘못되었습니다.</string>
+    <string name="image_view_reset_content_description">출발지, 도착지를 모두 비웁니다.</string>
+    <string name="image_view_swap_origin_with_destination_content_description">출발지와 도착지를 바꿉니다.</string>
+    <string name="image_view_exit_content_description">경로 검색 화면을 종료합니다.</string>
+    <string name="image_view_icon_content_description">승차지의 종류를 나타내는 아이콘입니다.</string>
 </resources>
