向下滚动时隐藏 AppBar
Hide AppBar when scrolling down
我的布局中有一个 AppBar
和一个水平线性布局(其中包括一个编辑文本和两个图像按钮)和其他内容。当用户向下滚动时,我想要 AppBar
(实际上,Toolbar
隐藏 。这是我尝试过的,appbar 没有隐藏它只是停留那里。我关注了 Chris Banes Cheesesquare Sample.
这是我的应用程序的屏幕截图:
当用户滚动时,我希望 AppBar/Toolbar
消失,并且包含编辑文本的水平布局替换应用栏并保留在那里。
你能告诉我我做错了什么吗?
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_scrollFlags="scroll|enterAlways|snap"
/>
</android.support.design.widget.AppBarLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_show" tools:context="com.example.bimpc1.sozluk.GosterActivity"
android:background="@color/white"
android:id="@+id/mylin">
<View
android:layout_width="fill_parent"
android:layout_height="30dp">
</View>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/topLayout"
android:layout_alignParentTop="true"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageButton
android:id="@+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:gravity="center"
android:src="@drawable/delete"
android:background="@color/white"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:paddingTop="0dp"
android:paddingBottom="15dp"
/>
<EditText
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/et_word"
android:ems="12"
android:background="@android:color/transparent"/>
<ImageButton
android:id="@+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:gravity="center"
android:src="@drawable/search"
android:background="@color/white"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:paddingTop="0dp"
android:paddingBottom="15dp"
/>
</LinearLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_below="@+id/topLayout"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--many views inside scrollview..... -->
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
检查一下,您需要在 CoordinatorLayout 和 CollapsingToolbar 中为其设置标志,
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your scrolling content -->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html
希望本文对您有所帮助:https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
尝试使用 CoordinatorLayout 和 CollapsingToolbar。
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
要隐藏工具栏,请使用以下代码。
toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();
您需要像这样构建布局:
<android.support.design.widget.CoordinatorLayout >
<android.support.design.widget.AppBarLayout >
<android.support.design.widget.CollapsingToolbarLayout >
<ImageView />
<android.support.v7.widget.Toolbar />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Your scrollable content here -->
</android.support.design.widget.CoordinatorLayout>
完整教程位于:http://blog.grafixartist.com/toolbar-animation-with-android-design-support-library/
在Drawer.Layout
中加入android:fitsSystemWindows="true"
.
<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout"
.../...
// add in
android:fitsSystemWindows="true">
最好把你的顾虑分开。使用 chrisbanes/cheesesquare 提供的示例,您的布局看起来会更好:
<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout"
.../...
// add in
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout .../...>
<android.support.design.widget.AppBarLayout .../...>
<android.support.v7.widget.Toolbar
// Why are you using two themes?
// android:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
替换为:
<LinearLayout .../...>
<View .../...>
</View>
<LinearLayout .../...>
<ImageButton
.../...
/>
</LinearLayout>
<ScrollView .../...>
<!--many views inside scrollview..... -->
</ScrollView>
</LinearLayout>
有
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
然后使用 ViewPager 填充您的列表。
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
if (viewPager != null) {
setupViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new CheeseListFragment(), "Category 1");
adapter.addFragment(new CheeseListFragment(), "Category 2");
adapter.addFragment(new CheeseListFragment(), "Category 3");
viewPager.setAdapter(adapter);
}
然后您可以格式化此 CheeseListFragment 以单独添加您的图像视图。
也没有必要继续声明您的架构:
xmlns:app="http://schemas.android.com/apk/res-auto"
这表明您正在复制和粘贴代码而不理解它。
您还应该使用不带视图的 nestedScrollView,并在其上方使用线性布局。请注意,目前尚不清楚您要实现的目标。
其实那个设计好像是wrong.Why?让我向你解释一下。
除了那些不需要或使用的 xmlns:android="http://schemas.android.com/apk/res/android"
: LinearLayout
中的 android:layout_alignParentTop="true"
或在内容下使用 ScrollView
等,看起来像你不知道发生了什么。(没问题)。
注意:最重要的是,添加:
app:layout_behavior="@string/appbar_scrolling_view_behavior"
这里也提到:
http://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
并且这个标志应该隐藏那个部分:(exitUntilCollapsed
)
app:layout_scrollFlags="scroll|exitUntilCollapsed"
exitUntilCollapsed:
When the scroll flag is set, scrolling down will
normally cause the entire content to move.
所以最后:http://i.stack.imgur.com/qf1So.gif
希望这就是您要找的,如果不是,请编辑您的问题并添加一些屏幕截图。
随意更改标志或添加新标志来实现您的确切需求。
更新:
如果您想在折叠后隐藏 Toolbar
(红色部分),只需在 CollapsingToolbarLayout
:
中使用它
app:layout_scrollFlags="scroll|snap"
最后,你会得到相同的结果(类似于 googleplay 设计)。
代码:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your Scrollable contents should be here - such as,
ViewPager or etc -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scrollbarSize="15sp"
android:text="You Contents" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingtoolbarly"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap">
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<ImageView
android:layout_width="match_parent"
android:layout_height="190dp"
android:minHeight="190dp"
android:scaleType="fitXY"
android:src="@drawable/header"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:id="@+id/mylin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="fill_parent"
android:layout_height="30dp" />
<LinearLayout
android:id="@+id/topLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="@+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
<EditText
android:id="@+id/et_word"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:ems="12"
android:gravity="center" />
<ImageButton
android:id="@+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- And finally, NavigationView -->
<!-- <android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/app_header"
app:insetForeground="@color/app_color_primary_dark"
app:menu="@menu/navigation_menu" /> -->
</android.support.v4.widget.DrawerLayout>
结果:收起后,searchedittext不会隐藏:
更新: 新方式:)
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/mylin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<View
android:layout_width="fill_parent"
android:layout_height="30dp" />
<LinearLayout
android:id="@+id/topLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="@+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
<EditText
android:id="@+id/et_word"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:ems="12"
android:gravity="center" />
<ImageButton
android:id="@+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
</LinearLayout>
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your Scrollable contents should be here - such as,
ViewPager or etc -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scrollbarSize="15sp"
android:text="You Contents" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- And finally, NavigationView -->
<!-- <android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/app_header"
app:insetForeground="@color/app_color_primary_dark"
app:menu="@menu/navigation_menu" /> -->
</android.support.v4.widget.DrawerLayout>
结果:
试试这个代码:像下面这样使用 layout_scrollFlags:
app:layout_scrollFlags="scroll|enterAlways"
您的 XML 文件更改如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context="MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
这是content_mainXML文件
<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
我的布局中有一个 AppBar
和一个水平线性布局(其中包括一个编辑文本和两个图像按钮)和其他内容。当用户向下滚动时,我想要 AppBar
(实际上,Toolbar
隐藏 。这是我尝试过的,appbar 没有隐藏它只是停留那里。我关注了 Chris Banes Cheesesquare Sample.
这是我的应用程序的屏幕截图:
当用户滚动时,我希望 AppBar/Toolbar
消失,并且包含编辑文本的水平布局替换应用栏并保留在那里。
你能告诉我我做错了什么吗?
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_scrollFlags="scroll|enterAlways|snap"
/>
</android.support.design.widget.AppBarLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_show" tools:context="com.example.bimpc1.sozluk.GosterActivity"
android:background="@color/white"
android:id="@+id/mylin">
<View
android:layout_width="fill_parent"
android:layout_height="30dp">
</View>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/topLayout"
android:layout_alignParentTop="true"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageButton
android:id="@+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:gravity="center"
android:src="@drawable/delete"
android:background="@color/white"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:paddingTop="0dp"
android:paddingBottom="15dp"
/>
<EditText
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/et_word"
android:ems="12"
android:background="@android:color/transparent"/>
<ImageButton
android:id="@+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:gravity="center"
android:src="@drawable/search"
android:background="@color/white"
android:paddingRight="10dp"
android:paddingLeft="10dp"
android:paddingTop="0dp"
android:paddingBottom="15dp"
/>
</LinearLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_below="@+id/topLayout"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--many views inside scrollview..... -->
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
检查一下,您需要在 CoordinatorLayout 和 CollapsingToolbar 中为其设置标志,
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your scrolling content -->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
...
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
...
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
http://developer.android.com/reference/android/support/design/widget/AppBarLayout.html
希望本文对您有所帮助:https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
尝试使用 CoordinatorLayout 和 CollapsingToolbar。
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
要隐藏工具栏,请使用以下代码。
toolbar.animate().translationY(-toolbar.getBottom()).setInterpolator(new AccelerateInterpolator()).start();
您需要像这样构建布局:
<android.support.design.widget.CoordinatorLayout >
<android.support.design.widget.AppBarLayout >
<android.support.design.widget.CollapsingToolbarLayout >
<ImageView />
<android.support.v7.widget.Toolbar />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Your scrollable content here -->
</android.support.design.widget.CoordinatorLayout>
完整教程位于:http://blog.grafixartist.com/toolbar-animation-with-android-design-support-library/
在Drawer.Layout
中加入android:fitsSystemWindows="true"
.
<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout"
.../...
// add in
android:fitsSystemWindows="true">
最好把你的顾虑分开。使用 chrisbanes/cheesesquare 提供的示例,您的布局看起来会更好:
<android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout"
.../...
// add in
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout .../...>
<android.support.design.widget.AppBarLayout .../...>
<android.support.v7.widget.Toolbar
// Why are you using two themes?
// android:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.v4.widget.DrawerLayout>
替换为:
<LinearLayout .../...>
<View .../...>
</View>
<LinearLayout .../...>
<ImageButton
.../...
/>
</LinearLayout>
<ScrollView .../...>
<!--many views inside scrollview..... -->
</ScrollView>
</LinearLayout>
有
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
然后使用 ViewPager 填充您的列表。
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
if (viewPager != null) {
setupViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new CheeseListFragment(), "Category 1");
adapter.addFragment(new CheeseListFragment(), "Category 2");
adapter.addFragment(new CheeseListFragment(), "Category 3");
viewPager.setAdapter(adapter);
}
然后您可以格式化此 CheeseListFragment 以单独添加您的图像视图。
也没有必要继续声明您的架构:
xmlns:app="http://schemas.android.com/apk/res-auto"
这表明您正在复制和粘贴代码而不理解它。
您还应该使用不带视图的 nestedScrollView,并在其上方使用线性布局。请注意,目前尚不清楚您要实现的目标。
其实那个设计好像是wrong.Why?让我向你解释一下。
除了那些不需要或使用的 xmlns:android="http://schemas.android.com/apk/res/android"
: LinearLayout
中的 android:layout_alignParentTop="true"
或在内容下使用 ScrollView
等,看起来像你不知道发生了什么。(没问题)。
注意:最重要的是,添加:
app:layout_behavior="@string/appbar_scrolling_view_behavior"
这里也提到:
http://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout
并且这个标志应该隐藏那个部分:(exitUntilCollapsed
)
app:layout_scrollFlags="scroll|exitUntilCollapsed"
exitUntilCollapsed:
When the scroll flag is set, scrolling down will normally cause the entire content to move.
所以最后:http://i.stack.imgur.com/qf1So.gif
希望这就是您要找的,如果不是,请编辑您的问题并添加一些屏幕截图。
随意更改标志或添加新标志来实现您的确切需求。
更新:
如果您想在折叠后隐藏 Toolbar
(红色部分),只需在 CollapsingToolbarLayout
:
app:layout_scrollFlags="scroll|snap"
最后,你会得到相同的结果(类似于 googleplay 设计)。
代码:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your Scrollable contents should be here - such as,
ViewPager or etc -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scrollbarSize="15sp"
android:text="You Contents" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingtoolbarly"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap">
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<ImageView
android:layout_width="match_parent"
android:layout_height="190dp"
android:minHeight="190dp"
android:scaleType="fitXY"
android:src="@drawable/header"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:id="@+id/mylin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="fill_parent"
android:layout_height="30dp" />
<LinearLayout
android:id="@+id/topLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="@+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
<EditText
android:id="@+id/et_word"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:ems="12"
android:gravity="center" />
<ImageButton
android:id="@+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
</LinearLayout>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- And finally, NavigationView -->
<!-- <android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/app_header"
app:insetForeground="@color/app_color_primary_dark"
app:menu="@menu/navigation_menu" /> -->
</android.support.v4.widget.DrawerLayout>
结果:收起后,searchedittext不会隐藏:
更新: 新方式:)
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/mylin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<View
android:layout_width="fill_parent"
android:layout_height="30dp" />
<LinearLayout
android:id="@+id/topLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageButton
android:id="@+id/btn_sil"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
<EditText
android:id="@+id/et_word"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:ems="12"
android:gravity="center" />
<ImageButton
android:id="@+id/btn_getir"
android:layout_width="45dp"
android:layout_height="45dp"
android:background="@drawable/ic_arrow_drop_up_black_24dp"
android:gravity="center"
android:paddingBottom="15dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="0dp" />
</LinearLayout>
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- Your Scrollable contents should be here - such as,
ViewPager or etc -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scrollbarSize="15sp"
android:text="You Contents" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- And finally, NavigationView -->
<!-- <android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/app_header"
app:insetForeground="@color/app_color_primary_dark"
app:menu="@menu/navigation_menu" /> -->
</android.support.v4.widget.DrawerLayout>
结果:
试试这个代码:像下面这样使用 layout_scrollFlags:
app:layout_scrollFlags="scroll|enterAlways"
您的 XML 文件更改如下:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context="MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
这是content_mainXML文件
<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
</android.support.v4.widget.NestedScrollView>