Android - Show/Hide 用户触摸时应用中的工具栏带有向上滑动和向下滑动动画
Android - Show/Hide Toolbar in app on user touch with slide up and slide down animation
当用户使用 CoordinatorLayout
滚动列表时,我实现了 Show/Hide 工具栏。现在,我正在 android 应用程序中的 Show/Hide 工具栏,让用户可以触摸屏幕上的任意位置。我试过这段代码,它工作正常:
if (toolbar.getVisibility() == View.VISIBLE) {
toolbar.setVisibility(View.GONE);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
} else {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
toolbar.setVisibility(View.VISIBLE);
}
但唯一的问题是工具栏在隐藏或显示时没有动画。我希望工具栏在隐藏和显示时应该上下滑动。
点击时使用以下代码:
protected void toggleToolbarView() {
isShown = !isShown;
Transition transition = new Slide(Gravity.TOP);
transition.setDuration(200);
transition.addTarget(toolbar);
TransitionManager.beginDelayedTransition(toolbar, transition);
toolbar.setVisibility(isShownHeaderFooter ? View.VISIBLE : View.GONE);
}
您可以使用动态布局
预览:https://giphy.com/gifs/jpn6QpmT3dBtf3XYIS
依赖关系implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta6'
在布局的设计页面上找到组件树并右键单击您的根布局,然后您会看到选项'Convert to MotionLayout'。建议这样做。因为它会自动生成包含 MotionScene 的 XML 文件夹。如果你不想这样做,你可以手动创建一个名为 xml
的文件夹并将 activity_main_scene.xml 放入其中)
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/root"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="@+id/motion_base"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/activity_main_scene"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main_scene.xml(在 xml
文件夹内,也在 res 文件夹内)
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:duration="1000"
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@id/start">
<OnClick
motion:clickAction="transitionToEnd"
motion:targetId="@+id/motion_base"/>
</Transition>
<ConstraintSet android:id="@+id/start" />
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="invisible"/>
</ConstraintSet>
</MotionScene>
if (toolbar.getVisibility() == View.VISIBLE) {
appbar.animate().translationY(-112).setDuration(600L)
.withEndAction(new Runnable() {
@Override
public void run() {
toolbar.setVisibility(View.GONE);
}
}).start();
} else {
toolbar.setVisibility(View.VISIBLE);
appbar.animate().translationY(0).setDuration(600L).start();
}
当用户使用 CoordinatorLayout
滚动列表时,我实现了 Show/Hide 工具栏。现在,我正在 android 应用程序中的 Show/Hide 工具栏,让用户可以触摸屏幕上的任意位置。我试过这段代码,它工作正常:
if (toolbar.getVisibility() == View.VISIBLE) {
toolbar.setVisibility(View.GONE);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
} else {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
toolbar.setVisibility(View.VISIBLE);
}
但唯一的问题是工具栏在隐藏或显示时没有动画。我希望工具栏在隐藏和显示时应该上下滑动。
点击时使用以下代码:
protected void toggleToolbarView() {
isShown = !isShown;
Transition transition = new Slide(Gravity.TOP);
transition.setDuration(200);
transition.addTarget(toolbar);
TransitionManager.beginDelayedTransition(toolbar, transition);
toolbar.setVisibility(isShownHeaderFooter ? View.VISIBLE : View.GONE);
}
您可以使用动态布局 预览:https://giphy.com/gifs/jpn6QpmT3dBtf3XYIS
依赖关系implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta6'
在布局的设计页面上找到组件树并右键单击您的根布局,然后您会看到选项'Convert to MotionLayout'。建议这样做。因为它会自动生成包含 MotionScene 的 XML 文件夹。如果你不想这样做,你可以手动创建一个名为 xml
的文件夹并将 activity_main_scene.xml 放入其中)
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/root"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="@+id/motion_base"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/activity_main_scene"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
activity_main_scene.xml(在 xml
文件夹内,也在 res 文件夹内)
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:duration="1000"
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@id/start">
<OnClick
motion:clickAction="transitionToEnd"
motion:targetId="@+id/motion_base"/>
</Transition>
<ConstraintSet android:id="@+id/start" />
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="invisible"/>
</ConstraintSet>
</MotionScene>
if (toolbar.getVisibility() == View.VISIBLE) {
appbar.animate().translationY(-112).setDuration(600L)
.withEndAction(new Runnable() {
@Override
public void run() {
toolbar.setVisibility(View.GONE);
}
}).start();
} else {
toolbar.setVisibility(View.VISIBLE);
appbar.animate().translationY(0).setDuration(600L).start();
}