Merge pull request #11 from Keyneez/feature/#2-ui-search-view

[UI/#2] search / 검색 뷰 구현
Keyneez · Apr 7, 2023 · 47f5d20 · 47f5d20
2 parents ea1e256 + 10b29df
commit 47f5d20
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 0 deletions.
diff --git a/app/src/main/res/drawable/ic_search_back.xml b/app/src/main/res/drawable/ic_search_back.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M10,22L0,12L10,2L11.4,3.425L2.825,12L11.4,20.575L10,22Z"
+      android:fillColor="#5C5C5C"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_search_blue.png b/app/src/main/res/drawable/ic_search_blue.png
diff --git a/app/src/main/res/drawable/ic_search_empty_heart.xml b/app/src/main/res/drawable/ic_search_empty_heart.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="21dp"
+    android:height="19dp"
+    android:viewportWidth="21"
+    android:viewportHeight="19">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M9.982,17.337L9.978,17.334L8.654,16.11C8.654,16.11 8.654,16.11 8.654,16.11C6.598,14.203 4.819,12.386 3.316,10.661C1.861,8.989 1.164,7.281 1.164,5.526C1.164,4.151 1.621,3.027 2.53,2.118C3.441,1.207 4.557,0.751 5.914,0.751C6.681,0.751 7.448,0.935 8.219,1.313C8.961,1.676 9.641,2.283 10.254,3.162L10.64,3.717L11.057,3.185C11.761,2.29 12.467,1.674 13.17,1.307C13.884,0.935 14.63,0.751 15.414,0.751C16.771,0.751 17.888,1.207 18.798,2.118C19.707,3.027 20.164,4.151 20.164,5.526C20.164,7.281 19.467,8.989 18.012,10.661C16.509,12.386 14.731,14.203 12.674,16.11C12.674,16.11 12.674,16.11 12.674,16.11L11.35,17.334L11.35,17.334L11.346,17.337C11.159,17.514 10.941,17.601 10.664,17.601C10.387,17.601 10.17,17.514 9.982,17.337Z"
+      android:fillColor="#EDEDED"
+      android:strokeColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_search_full_heart.xml b/app/src/main/res/drawable/ic_search_full_heart.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="22dp"
+    android:height="19dp"
+    android:viewportWidth="22"
+    android:viewportHeight="19">
+  <path
+      android:strokeWidth="1"
+      android:pathData="M10.09,17.58L10.093,17.583C10.292,17.766 10.526,17.858 10.823,17.858C11.12,17.858 11.354,17.766 11.553,17.583L11.556,17.58L11.556,17.58L12.936,16.338C12.936,16.337 12.936,16.337 12.936,16.337C15.078,14.401 16.931,12.557 18.497,10.806C20.015,9.108 20.74,7.373 20.74,5.594C20.74,4.201 20.265,3.059 19.315,2.134C18.364,1.206 17.193,0.74 15.771,0.74C14.948,0.74 14.166,0.928 13.419,1.308C12.683,1.681 11.946,2.309 11.212,3.218L10.799,3.731L10.416,3.195C9.778,2.302 9.067,1.684 8.29,1.313C7.483,0.928 6.68,0.74 5.875,0.74C4.452,0.74 3.282,1.206 2.331,2.134C1.381,3.059 0.906,4.201 0.906,5.594C0.906,7.373 1.631,9.108 3.149,10.806C4.714,12.557 6.568,14.401 8.71,16.337L10.09,17.58ZM10.09,17.58L8.71,16.338L10.09,17.58Z"
+      android:fillColor="#000000"
+      android:strokeColor="#ffffff"/>
+</vector>
diff --git a/app/src/main/res/drawable/ic_search_red.png b/app/src/main/res/drawable/ic_search_red.png
diff --git a/app/src/main/res/drawable/ic_search_search.xml b/app/src/main/res/drawable/ic_search_search.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="32dp"
+    android:height="32dp"
+    android:viewportWidth="32"
+    android:viewportHeight="32">
+  <path
+      android:pathData="M0,0h32v32h-32z" />
+  <path
+      android:pathData="M26.533,27.967L17.767,19.2C17.1,19.778 16.322,20.228 15.433,20.55C14.544,20.872 13.6,21.034 12.6,21.034C10.2,21.034 8.167,20.2 6.5,18.534C4.833,16.867 4,14.856 4,12.5C4,10.145 4.833,8.133 6.5,6.467C8.167,4.8 10.189,3.967 12.567,3.967C14.922,3.967 16.928,4.8 18.583,6.467C20.239,8.133 21.067,10.145 21.067,12.5C21.067,13.456 20.911,14.378 20.6,15.267C20.289,16.156 19.822,16.989 19.2,17.767L28,26.5L26.533,27.967ZM12.567,19.034C14.367,19.034 15.9,18.395 17.167,17.117C18.433,15.839 19.067,14.3 19.067,12.5C19.067,10.7 18.433,9.161 17.167,7.883C15.9,6.606 14.367,5.967 12.567,5.967C10.744,5.967 9.194,6.606 7.917,7.883C6.639,9.161 6,10.7 6,12.5C6,14.3 6.639,15.839 7.917,17.117C9.194,18.395 10.744,19.034 12.567,19.034Z"
+      android:fillColor="#000000"/>
+</vector>
diff --git a/app/src/main/res/drawable/img_search_background.png b/app/src/main/res/drawable/img_search_background.png
diff --git a/app/src/main/res/drawable/sel_search_heart.xml b/app/src/main/res/drawable/sel_search_heart.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/ic_search_empty_heart" android:state_selected="false" />
+    <item android:drawable="@drawable/ic_search_full_heart" android:state_selected="true" />
+</selector>
diff --git a/app/src/main/res/drawable/sel_search_icon.xml b/app/src/main/res/drawable/sel_search_icon.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@drawable/ic_search_blue" android:state_selected="false" />
+    <item android:drawable="@drawable/ic_search_red" android:state_selected="true" />
+</selector>
diff --git a/app/src/main/res/drawable/shape_gray400_bottomline_rect.xml b/app/src/main/res/drawable/shape_gray400_bottomline_rect.xml
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item
+        android:end="-2dp"
+        android:start="-2dp"
+        android:top="-2dp">
+        <shape android:shape="rectangle">
+            <stroke
+                android:width="1dp"
+                android:color="@color/gray400" />
+        </shape>
+    </item>
+</layer-list>
diff --git a/app/src/main/res/layout/activity_search.xml b/app/src/main/res/layout/activity_search.xml
@@ -0,0 +1,97 @@
+<?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:id="@+id/layout_search_result"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
+        <ImageButton
+            android:id="@+id/btn_search_back"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="4dp"
+            android:layout_marginTop="54dp"
+            android:background="@null"
+            android:padding="12dp"
+            android:src="@drawable/ic_search_back"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <EditText
+            android:id="@+id/et_search_content"
+            style="@style/PretendardMedium18"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="-12dp"
+            android:layout_marginEnd="16dp"
+            android:layout_marginTop="52dp"
+            android:paddingEnd="64dp"
+            android:inputType="text"
+            android:maxLines="1"
+            android:imeOptions="actionSearch"
+            android:hint="@string/search_content"
+            android:paddingBottom="20dp"
+            android:textColor="@color/gray900"
+            android:textColorHint="@color/gray400"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toEndOf="@id/btn_search_back"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <ImageButton
+            android:id="@+id/btn_search_result"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="14dp"
+            android:layout_marginBottom="4dp"
+            android:background="@null"
+            android:padding="12dp"
+            android:src="@drawable/ic_search_search"
+            app:layout_constraintBottom_toBottomOf="@id/btn_search_back"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="@id/btn_search_back" />
+
+        <TextView
+            android:id="@+id/tv_search_after"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            style="@style/PretendardSemibold14"
+            android:textColor="@color/gray900"
+            android:text="@string/search_result" />
+
+        <TextView
+            android:id="@+id/tv_search_count"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            style="@style/PretendardSemibold14"
+            android:textColor="@color/mint500"
+            android:text="@string/search_count" />
+
+        <androidx.constraintlayout.helper.widget.Flow
+            android:id="@+id/flow_search"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="36dp"
+            app:constraint_referenced_ids="tv_search_after,tv_search_count"
+            app:flow_horizontalGap="4dp"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/et_search_content" />
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/rv_search_result_content"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            android:layout_marginTop="8dp"
+            android:paddingHorizontal="14dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/flow_search"
+            tools:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
+            tools:listitem="@layout/item_search_content"
+            tools:spanCount="2" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/app/src/main/res/layout/item_search_content.xml b/app/src/main/res/layout/item_search_content.xml
@@ -0,0 +1,88 @@
+<?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">
+
+    <data></data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/layout_search_rv"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginHorizontal="12dp"
+        android:layout_marginTop="14dp">
+
+        <ImageView
+            android:id="@+id/iv_search_background"
+            android:src="@drawable/img_search_background"
+            android:layout_width="0dp"
+            android:layout_height="160dp"
+            android:scaleType="centerCrop"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+
+        <TextView
+            android:id="@+id/tv_search_category"
+            style="@style/PretendardBold10"
+            android:textColor="@color/mint500"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="9dp"
+            android:text="@string/search_category"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="@id/iv_search_background" />
+
+        <ImageView
+            android:id="@+id/iv_search_icon"
+            android:src="@drawable/sel_search_icon"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="18dp"
+            app:layout_constraintStart_toStartOf="@id/iv_search_background"
+            app:layout_constraintTop_toBottomOf="@id/iv_search_background" />
+
+        <TextView
+            android:id="@+id/tv_search_title"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/search_title"
+            android:textColor="@color/gray900"
+            style="@style/PretendardBold16"
+            app:layout_constraintStart_toStartOf="@id/iv_search_background"
+            app:layout_constraintTop_toBottomOf="@id/iv_search_background" />
+
+        <TextView
+            android:id="@+id/tv_search_date"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/search_period"
+            style="@style/PretendardBold10"
+            android:textColor="@color/mint600"
+            app:layout_constraintStart_toEndOf="@id/iv_search_icon"
+            app:layout_constraintTop_toBottomOf="@id/tv_search_title" />
+
+        <TextView
+            android:id="@+id/tv_search_fee"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:text="@string/search_fee"
+            style="@style/PretendardMedium10"
+            android:textColor="@color/mint600"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toEndOf="@id/iv_search_icon"
+            app:layout_constraintTop_toBottomOf="@id/tv_search_date" />
+
+        <ImageButton
+            android:id="@+id/btn_search_liked"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:background="@null"
+            android:padding="12dp"
+            android:src="@drawable/sel_search_heart"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="@id/iv_search_background" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -1,3 +1,13 @@
 <resources>
     <string name="app_name">Keyneez</string>
+
+    // search
+    <string name="search_content">제목, 키워드</string>
+    <string name="search_result">검색결과</string>
+    <string name="search_count">%s개</string>
+    <string name="search_no_result">검색결과가 없습니다.</string>
+    <string name="search_category">기획</string>
+    <string name="search_title">국립 현대 미술관</string>
+    <string name="search_period">%s–%s</string>
+    <string name="search_fee">무료 입장</string>
 </resources>