From 56f1c726b2dfaab9fab072744871bba2d5ddea73 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Mon, 10 Jun 2019 13:37:54 +0200 Subject: [PATCH 1/4] FAB Motion WIP FAB Motion WIP FAB Motion WIP FAB Motion WIP --- .../home/room/list/widget/FabMenuView.kt | 91 +------- .../layout/constraint_set_fab_menu_close.xml | 81 ------- .../layout/constraint_set_fab_menu_open.xml | 76 ------- .../main/res/layout/fragment_room_list.xml | 2 + ...enu_view.xml => motion_fab_menu_merge.xml} | 33 ++- .../main/res/xml/motion_scene_fab_menu.xml | 213 ++++++++++++++++++ 6 files changed, 238 insertions(+), 258 deletions(-) delete mode 100644 vector/src/main/res/layout/constraint_set_fab_menu_close.xml delete mode 100644 vector/src/main/res/layout/constraint_set_fab_menu_open.xml rename vector/src/main/res/layout/{merge_fab_menu_view.xml => motion_fab_menu_merge.xml} (68%) create mode 100644 vector/src/main/res/xml/motion_scene_fab_menu.xml diff --git a/vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt b/vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt index 95b7179c40..7b8fb78c4c 100644 --- a/vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt +++ b/vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt @@ -18,56 +18,29 @@ package im.vector.riotredesign.features.home.room.list.widget import android.content.Context import android.util.AttributeSet -import android.view.ViewGroup -import androidx.constraintlayout.widget.ConstraintLayout -import androidx.constraintlayout.widget.ConstraintSet -import androidx.core.view.isVisible -import androidx.transition.ChangeTransform -import androidx.transition.Transition -import androidx.transition.TransitionManager +import androidx.constraintlayout.motion.widget.MotionLayout import im.vector.riotredesign.R -import im.vector.riotredesign.core.animations.ANIMATION_DURATION_SHORT -import im.vector.riotredesign.core.animations.SimpleTransitionListener -import im.vector.riotredesign.core.animations.VectorFullTransitionSet import im.vector.riotredesign.features.themes.ThemeUtils -import kotlinx.android.synthetic.main.merge_fab_menu_view.view.* +import kotlinx.android.synthetic.main.motion_fab_menu_merge.view.* class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, - defStyleAttr: Int = 0) : ConstraintLayout(context, attrs, defStyleAttr) { + defStyleAttr: Int = 0) : MotionLayout(context, attrs, defStyleAttr) { var listener: Listener? = null - private var isFabMenuOpened = false - init { - inflate(context, R.layout.merge_fab_menu_view, this) + inflate(context, R.layout.motion_fab_menu_merge, this) } override fun onFinishInflate() { super.onFinishInflate() - // Collapse - ConstraintSet().also { - it.clone(context, R.layout.constraint_set_fab_menu_close) - it.applyTo(this) - } - - createRoomItemChat.isVisible = false - createRoomItemChatLabel.isVisible = false - createRoomItemGroup.isVisible = false - createRoomItemGroupLabel.isVisible = false - // Collapse end - // Tint label background listOf(createRoomItemChatLabel, createRoomItemGroupLabel) .forEach { it.setBackgroundResource(ThemeUtils.getResourceId(context, R.drawable.vector_label_background_light)) } - createRoomButton.setOnClickListener { - toggleFabMenu() - } - listOf(createRoomItemChat, createRoomItemChatLabel) .forEach { it.setOnClickListener { @@ -89,6 +62,9 @@ class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSe } fun show() { + // Ensure visibility is well restored + // FIXME It does not work, FAB is not visible, alpha is 0... And cannot set it to 1 + createRoomButton.show() } @@ -96,61 +72,12 @@ class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSe createRoomButton.hide() } - private fun openFabMenu() { - if (isFabMenuOpened) { - return - } - - toggleFabMenu() - } - private fun closeFabMenu() { - if (!isFabMenuOpened) { - return - } - - toggleFabMenu() - } - - private fun toggleFabMenu() { - isFabMenuOpened = !isFabMenuOpened - - TransitionManager.beginDelayedTransition(parent as? ViewGroup ?: this, - VectorFullTransitionSet().apply { - duration = ANIMATION_DURATION_SHORT - ChangeTransform() - addListener(object : SimpleTransitionListener() { - override fun onTransitionEnd(transition: Transition) { - // Hide the view after the transition for a better visual effect - createRoomItemChat.isVisible = isFabMenuOpened - createRoomItemChatLabel.isVisible = isFabMenuOpened - createRoomItemGroup.isVisible = isFabMenuOpened - createRoomItemGroupLabel.isVisible = isFabMenuOpened - } - }) - }) - - if (isFabMenuOpened) { - // Animate manually the rotation for a better effect - createRoomButton.animate().setDuration(ANIMATION_DURATION_SHORT).rotation(135f) - - - ConstraintSet().also { - it.clone(context, R.layout.constraint_set_fab_menu_open) - it.applyTo(this) - } - } else { - createRoomButton.animate().setDuration(ANIMATION_DURATION_SHORT).rotation(0f) - - ConstraintSet().also { - it.clone(context, R.layout.constraint_set_fab_menu_close) - it.applyTo(this) - } - } + transitionToStart() } fun onBackPressed(): Boolean { - if (isFabMenuOpened) { + if (currentState == R.id.constraint_set_fab_menu_open) { closeFabMenu() return true } diff --git a/vector/src/main/res/layout/constraint_set_fab_menu_close.xml b/vector/src/main/res/layout/constraint_set_fab_menu_close.xml deleted file mode 100644 index 4df0e8d092..0000000000 --- a/vector/src/main/res/layout/constraint_set_fab_menu_close.xml +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/vector/src/main/res/layout/constraint_set_fab_menu_open.xml b/vector/src/main/res/layout/constraint_set_fab_menu_open.xml deleted file mode 100644 index fc47458ece..0000000000 --- a/vector/src/main/res/layout/constraint_set_fab_menu_open.xml +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/vector/src/main/res/layout/fragment_room_list.xml b/vector/src/main/res/layout/fragment_room_list.xml index 452451f77c..729afb2b30 100644 --- a/vector/src/main/res/layout/fragment_room_list.xml +++ b/vector/src/main/res/layout/fragment_room_list.xml @@ -17,6 +17,8 @@ android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone" + app:layoutDescription="@xml/motion_scene_fab_menu" + tools:showPaths="true" tools:visibility="visible" /> + + app:layoutDescription="@xml/motion_scene_fab_menu" + tools:motionProgress="0.5" + tools:parentTag="androidx.constraintlayout.motion.widget.MotionLayout" + tools:showPaths="true"> + app:tint="@color/black" /> @@ -43,17 +43,16 @@ android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:src="@drawable/ic_fab_add_chat" - android:visibility="gone" - app:backgroundTint="?riotx_fab_secondary_bg" + app:backgroundTint="#FFFFFF" app:fabCustomSize="48dp" app:maxImageSize="29dp" - app:tint="?riotx_fab_secondary_color" - tools:ignore="MissingConstraints" - tools:visibility="visible" /> + app:tint="@color/black" /> @@ -63,11 +62,7 @@ android:id="@+id/createRoomButton" android:layout_width="wrap_content" android:layout_height="wrap_content" - android:layout_gravity="bottom|end" android:src="@drawable/ic_fab_add" - android:visibility="gone" - app:maxImageSize="14dp" - tools:ignore="MissingConstraints" - tools:visibility="visible" /> + app:maxImageSize="14dp" /> diff --git a/vector/src/main/res/xml/motion_scene_fab_menu.xml b/vector/src/main/res/xml/motion_scene_fab_menu.xml new file mode 100644 index 0000000000..d1c94f35ba --- /dev/null +++ b/vector/src/main/res/xml/motion_scene_fab_menu.xml @@ -0,0 +1,213 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file From 90a011c4e4298640864382fcbbe469e94e773915 Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Mon, 10 Jun 2019 17:45:35 +0200 Subject: [PATCH 2/4] Fix issue on animation --- .../main/res/layout/motion_fab_menu_merge.xml | 12 +-- .../main/res/xml/motion_scene_fab_menu.xml | 76 +++++-------------- 2 files changed, 27 insertions(+), 61 deletions(-) diff --git a/vector/src/main/res/layout/motion_fab_menu_merge.xml b/vector/src/main/res/layout/motion_fab_menu_merge.xml index 211293e8bc..a7f82fe4b1 100644 --- a/vector/src/main/res/layout/motion_fab_menu_merge.xml +++ b/vector/src/main/res/layout/motion_fab_menu_merge.xml @@ -5,7 +5,7 @@ android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_scene_fab_menu" - tools:motionProgress="0.5" + tools:motionProgress="0.65" tools:parentTag="androidx.constraintlayout.motion.widget.MotionLayout" tools:showPaths="true"> @@ -30,10 +30,11 @@ @@ -51,10 +52,11 @@ diff --git a/vector/src/main/res/xml/motion_scene_fab_menu.xml b/vector/src/main/res/xml/motion_scene_fab_menu.xml index d1c94f35ba..fc363cfccf 100644 --- a/vector/src/main/res/xml/motion_scene_fab_menu.xml +++ b/vector/src/main/res/xml/motion_scene_fab_menu.xml @@ -6,58 +6,22 @@ + motion:duration="200"> - - - - - - - - - - - - - - - - + + android:visibility="invisible" /> + android:visibility="invisible" + motion:layout_constraintBottom_toBottomOf="@+id/createRoomItemGroup" + motion:layout_constraintEnd_toEndOf="@+id/createRoomItemGroup" + motion:layout_constraintTop_toTopOf="@+id/createRoomItemGroup" /> @@ -160,7 +122,8 @@ Date: Tue, 11 Jun 2019 15:43:40 +0200 Subject: [PATCH 3/4] Fix / visibility bug after scroll + refine animation --- .../home/room/list/RoomListFragment.kt | 35 +++++++++--------- .../home/room/list/widget/FabMenuView.kt | 13 ++++--- .../main/res/xml/motion_scene_fab_menu.xml | 36 +++++++++++++++++-- 3 files changed, 61 insertions(+), 23 deletions(-) diff --git a/vector/src/main/java/im/vector/riotredesign/features/home/room/list/RoomListFragment.kt b/vector/src/main/java/im/vector/riotredesign/features/home/room/list/RoomListFragment.kt index e354be2f74..e7b8b8378a 100644 --- a/vector/src/main/java/im/vector/riotredesign/features/home/room/list/RoomListFragment.kt +++ b/vector/src/main/java/im/vector/riotredesign/features/home/room/list/RoomListFragment.kt @@ -93,25 +93,26 @@ class RoomListFragment : VectorBaseFragment(), RoomSummaryController.Callback, O } // Hide FAB when list is scrolling - epoxyRecyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() { - override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) { - createChatFabMenu.removeCallbacks(showFabRunnable) + epoxyRecyclerView.addOnScrollListener( + object : RecyclerView.OnScrollListener() { + override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) { + createChatFabMenu.removeCallbacks(showFabRunnable) - when (newState) { - RecyclerView.SCROLL_STATE_IDLE -> { - createChatFabMenu.postDelayed(showFabRunnable, 1000) - } - RecyclerView.SCROLL_STATE_DRAGGING, - RecyclerView.SCROLL_STATE_SETTLING -> { - when (roomListParams.displayMode) { - DisplayMode.HOME -> createChatFabMenu.hide() - DisplayMode.PEOPLE -> createChatRoomButton.hide() - else -> createGroupRoomButton.hide() + when (newState) { + RecyclerView.SCROLL_STATE_IDLE -> { + createChatFabMenu.postDelayed(showFabRunnable, 1000) + } + RecyclerView.SCROLL_STATE_DRAGGING, + RecyclerView.SCROLL_STATE_SETTLING -> { + when (roomListParams.displayMode) { + DisplayMode.HOME -> createChatFabMenu.hide() + DisplayMode.PEOPLE -> createChatRoomButton.hide() + else -> createGroupRoomButton.hide() + } + } } } - } - } - }) + }) } @@ -220,7 +221,7 @@ class RoomListFragment : VectorBaseFragment(), RoomSummaryController.Callback, O return super.onBackPressed() } - // RoomSummaryController.Callback ************************************************************** +// RoomSummaryController.Callback ************************************************************** override fun onRoomSelected(room: RoomSummary) { roomListViewModel.accept(RoomListActions.SelectRoom(room)) diff --git a/vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt b/vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt index 7b8fb78c4c..9210e7ac2e 100644 --- a/vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt +++ b/vector/src/main/java/im/vector/riotredesign/features/home/room/list/widget/FabMenuView.kt @@ -19,6 +19,8 @@ package im.vector.riotredesign.features.home.room.list.widget import android.content.Context import android.util.AttributeSet import androidx.constraintlayout.motion.widget.MotionLayout +import androidx.core.view.isVisible +import com.google.android.material.floatingactionbutton.FloatingActionButton import im.vector.riotredesign.R import im.vector.riotredesign.features.themes.ThemeUtils import kotlinx.android.synthetic.main.motion_fab_menu_merge.view.* @@ -62,14 +64,17 @@ class FabMenuView @JvmOverloads constructor(context: Context, attrs: AttributeSe } fun show() { - // Ensure visibility is well restored - // FIXME It does not work, FAB is not visible, alpha is 0... And cannot set it to 1 - + isVisible = true createRoomButton.show() } fun hide() { - createRoomButton.hide() + createRoomButton.hide(object : FloatingActionButton.OnVisibilityChangedListener() { + override fun onHidden(fab: FloatingActionButton?) { + super.onHidden(fab) + isVisible = false + } + }) } private fun closeFabMenu() { diff --git a/vector/src/main/res/xml/motion_scene_fab_menu.xml b/vector/src/main/res/xml/motion_scene_fab_menu.xml index fc363cfccf..5cbf8bcd5b 100644 --- a/vector/src/main/res/xml/motion_scene_fab_menu.xml +++ b/vector/src/main/res/xml/motion_scene_fab_menu.xml @@ -6,12 +6,44 @@ + motion:motionInterpolator="easeInOut" + motion:duration="300"> + + + + + + + + + + + @@ -96,7 +128,7 @@ - + Date: Fri, 14 Jun 2019 16:14:39 +0200 Subject: [PATCH 4/4] format file --- .../main/res/xml/motion_scene_fab_menu.xml | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/vector/src/main/res/xml/motion_scene_fab_menu.xml b/vector/src/main/res/xml/motion_scene_fab_menu.xml index 5cbf8bcd5b..646cfc34c5 100644 --- a/vector/src/main/res/xml/motion_scene_fab_menu.xml +++ b/vector/src/main/res/xml/motion_scene_fab_menu.xml @@ -6,8 +6,8 @@ + motion:duration="300" + motion:motionInterpolator="easeInOut"> + motion:percentY="0.8" /> + motion:motionTarget="@id/createRoomItemGroupLabel" + motion:percentX="0.9" + motion:percentY="0.8" /> + motion:motionTarget="@id/createRoomItemChatLabel" /> + motion:motionTarget="@id/createRoomItemGroupLabel" /> - + - +