动画如何隐藏ActionBar和保持标签?
How do the animation hiding the ActionBar and keeping tabs?
在 Google Play 商店应用的第 5 版中,滚动到内容,ActionBar 随滚动打开,但选项卡固定在顶部。
如何操作?
滚动前
滚动后
看看这些 link(特别是第二个 link):
Android google-play-liked listview
ListView with a (half- and or) hidable header
答案在这里:
https://github.com/ksoichiro/Android-ObservableScrollView:D
这个库非常适合我和其他人
太好了,你自己回答你的问题 ;)
这里还有一个小提示:
为您的选项卡使用单独的布局或将它们集成到您的工具栏中,然后仅在您可以看到顶部选项卡的范围内转换工具栏。
正如其他人所建议的,使用 ObservableScrollView
来自:https://github.com/ksoichiro/Android-ObservableScrollView
尝试将 Toolbar
和 SlidingTabStrip
放在同一个容器中,然后在用户滚动 ObservableScrollView
时为该容器设置动画,例如:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.github.ksoichiro.android.observablescrollview.ObservableListView
android:id="@+id/listView"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<LinearLayout
android:id="@+id/toolbarContainer"
android:orientation="vertical"
android:elevation="10dp"
android:background="@color/material_deep_teal_200"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<!--Placeholder view, your tabstrip goes here-->
<View
android:layout_width="wrap_content"
android:layout_height="48dp"/>
</LinearLayout>
</FrameLayout>
然后当您重写 ObservableScrollViewCallbacks
时,您可以这样做:
@Override
public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
toolbarContainer.animate().cancel();
int scrollDelta = scrollY - oldScrollY;
oldScrollY = scrollY;
float currentYTranslation = -toolbarContainer.getTranslationY();
float targetYTranslation = Math.min(Math.max(currentYTranslation + scrollDelta, 0), toolbarHeight);
toolbarContainer.setTranslationY(-targetYTranslation);
}
@Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
float currentYTranslation = -toolbarContainer.getTranslationY();
int currentScroll = listView.getCurrentScrollY();
if (currentScroll < toolbarHeight) {
toolbarContainer.animate().translationY(0);
} else if (currentYTranslation > toolbarHeight /2) {
toolbarContainer.animate().translationY(-toolbarHeight);
} else {
toolbarContainer.animate().translationY(0);
}
}
onUpOrCancelMotionEvent
的东西是动画容器以防止工具栏只有一半 shown/hidden。
这里有一个演示视频,仅供参考:https://drive.google.com/file/d/0B7TH7VeIpgSQSzZER1NneWpYa1E/view?usp=sharing
在 Google Play 商店应用的第 5 版中,滚动到内容,ActionBar 随滚动打开,但选项卡固定在顶部。
如何操作?
滚动前
滚动后
看看这些 link(特别是第二个 link):
Android google-play-liked listview
ListView with a (half- and or) hidable header
答案在这里:
https://github.com/ksoichiro/Android-ObservableScrollView:D
这个库非常适合我和其他人
太好了,你自己回答你的问题 ;) 这里还有一个小提示: 为您的选项卡使用单独的布局或将它们集成到您的工具栏中,然后仅在您可以看到顶部选项卡的范围内转换工具栏。
正如其他人所建议的,使用 ObservableScrollView
来自:https://github.com/ksoichiro/Android-ObservableScrollView
尝试将 Toolbar
和 SlidingTabStrip
放在同一个容器中,然后在用户滚动 ObservableScrollView
时为该容器设置动画,例如:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.github.ksoichiro.android.observablescrollview.ObservableListView
android:id="@+id/listView"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<LinearLayout
android:id="@+id/toolbarContainer"
android:orientation="vertical"
android:elevation="10dp"
android:background="@color/material_deep_teal_200"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<!--Placeholder view, your tabstrip goes here-->
<View
android:layout_width="wrap_content"
android:layout_height="48dp"/>
</LinearLayout>
</FrameLayout>
然后当您重写 ObservableScrollViewCallbacks
时,您可以这样做:
@Override
public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
toolbarContainer.animate().cancel();
int scrollDelta = scrollY - oldScrollY;
oldScrollY = scrollY;
float currentYTranslation = -toolbarContainer.getTranslationY();
float targetYTranslation = Math.min(Math.max(currentYTranslation + scrollDelta, 0), toolbarHeight);
toolbarContainer.setTranslationY(-targetYTranslation);
}
@Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
float currentYTranslation = -toolbarContainer.getTranslationY();
int currentScroll = listView.getCurrentScrollY();
if (currentScroll < toolbarHeight) {
toolbarContainer.animate().translationY(0);
} else if (currentYTranslation > toolbarHeight /2) {
toolbarContainer.animate().translationY(-toolbarHeight);
} else {
toolbarContainer.animate().translationY(0);
}
}
onUpOrCancelMotionEvent
的东西是动画容器以防止工具栏只有一半 shown/hidden。
这里有一个演示视频,仅供参考:https://drive.google.com/file/d/0B7TH7VeIpgSQSzZER1NneWpYa1E/view?usp=sharing