Skip to content

Commit

Permalink
Merge pull request #148 from pknu-wap/#147/feature/tgyuu/MedicineInfo…
Browse files Browse the repository at this point in the history 
…TopBar

#147 add MedicineInfo TopBar Logic
  • Loading branch information
@tgyuuAn
tgyuuAn authored Jun 8, 2023
2 parents cdc91c6 + 719eb39 commit 7d3e6ba
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 124 deletions.
14 changes: 12 additions & 2 deletions ...icine/src/main/java/com/android/mediproject/feature/medicine/main/MedicineInfoFragment.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ class MedicineInfoFragment : BaseFragment<FragmentMedicineInfoBinding, MedicineI
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
fragmentViewModel.setMedicinePrimaryInfo(navArgs)
setBarStyle()

binding.apply {
systemBarStyler.changeMode(topViews = listOf(SystemBarStyler.ChangeView(topAppBar, SystemBarStyler.SpacingType.PADDING)))
Expand All @@ -58,14 +59,13 @@ class MedicineInfoFragment : BaseFragment<FragmentMedicineInfoBinding, MedicineI
topAppBar.removeOnOffsetChangedListener(null)
// smoothly hide medicinePrimaryInfoViewgroup when collapsing toolbar
topAppBar.addOnOffsetChangedListener { appBarLayout, verticalOffset ->
medicineInfoBar.alpha = 1.0f + (verticalOffset.toFloat() / appBarLayout.totalScrollRange.toFloat())
// 스크롤 할 때 마다 medicinePrimaryInfoViewgroup의 투명도 조정
medicinePrimaryInfoViewgroup.alpha = 1.0f + (verticalOffset.toFloat() / appBarLayout.totalScrollRange.toFloat()).apply {
if (this == -1.0f) {
medicinePrimaryInfoViewgroup.visibility = View.INVISIBLE
systemBarStyler.setStyle(SystemBarStyler.StatusBarColor.WHITE, SystemBarStyler.NavigationBarColor.BLACK)
} else if (this > -0.8f) {
medicinePrimaryInfoViewgroup.isVisible = true
systemBarStyler.setStyle(SystemBarStyler.StatusBarColor.BLACK, SystemBarStyler.NavigationBarColor.BLACK)
}
}
}
Expand Down Expand Up @@ -113,6 +113,16 @@ class MedicineInfoFragment : BaseFragment<FragmentMedicineInfoBinding, MedicineI
}

}
private fun setBarStyle() = binding.apply {
systemBarStyler.changeMode(
topViews = listOf(
SystemBarStyler.ChangeView(
medicineInfoBar,
SystemBarStyler.SpacingType.PADDING
)
)
)
}


// 탭 레이아웃 초기화
Expand Down
260 changes: 138 additions & 122 deletions feature/medicine/src/main/res/layout/fragment_medicine_info.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,145 +14,161 @@

</data>

<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/rootLayout"
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
android:layout_height="match_parent">

<com.google.android.material.appbar.AppBarLayout
android:id="@+id/topAppBar"
<com.android.mediproject.core.ui.base.view.Bar
android:id="@+id/medicineInfoBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="@color/white">
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:showBackButton="true"
app:setTheme="white"
app:title="의약품 정보" />

<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@id/medicineInfoBar">

<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
style="?attr/collapsingToolbarLayoutLargeStyle"
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/topAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleTextAppearance="@style/TextAppearance.Material3.TitleMedium"
app:collapsedTitleTextColor="@color/white"
app:contentScrim="@color/design_default_color_primary"
app:expandedTitleMarginBottom="0dp"
app:expandedTitleTextColor="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="@{medicineInfoArgs.itemKorName}"
app:titleCollapseMode="scale">

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/medicinePrimaryInfoViewgroup"
android:backgroundTint="@color/white">

<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
style="?attr/collapsingToolbarLayoutLargeStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginHorizontal="18dp"
android:layout_marginTop="15dp"
android:animateLayoutChanges="true"
android:background="@drawable/medicine_primary_info_background"
android:elevation="4dp"
app:layout_collapseMode="parallax">


<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/medicineImageView"
img="@{medicineInfoArgs.imgUrl}"
android:layout_width="match_parent"
android:layout_height="120dp"
android:contentDescription="@string/medicineImage"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:message="@{@string/emptyImage}"
app:messageView="@{emptyImageTextView}"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize.20DP" />

<TextView
android:id="@+id/emptyImageTextView"
app:collapsedTitleTextAppearance="@style/TextAppearance.Material3.TitleMedium"
app:collapsedTitleTextColor="@color/white"
app:contentScrim="@color/design_default_color_primary"
app:expandedTitleMarginBottom="0dp"
app:expandedTitleTextColor="@android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="@{medicineInfoArgs.itemKorName}"
app:titleCollapseMode="scale">

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/medicinePrimaryInfoViewgroup"
android:layout_width="match_parent"
android:layout_height="120dp"
android:gravity="center"
android:text="@string/emptyImage"
android:textColor="@color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/medicineKorName"
style="@style/TextAppearance.Material3.LabelLarge"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:maxLines="1"
android:text="@{medicineInfoArgs.itemKorName}"
android:textColor="@color/white"
app:layout_constraintBottom_toTopOf="@id/medicineEngName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/interestBtn"
app:layout_constraintTop_toBottomOf="@id/medicineImageView"
app:layout_constraintVertical_chainStyle="packed" />

<TextView
android:id="@+id/medicineEngName"
style="@style/TextAppearance.Material3.LabelMedium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:maxLines="1"
android:text="@{medicineInfoArgs.itemEngName}"
android:textColor="@color/medicineEngName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="@id/medicineKorName"
app:layout_constraintRight_toLeftOf="@id/interestBtn"
app:layout_constraintTop_toBottomOf="@id/medicineKorName" />


<CheckBox
android:id="@+id/interestBtn"
style="?attr/materialIconButtonStyle"
android:layout_width="wrap_content"
android:layout_gravity="top"
android:layout_marginHorizontal="18dp"
android:layout_marginTop="15dp"
android:animateLayoutChanges="true"
android:background="@drawable/medicine_primary_info_background"
android:elevation="4dp"
app:layout_collapseMode="parallax">


<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/medicineImageView"
img="@{medicineInfoArgs.imgUrl}"
android:layout_width="match_parent"
android:layout_height="120dp"
android:contentDescription="@string/medicineImage"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:message="@{@string/emptyImage}"
app:messageView="@{emptyImageTextView}"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize.20DP" />

<TextView
android:id="@+id/emptyImageTextView"
android:layout_width="match_parent"
android:layout_height="120dp"
android:gravity="center"
android:text="@string/emptyImage"
android:textColor="@color/white"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/medicineKorName"
style="@style/TextAppearance.Material3.LabelLarge"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:maxLines="1"
android:text="@{medicineInfoArgs.itemKorName}"
android:textColor="@color/white"
app:layout_constraintBottom_toTopOf="@id/medicineEngName"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@id/interestBtn"
app:layout_constraintTop_toBottomOf="@id/medicineImageView"
app:layout_constraintVertical_chainStyle="packed" />

<TextView
android:id="@+id/medicineEngName"
style="@style/TextAppearance.Material3.LabelMedium"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:maxLines="1"
android:text="@{medicineInfoArgs.itemEngName}"
android:textColor="@color/medicineEngName"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="@id/medicineKorName"
app:layout_constraintRight_toLeftOf="@id/interestBtn"
app:layout_constraintTop_toBottomOf="@id/medicineKorName" />


<CheckBox
android:id="@+id/interestBtn"
style="?attr/materialIconButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="12dp"
android:button="@drawable/checkbox_interest"
android:checked="false"
android:contentDescription="@string/interestBtn"
android:onClick="@{() -> viewModel.checkInterestMedicine()}"
android:scaleX="1.4"
android:scaleY="1.4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/medicineImageView" />

</androidx.constraintlayout.widget.ConstraintLayout>

<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="12dp"
android:button="@drawable/checkbox_interest"
android:checked="false"
android:contentDescription="@string/interestBtn"
android:onClick="@{() -> viewModel.checkInterestMedicine()}"
android:scaleX="1.4"
android:scaleY="1.4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/medicineImageView" />

</androidx.constraintlayout.widget.ConstraintLayout>

<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
app:layout_collapseMode="pin" />

</com.google.android.material.appbar.CollapsingToolbarLayout>

<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin" />
android:layout_marginTop="15dp"
app:tabIndicatorColor="@color/design_default_color_primary"
app:tabTextColor="@color/black" />

</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/contentViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
app:tabIndicatorColor="@color/design_default_color_primary"
app:tabTextColor="@color/black" />

</com.google.android.material.appbar.AppBarLayout>

<androidx.viewpager2.widget.ViewPager2
android:id="@+id/contentViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

0 comments on commit 7d3e6ba

Please sign in to comment.