Skip to content

Commit

Permalink
[UI] #67 온보딩 가이드 구현 완료
Browse files Browse the repository at this point in the history
  • Loading branch information
jiwon2724 committed Jul 20, 2023
1 parent 507a149 commit 175fc62
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 1 deletion.
41 changes: 41 additions & 0 deletions core/ui/src/main/res/drawable/bg_evaluate_guide.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="267dp"
android:height="41dp"
android:viewportWidth="267"
android:viewportHeight="41">
<path
android:pathData="M133.5,0L130,5H137L133.5,0Z"
android:fillColor="#26292F"/>
<path
android:pathData="M18.5,5L248.5,5A18,18 0,0 1,266.5 23L266.5,23A18,18 0,0 1,248.5 41L18.5,41A18,18 0,0 1,0.5 23L0.5,23A18,18 0,0 1,18.5 5z"
android:fillColor="#26292F"/>
<path
android:strokeWidth="1"
android:pathData="M20.5,18L15.5,23L20.5,28"
android:strokeLineJoin="round"
android:fillColor="#00000000"
android:strokeColor="#ffffff"
android:strokeLineCap="round"/>
<path
android:strokeWidth="1"
android:pathData="M16.5,23L25.5,23"
android:fillColor="#00000000"
android:strokeColor="#ffffff"
android:strokeLineCap="round"/>
<path
android:pathData="M40.94,19.48C40.94,20.93 41.88,22.29 43.65,22.85L42.89,23.95C41.65,23.53 40.76,22.69 40.27,21.63C39.76,22.85 38.84,23.8 37.52,24.27L36.75,23.16C38.61,22.52 39.52,20.99 39.53,19.35V18.26H40.94V19.48ZM45.93,17.65V20.45H47.53V21.61H45.93V24.52H44.52V17.65H45.93ZM42.2,24.78C44.57,24.76 46.03,25.58 46.05,26.93C46.03,28.32 44.57,29.12 42.2,29.12C39.8,29.12 38.32,28.32 38.32,26.93C38.32,25.58 39.8,24.76 42.2,24.78ZM42.2,25.88C40.63,25.88 39.72,26.26 39.72,26.93C39.72,27.64 40.63,28 42.2,28C43.77,28 44.65,27.64 44.65,26.93C44.65,26.26 43.77,25.88 42.2,25.88ZM58.56,23.09V24.22H54.02V25.32H57.29V28.99H49.33V25.32H52.62V24.22H48.1V23.09H58.56ZM57.6,18V19.13H56.03V21.09H57.54V22.24H49.11V21.09H50.62V19.13H49.04V18H57.6ZM50.73,26.41V27.85H55.92V26.41H50.73ZM52.03,21.09H54.6V19.13H52.03V21.09ZM64.54,17.83C67.16,17.83 68.67,18.53 68.68,19.8C68.67,21.08 67.16,21.77 64.54,21.78C61.93,21.77 60.4,21.08 60.4,19.8C60.4,18.53 61.93,17.83 64.54,17.83ZM64.54,18.87C62.79,18.87 61.88,19.2 61.89,19.8C61.88,20.43 62.79,20.73 64.54,20.73C66.32,20.73 67.22,20.43 67.22,19.8C67.22,19.2 66.32,18.87 64.54,18.87ZM69.79,22.39V23.52H59.33V22.39H69.79ZM68.48,24.29V27.1H61.95V27.95H68.8V29.03H60.57V26.1H67.1V25.33H60.56V24.29H68.48ZM80.22,18.63V19.79H77.82C77.86,21.06 78.79,22.26 80.54,22.77L79.87,23.87C78.56,23.49 77.63,22.69 77.12,21.67C76.62,22.79 75.65,23.66 74.31,24.08L73.58,22.97C75.37,22.44 76.33,21.17 76.39,19.79H73.98V18.63H80.22ZM77.81,23.59V25.64C78.75,25.59 79.69,25.52 80.58,25.4L80.68,26.41C78.25,26.87 75.63,26.86 73.67,26.87L73.48,25.71C74.35,25.71 75.35,25.71 76.4,25.69V23.59H77.81ZM84.31,22.26V23.44H82.65V29.13H81.24V17.65H82.65V22.26H84.31ZM95.32,24.12V25.28H90.75V29.13H89.35V25.28H84.83V24.12H95.32ZM90.05,18.06C92.48,18.07 94.19,19.06 94.19,20.64C94.19,22.2 92.48,23.18 90.05,23.18C87.6,23.18 85.92,22.2 85.93,20.64C85.92,19.06 87.6,18.07 90.05,18.06ZM90.05,19.2C88.42,19.2 87.37,19.74 87.38,20.64C87.37,21.53 88.42,22.06 90.05,22.06C91.67,22.06 92.73,21.53 92.73,20.64C92.73,19.74 91.67,19.2 90.05,19.2ZM106.55,26.63V27.8H96.06V26.63H100.58V24.76H97.31V21H103.91V19.58H97.28V18.44H105.31V22.12H98.72V23.61H105.57V24.76H101.98V26.63H106.55ZM119.97,24.72V28.99H112.39V24.72H119.97ZM113.77,25.85V27.85H118.58V25.85H113.77ZM112.42,18.29V22.5C113.95,22.48 115.44,22.37 117.04,22.06L117.19,23.24C115.39,23.61 113.72,23.7 111.95,23.7H111.02V18.29H112.42ZM119.97,17.65V24.23H118.56V20.81H115.56V19.67H118.56V17.65H119.97ZM131.17,17.65V29.13H129.74V17.65H131.17ZM127.74,18.87C127.74,22.29 126.42,25.19 122.39,27.1L121.66,25.97C124.66,24.54 126.06,22.6 126.3,19.99H122.24V18.87H127.74ZM138.69,18.62V19.53H141.01V17.67H142.41V26.02H141.01V23.13H138.69V24.12H133.3V18.62H138.69ZM134.71,19.74V23.01H137.3V19.74H134.71ZM142.67,27.76V28.9H134.85V25.25H136.28V27.76H142.67ZM138.69,22H141.01V20.69H138.69V22ZM148.27,20.41C148.27,22.54 149.28,24.64 151.11,25.44L150.26,26.57C148.96,25.93 148.04,24.71 147.55,23.21C147.05,24.79 146.12,26.11 144.8,26.78L143.91,25.64C145.78,24.76 146.82,22.55 146.83,20.41V18.58H148.27V20.41ZM153.65,17.65V29.14H152.25V22.5H149.84V21.36H152.25V17.65H153.65ZM164.73,18.45V19.6H163.72V22.85C164.13,22.82 164.55,22.78 164.95,22.73V21.7H166.52V20.71H164.95V19.58H166.52V17.65H167.93V24.69H166.52V22.83H164.99L165.04,23.77C162.85,24.13 160.31,24.18 158.49,24.18L158.33,23.01C158.73,23.01 159.17,23.01 159.63,23V19.6H158.63V18.45H164.73ZM164.05,24.89C166.5,24.89 167.97,25.65 167.97,27.01C167.97,28.33 166.5,29.12 164.05,29.12C161.61,29.12 160.14,28.33 160.15,27.01C160.14,25.65 161.61,24.89 164.05,24.89ZM164.05,25.97C162.45,25.97 161.54,26.32 161.54,27.01C161.54,27.67 162.45,28.03 164.05,28.03C165.66,28.03 166.56,27.67 166.56,27.01C166.56,26.32 165.66,25.97 164.05,25.97ZM161,22.99C161.44,22.97 161.9,22.95 162.36,22.93V19.6H161V22.99ZM178.53,17.65V22.13H180.23V23.32H178.53V29.1H177.12V17.65H178.53ZM175.5,18.85C175.5,22.22 174.1,25.18 170.28,27.06L169.48,25.97C172.27,24.58 173.78,22.62 174.07,20.01H170.1V18.85H175.5ZM186.36,19.48V20.61H180.74V19.48H182.87V17.98H184.27V19.48H186.36ZM183.57,21.22C185.03,21.22 186.07,22.33 186.07,23.89C186.07,25.47 185.03,26.59 183.57,26.59C182.12,26.59 181.06,25.47 181.07,23.89C181.06,22.33 182.12,21.22 183.57,21.22ZM183.57,22.39C182.82,22.39 182.3,22.99 182.31,23.89C182.3,24.81 182.82,25.4 183.57,25.38C184.31,25.4 184.83,24.81 184.83,23.89C184.83,22.99 184.31,22.39 183.57,22.39ZM190.63,17.65V29.13H189.28V23.52H188.17V28.61H186.85V17.89H188.17V22.38H189.28V17.65H190.63ZM205.55,26.59V27.75H195.06V26.59H199.58V24.36H196.21V18.42H197.62V20.29H202.94V18.42H204.35V24.36H200.98V26.59H205.55ZM197.62,23.21H202.94V21.42H197.62V23.21ZM209.86,20.66C209.86,22.52 210.51,24.45 212.06,25.42L211.28,26.5C210.25,25.88 209.58,24.81 209.2,23.54C208.78,24.93 208.05,26.11 206.97,26.77L206.09,25.71C207.75,24.7 208.5,22.68 208.5,20.73V18.67H209.86V20.66ZM216.18,17.65V29.13H214.83V17.65H216.18ZM213.8,17.86V28.57H212.46V22.77H210.83V21.6H212.46V17.86H213.8ZM227.99,26.58V27.73H217.5V26.58H219.93V23.67C219.01,23.15 218.46,22.33 218.47,21.31C218.46,19.48 220.26,18.28 222.72,18.28C225.2,18.28 227,19.48 227,21.31C227,22.31 226.47,23.12 225.58,23.65V26.58H227.99ZM222.72,19.39C221.01,19.39 219.84,20.12 219.85,21.31C219.84,22.49 221.01,23.23 222.72,23.23C224.44,23.23 225.62,22.49 225.62,21.31C225.62,20.12 224.44,19.39 222.72,19.39ZM221.32,26.58H224.14V24.18C223.71,24.28 223.23,24.33 222.72,24.33C222.23,24.33 221.76,24.28 221.32,24.19V26.58ZM231.09,18.81L230.95,25.3H229.51L229.36,18.81H231.09ZM230.24,28.1C229.69,28.1 229.25,27.66 229.25,27.11C229.25,26.58 229.69,26.13 230.24,26.13C230.76,26.13 231.21,26.58 231.21,27.11C231.21,27.66 230.76,28.1 230.24,28.1Z"
android:fillColor="#ffffff"/>
<path
android:strokeWidth="1"
android:pathData="M248.5,28L253.5,23L248.5,18"
android:strokeLineJoin="round"
android:fillColor="#00000000"
android:strokeColor="#ffffff"
android:strokeLineCap="round"/>
<path
android:strokeWidth="1"
android:pathData="M252.5,23L243.5,23"
android:fillColor="#00000000"
android:strokeColor="#ffffff"
android:strokeLineCap="round"/>
</vector>
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?colorControlHighlight">
<item android:id="@android:id/background">
<shape>
<solid android:color="@color/transparent" />
<stroke
android:dashGap="1.5dp"
android:dashWidth="1.5dp"
android:width="@dimen/outline_stroke_width"
android:color="@color/brand100" />
<corners android:radius="@dimen/radius_10dp" />
</shape>
</item>
</ripple>
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ class EvaluateFragment : BaseFragment<FragmentEvaluateBinding>(), SwipeCallbackL
private val viewModel: EvaluateViewModel by viewModels()
private val evaluateAdapter: EvaluateAdapter = EvaluateAdapter()
private val undoSnackBar: Snackbar by lazy { showSnackBar() }

override fun bindingFactory(parent: ViewGroup?): FragmentEvaluateBinding {
return FragmentEvaluateBinding.inflate(
layoutInflater,
Expand All @@ -39,11 +40,18 @@ class EvaluateFragment : BaseFragment<FragmentEvaluateBinding>(), SwipeCallbackL
)
}

// TODO : 가독성 좋게 리팩토링
override fun initViews() = with(binding) {
observable()
setEvaluateCountSpannable()

val isFromOnboard = arguments?.getBoolean(FROM_ONBOARDING_FLAG) ?: false

layoutGuide.apply {
isVisible = isFromOnboard
setOnClickListener { hideGuide() }
}

tvNext.apply {
isVisible = isFromOnboard
setOnClickListener {
Expand All @@ -61,6 +69,7 @@ class EvaluateFragment : BaseFragment<FragmentEvaluateBinding>(), SwipeCallbackL
override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
when (newState) {
RecyclerView.SCROLL_STATE_DRAGGING -> {
hideGuide()
if (undoSnackBar.isShown) {
undoSnackBar.dismiss()
}
Expand Down Expand Up @@ -113,6 +122,8 @@ class EvaluateFragment : BaseFragment<FragmentEvaluateBinding>(), SwipeCallbackL
direction: Int
) {
viewModel.setLastEvaluateItem(evaluateAdapter.snapshot().items[position])
hideGuide()

when (direction) {
LIKE -> {
viewModel.apply {
Expand Down Expand Up @@ -192,6 +203,10 @@ class EvaluateFragment : BaseFragment<FragmentEvaluateBinding>(), SwipeCallbackL
undoSnackBar.dismiss()
}

private fun hideGuide() {
binding.layoutGuide.isVisible = false
}

companion object {
private const val SNACKBAR_DURATION = 8000
private const val SNACKBAR_HEIGHT = 50
Expand All @@ -205,6 +220,7 @@ class EvaluateFragment : BaseFragment<FragmentEvaluateBinding>(), SwipeCallbackL
private const val DISLIKE = 4

private const val FROM_ONBOARDING_FLAG = "onboarding"

fun getInstance(fromOnboard: Boolean = false): EvaluateFragment {
val bundle = Bundle()
bundle.putBoolean(FROM_ONBOARDING_FLAG, fromOnboard)
Expand Down
29 changes: 29 additions & 0 deletions feature/evaluate/src/main/res/layout/fragment_evaluate.xml
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,33 @@
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_evaluate"></androidx.recyclerview.widget.RecyclerView>

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout_guide"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/space_s_large"
android:layout_marginEnd="@dimen/space_s_large"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/rv_productList">

<View
android:id="@+id/view"
android:layout_width="match_parent"
android:layout_height="@dimen/list_item_evaluate_product_height"
android:background="@drawable/bg_transparent_outline_dot_radius_10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"></View>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/space_small"
android:background="@drawable/bg_evaluate_guide"
app:layout_constraintEnd_toEndOf="@+id/view"
app:layout_constraintStart_toStartOf="@+id/view"
app:layout_constraintTop_toBottomOf="@+id/view"></ImageView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ class OnboardActivity : BaseActivity<ActivityOnboadingBinding>() {
override fun initViews() {
val evaluateFragment = EvaluateFragment().apply {
arguments = Bundle().apply {
putBoolean("onBoarding", true)
putBoolean("onboarding", true)
}
}
supportFragmentManager.beginTransaction().add(
Expand Down

0 comments on commit 175fc62

Please sign in to comment.