feat: 스토리 recyclerView UI 구현 및 emotion 이미지 추가 #9

TeamOwori · Oct 21, 2023 · 5f647ca · 5f647ca
1 parent cb9ab61
commit 5f647ca
Show file tree

Hide file tree

Showing 28 changed files with 269 additions and 8 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -91,6 +91,8 @@ dependencies {
     implementation(libs.play.service.auth)
     implementation(libs.dagger.hilt)
     kapt(libs.dagger.hilt.compiler)
+
+    implementation(libs.coil)
 }
 
 kapt {

diff --git a/app/src/main/java/com/owori/android/presenter/ext/ImageViewExt.kt b/app/src/main/java/com/owori/android/presenter/ext/ImageViewExt.kt
@@ -0,0 +1,25 @@
+package com.owori.android.presenter.ext
+
+import android.widget.ImageView
+import androidx.databinding.BindingAdapter
+import coil.load
+import coil.transform.CircleCropTransformation
+import com.owori.android.R
+
+@BindingAdapter("setCircleImageViewBy")
+fun ImageView.setCircleImageView(image: Any?) {
+    this.load(image) {
+        crossfade(true)
+        placeholder(R.drawable.member_profile)
+        transformations(CircleCropTransformation())
+    }
+}
+
+@BindingAdapter("setImageView")
+fun ImageView.setImageView(image: Any?) {
+    this.load(image) {
+        crossfade(true)
+        placeholder(R.drawable.member_profile)
+    }
+}
+
diff --git a/app/src/main/java/com/owori/android/presenter/model/FamilyInfo.kt b/app/src/main/java/com/owori/android/presenter/model/FamilyInfo.kt
@@ -0,0 +1,6 @@
+package com.owori.android.presenter.model
+
+data class FamilyInfo(
+    val id: Int,
+    val name: String,
+)
diff --git a/app/src/main/java/com/owori/android/presenter/model/MemberItem.kt b/app/src/main/java/com/owori/android/presenter/model/MemberItem.kt
@@ -0,0 +1,10 @@
+package com.owori.android.presenter.model
+
+import android.graphics.drawable.Drawable
+
+data class MemberItem (
+    val id: Int,
+    val name: String,
+    val profileImage: String,
+    val emotionDrawable: Drawable?,
+)
diff --git a/app/src/main/res/drawable/emoji_angry.png b/app/src/main/res/drawable/emoji_angry.png
diff --git a/app/src/main/res/drawable/emoji_confused.png b/app/src/main/res/drawable/emoji_confused.png
diff --git a/app/src/main/res/drawable/emoji_cool.png b/app/src/main/res/drawable/emoji_cool.png
diff --git a/app/src/main/res/drawable/emoji_excited.png b/app/src/main/res/drawable/emoji_excited.png
diff --git a/app/src/main/res/drawable/emoji_happy.png b/app/src/main/res/drawable/emoji_happy.png
diff --git a/app/src/main/res/drawable/emoji_kiss.png b/app/src/main/res/drawable/emoji_kiss.png
diff --git a/app/src/main/res/drawable/emoji_love.png b/app/src/main/res/drawable/emoji_love.png
diff --git a/app/src/main/res/drawable/emoji_sad.png b/app/src/main/res/drawable/emoji_sad.png
diff --git a/app/src/main/res/drawable/emoji_shocked.png b/app/src/main/res/drawable/emoji_shocked.png
diff --git a/app/src/main/res/drawable/emoji_sleepy.png b/app/src/main/res/drawable/emoji_sleepy.png
diff --git a/app/src/main/res/drawable/emoji_soso.png b/app/src/main/res/drawable/emoji_soso.png
diff --git a/app/src/main/res/drawable/emoji_surprised.png b/app/src/main/res/drawable/emoji_surprised.png
diff --git a/app/src/main/res/drawable/emoji_tired.png b/app/src/main/res/drawable/emoji_tired.png
diff --git a/app/src/main/res/drawable/emoji_very_angry.png b/app/src/main/res/drawable/emoji_very_angry.png
diff --git a/app/src/main/res/drawable/emoji_very_sad.png b/app/src/main/res/drawable/emoji_very_sad.png
diff --git a/app/src/main/res/drawable/member_profile.xml b/app/src/main/res/drawable/member_profile.xml
@@ -0,0 +1,23 @@
+<vector android:autoMirrored="true" android:height="28dp"
+    android:viewportHeight="92" android:viewportWidth="92"
+    android:width="28dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#C2DFFF" android:pathData="M42,42m-30,0a30,30 0,1 1,60 0a30,30 0,1 1,-60 0"/>
+    <group>
+        <clip-path android:pathData="M42,42m-30,0a30,30 0,1 1,60 0a30,30 0,1 1,-60 0"/>
+        <path android:fillColor="#00000000"
+            android:pathData="M20.906,19.91C22.843,20.876 25.779,14.219 28.124,15.388C30.52,16.582 27.023,22.959 29.928,24.407C31.865,25.373 34.801,18.716 37.146,19.885C39.542,21.079 36.045,27.456 38.95,28.904C40.887,29.87 43.823,23.213 46.168,24.382C48.564,25.576 45.066,31.953 47.972,33.402"
+            android:strokeColor="#429AFF" android:strokeLineCap="round" android:strokeWidth="3.75"/>
+        <path android:fillColor="#00000000"
+            android:pathData="M56.677,59.202C58.435,58.111 55.199,53.519 57.327,52.198C59.501,50.848 62.228,55.756 64.864,54.119C66.622,53.028 63.386,48.436 65.514,47.114C67.688,45.764 70.415,50.672 73.051,49.035C74.809,47.944 71.573,43.352 73.701,42.031C75.875,40.681 78.602,45.589 81.238,43.952"
+            android:strokeColor="#FF9466" android:strokeLineCap="round" android:strokeWidth="3.75"/>
+        <path android:fillColor="#00000000"
+            android:pathData="M9.911,56.591C11.933,56.151 10.421,50.741 12.868,50.208C15.369,49.664 16.295,55.202 19.328,54.542C21.349,54.102 19.837,48.691 22.284,48.159C24.785,47.614 25.712,53.152 28.744,52.492C30.766,52.052 29.254,46.642 31.701,46.109C34.202,45.564 35.128,51.102 38.161,50.442"
+            android:strokeColor="#ffffff" android:strokeLineCap="round" android:strokeWidth="3.75"/>
+    </group>
+    <path android:fillColor="#FFDA56" android:pathData="M59.833,43.417C59.833,53.26 51.853,61.239 42.01,61.239C32.167,61.239 24.188,53.26 24.188,43.417C24.188,33.573 32.167,25.594 42.01,25.594C51.853,25.594 59.833,33.573 59.833,43.417Z"/>
+    <path android:fillColor="#FFCD1E" android:fillType="evenOdd" android:pathData="M42.01,26.243C32.526,26.243 24.837,33.932 24.837,43.417C24.837,52.901 32.526,60.59 42.01,60.59C51.495,60.59 59.183,52.901 59.183,43.417C59.183,33.932 51.495,26.243 42.01,26.243ZM23.538,43.417C23.538,33.215 31.808,24.944 42.01,24.944C52.212,24.944 60.483,33.215 60.483,43.417C60.483,53.618 52.212,61.889 42.01,61.889C31.808,61.889 23.538,53.618 23.538,43.417Z"/>
+    <path android:fillColor="#212121" android:pathData="M35.774,39.237C35.774,39.835 35.289,40.32 34.691,40.32C34.093,40.32 33.608,39.835 33.608,39.237C33.608,38.639 34.093,38.154 34.691,38.154C35.289,38.154 35.774,38.639 35.774,39.237Z"/>
+    <path android:fillColor="#212121" android:pathData="M41.777,39.237C41.777,39.835 41.292,40.32 40.694,40.32C40.096,40.32 39.611,39.835 39.611,39.237C39.611,38.639 40.096,38.154 40.694,38.154C41.292,38.154 41.777,38.639 41.777,39.237Z"/>
+    <path android:fillColor="#212121" android:fillType="evenOdd" android:pathData="M42.448,42.42C42.058,42.267 41.618,42.458 41.465,42.848C41.291,43.292 41.16,44.03 41.487,44.719C41.85,45.483 42.646,45.935 43.81,45.988C44.228,46.007 44.582,45.683 44.601,45.265C44.62,44.847 44.297,44.492 43.878,44.473C43.076,44.437 42.904,44.168 42.857,44.068C42.774,43.894 42.789,43.623 42.876,43.403C43.029,43.013 42.838,42.573 42.448,42.42Z"/>
+    <path android:fillColor="#212121" android:fillType="evenOdd" android:pathData="M33.716,43.081C34.135,43.081 34.474,43.421 34.474,43.839C34.474,44.899 35.661,46.33 37.723,46.33C38.699,46.33 39.631,46.01 40.365,45.591C40.73,45.382 41.034,45.156 41.258,44.948C41.495,44.729 41.604,44.568 41.635,44.5C41.808,44.119 42.257,43.951 42.638,44.124C43.02,44.297 43.188,44.746 43.015,45.128C42.865,45.457 42.593,45.779 42.288,46.061C41.971,46.353 41.573,46.646 41.117,46.907C40.209,47.426 39.02,47.846 37.723,47.846C35.02,47.846 32.958,45.92 32.958,43.839C32.958,43.421 33.298,43.081 33.716,43.081Z"/>
+</vector>
diff --git a/app/src/main/res/drawable/notice.xml b/app/src/main/res/drawable/notice.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="25dp"
+    android:height="25dp"
+    android:viewportWidth="25"
+    android:viewportHeight="25">
+  <path
+      android:pathData="M22.611,19.468C22.611,20.02 22.163,20.468 21.611,20.468H3.611C3.059,20.468 2.611,20.02 2.611,19.468C2.611,18.915 3.059,18.468 3.611,18.468V10.499C3.611,5.511 7.641,1.467 12.611,1.467C17.582,1.467 21.611,5.511 21.611,10.499V18.468C22.163,18.468 22.611,18.915 22.611,19.468ZM5.611,18.468H19.611V10.499C19.611,6.616 16.477,3.467 12.611,3.467C8.745,3.467 5.611,6.616 5.611,10.499V18.468ZM10.308,22.441C10.092,21.933 10.559,21.468 11.111,21.468H14.111C14.663,21.468 15.13,21.933 14.914,22.441C14.535,23.338 13.646,23.968 12.611,23.968C11.576,23.968 10.688,23.338 10.308,22.441Z"
+      android:fillColor="#212121"/>
+</vector>
diff --git a/app/src/main/res/drawable/notice_exist.xml b/app/src/main/res/drawable/notice_exist.xml
@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:viewportHeight="25"
+    android:viewportWidth="25" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#212121" android:pathData="M22.611,19.468C22.611,20.02 22.163,20.468 21.611,20.468H3.611C3.059,20.468 2.611,20.02 2.611,19.468C2.611,18.915 3.059,18.468 3.611,18.468V10.499C3.611,5.511 7.641,1.467 12.611,1.467C17.582,1.467 21.611,5.511 21.611,10.499V18.468C22.163,18.468 22.611,18.915 22.611,19.468ZM5.611,18.468H19.611V10.499C19.611,6.616 16.477,3.467 12.611,3.467C8.745,3.467 5.611,6.616 5.611,10.499V18.468ZM10.308,22.441C10.092,21.933 10.559,21.468 11.111,21.468H14.111C14.663,21.468 15.13,21.933 14.914,22.441C14.535,23.338 13.646,23.968 12.611,23.968C11.576,23.968 10.688,23.338 10.308,22.441Z"/>
+    <path android:fillColor="#FF3F3F" android:pathData="M19.111,5.967m-3.5,0a3.5,3.5 0,1 1,7 0a3.5,3.5 0,1 1,-7 0"/>
+</vector>
diff --git a/app/src/main/res/drawable/profile.xml b/app/src/main/res/drawable/profile.xml
@@ -0,0 +1,38 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="26dp"
+    android:height="25dp"
+    android:viewportWidth="26"
+    android:viewportHeight="25">
+  <group>
+    <clip-path
+        android:pathData="M0.611,0.467h25v24h-25z"/>
+    <path
+        android:pathData="M13.111,22.968C18.91,22.968 23.611,18.267 23.611,12.467C23.611,6.668 18.91,1.967 13.111,1.967C7.312,1.967 2.611,6.668 2.611,12.467C2.611,18.267 7.312,22.968 13.111,22.968Z"
+        android:strokeLineJoin="round"
+        android:strokeWidth="2.2"
+        android:fillColor="#00000000"
+        android:strokeColor="#212121"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M8.944,14.467C8.944,14.467 10.507,16.468 13.111,16.468C15.715,16.468 17.278,14.467 17.278,14.467"
+        android:strokeLineJoin="round"
+        android:strokeWidth="2"
+        android:fillColor="#00000000"
+        android:strokeColor="#212121"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M9.986,9.468H9.996"
+        android:strokeLineJoin="round"
+        android:strokeWidth="2"
+        android:fillColor="#00000000"
+        android:strokeColor="#212121"
+        android:strokeLineCap="round"/>
+    <path
+        android:pathData="M16.236,9.468H16.246"
+        android:strokeLineJoin="round"
+        android:strokeWidth="2"
+        android:fillColor="#00000000"
+        android:strokeColor="#212121"
+        android:strokeLineCap="round"/>
+  </group>
+</vector>
diff --git a/app/src/main/res/layout/fragment_home.xml b/app/src/main/res/layout/fragment_home.xml
@@ -7,16 +7,79 @@
         android:layout_width="match_parent"
         android:layout_height="match_parent">
 
-        <TextView
-            android:layout_width="wrap_content"
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/title_bar"
+            android:background="@color/yellow_ffeeb2"
+            android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            android:textSize="36dp"
-            android:textColor="@color/black_050708"
-            app:layout_constraintBottom_toBottomOf="parent"
-            android:text="HomeFragment"/>
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <TextView
+                android:id="@+id/family_name"
+                style="@style/TextTitle.01"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="16dp"
+                android:textColor="@color/black"
+                android:textStyle="bold"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                tools:text="우당탕탕 우리 가족 ❤️" />
+
+            <Button
+                android:id="@+id/notice"
+                android:layout_width="25dp"
+                android:layout_height="25dp"
+                android:layout_marginEnd="16dp"
+                android:background="@drawable/notice"
+                app:layout_constraintBottom_toBottomOf="@id/family_name"
+                app:layout_constraintEnd_toStartOf="@id/profile"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <Button
+                android:id="@+id/profile"
+                android:layout_marginEnd="16dp"
+                android:layout_width="25dp"
+                android:layout_height="25dp"
+                android:background="@drawable/profile"
+                app:layout_constraintBottom_toBottomOf="@id/family_name"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <androidx.recyclerview.widget.RecyclerView
+                android:id="@+id/family_member_view"
+                android:layout_width="0dp"
+                tools:listitem="@layout/item_family_member"
+                tools:itemCount="3"
+                tools:orientation="horizontal"
+                tools:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+                android:layout_height="wrap_content"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHorizontal_bias="0.0"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/family_name" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/dDayLayout"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_constraintTop_toBottomOf="@+id/title_bar">
+
+            <TextView
+                android:id="@+id/dDayTitle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                app:layout_constraintStart_toStartOf="parent"
+                android:layout_marginStart="32dp"
+                android:layout_marginTop="32dp"
+                android:text="@string/d_day_title" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
 
+
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout/item_family_member.xml b/app/src/main/res/layout/item_family_member.xml
@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:tools="http://schemas.android.com/tools"
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <data>
+        <import type="android.view.View" />
+
+        <variable
+            name="data"
+            type="com.owori.android.presenter.model.MemberItem" />
+    </data>
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:paddingHorizontal="8dp"
+        android:paddingBottom="8dp">
+
+        <ImageView
+            android:id="@+id/member_profile"
+            setCircleImageViewBy="@{data.profileImage}"
+            android:layout_width="56dp"
+            android:layout_height="56dp"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            tools:background="@drawable/member_profile" />
+
+        <androidx.cardview.widget.CardView
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:src="@color/black"
+            app:cardCornerRadius="56dp"
+            android:visibility="@{data.emotionDrawable == null ? View.GONE : View.VISIBLE}"
+            app:layout_constraintBottom_toBottomOf="@+id/member_profile"
+            app:layout_constraintEnd_toEndOf="parent">
+
+            <ImageView
+                android:id="@+id/emotion"
+                android:layout_width="18dp"
+                android:layout_height="18dp"
+                setImageView="@{data.emotionDrawable}"
+                android:layout_gravity="center"/>
+
+        </androidx.cardview.widget.CardView>
+
+        <TextView
+            android:id="@+id/username"
+            style="@style/TextBodyMedium.01"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginTop="5dp"
+            android:includeFontPadding="false"
+            android:text="@{data.name}"
+            android:textColor="@color/black"
+            android:textSize="16dp"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintHorizontal_bias="0.5"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/member_profile"
+            tools:text="고삼이" />
+
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</layout>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -14,4 +14,7 @@
 
     <color name="yellow_fee500">#FEE500</color>
 
+    <!-- home 화면 -->
+    <color name="yellow_ffeeb2">#FFEEB2</color>
+
 </resources>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -21,4 +21,12 @@
     <string name="menu_story">스토리</string>
     <string name="menu_chat">채팅</string>
 
+    <!-- 홈 -->
+    <string name="d_day_title">D-day</string>
+    <string name="d_day_content">아직 D-day가 없어요.\n캘린더에서 D-day를 추가해봐요.</string>
+    <string name="family_photo_title">가족사진</string>
+    <string name="family_photo_content">사진 자유롭게 올리는 공간이에요!\n가족사진을 올려보는건 어떨까요?</string>
+    <string name="word_to_each_other_title">서로에게 한마디</string>
+    <string name="word_to_each_other_content">오늘 어떤가요? 가족들에게 한마디를 전달해봐요 :)</string>
+
 </resources>
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -32,6 +32,7 @@ google-services = "4.3.15"
 play-service-auth = "20.7.0"
 dagger-hilt = "2.44"
 hilt-compiler = "2.44"
+coil = "2.4.0"
 
 [libraries]
 core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "core-ktx" }
@@ -72,6 +73,8 @@ firebase-auth = { group = "com.google.firebase", name = "firebase-auth-ktx" }
 play-service-auth = { group = "com.google.android.gms", name = "play-services-auth", version.ref = "play-service-auth" }
 dagger-hilt = { group = "com.google.dagger", name = "hilt-android", version.ref = "dagger-hilt" }
 dagger-hilt-compiler = { group = "com.google.dagger", name = "hilt-compiler", version.ref = "hilt-compiler" }
+coil = { group = "io.coil-kt", name = "coil", version.ref = "coil"}
+
 
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }