Android:带有 ImageView 工具栏背景的 CollapsingToolbarLayout
Android: CollapsingToolbarLayout with ImageView Toolbar background
我想像这样实现 CollapsingToolbarLayout
:
这里的挑战是我需要一个自定义 Toolbar
和一个 gif 作为背景,因此我需要一个 ImageView
作为 Toolbar
的背景。你可以在下面看到我的实现 xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="@color/colorAccent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorAccent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<!-- Container which should be scrolled parallax and contains the image gallery -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<RelativeLayout
android:id="@+id/image_layer"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/image_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:layout_marginTop="?attr/actionBarSize"/>
<LinearLayout
android:id="@+id/image_indicators"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="@dimen/defaultPadding"
android:gravity="center"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</LinearLayout>
<!-- Container which contains the background for the toolbar and the toolbar itself -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
<ImageView
android:id="@+id/toolbar_background"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:scaleType="centerCrop"
android:layout_gravity="top"
android:background="@color/colorPrimaryLight"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<de.views.CustomTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAllCaps="true"
android:textColor="#FF0000"
android:textStyle="bold"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_gravity="center"
android:id="@+id/toolbar_title"
tools:text="Restauranttitel"/>
</android.support.v7.widget.Toolbar>
</RelativeLayout>
<!-- Tablayout -->
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabBackground="@drawable/selected_tab_background"
app:tabIndicatorColor="@android:color/transparent"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabMaxWidth="2000dp"/> <!-- we need to set this value to a very big value so that a single tab gets displayed over the full width too -->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/activity_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
通过此实现,整个视图都在滚动,Toolbar
和 TabLayout
都没有固定到屏幕顶部。
我学习了很多教程和 Whosebug 的答案,f.e。
- https://antonioleiva.com/collapsing-toolbar-layout/
- http://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/
他们都很好地解释了如何使用 CollapsingToolbarLayout
。我认为我的实现的问题是包含 ImageView
和 Toolbar
的 RelativeLayout
。当删除 RelativeLayout
和 ImageView
并将 Toolbar
的 collapseMode 设置为 'pin' 时,一切都按预期工作并且 Toolbar
和 Tablayout
都得到了如果用户正在滚动,则固定在屏幕顶部。但不幸的是,我需要 toolbar
上方的 ImageView
才能加载 GIF 作为 Toolbar
背景。
也许你们中的某个人对如何解决这个问题有了绝妙的想法。或者你有另一个想法如何实现所需的行为?请告诉我:)
更新:我创建了一个示例项目 (https://drive.google.com/open?id=0B1aHkcAaWIA-dHBTZnUyeUt3eTQ),您可以使用它重现错误的滚动行为。
除了我的 Activity
中没有 TabLayout
,我也做了同样的事情。下面是我的做法,希望对你有帮助。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rootLayout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".ActivityMemoryDetail">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize"
app:expandedTitleMarginStart="10dp"
app:expandedTitleMarginBottom="10dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<LinearLayout
android:id="@+id/imageIndicatorLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="4dp"
android:orientation="horizontal">
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="@style/ThemeOverlay.AppCompat.Light"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/nstScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/txtTagsH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Tags"/>
<View
android:id="@+id/tempView1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#6d6d6d"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_below="@+id/txtTagsH"/>
<TextView
android:id="@+id/txtTags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tempView1"
android:text="lorem, ispum, dolor, sit"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/txtDateH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Date"/>
<View
android:id="@+id/tempView2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#6d6d6d"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_below="@+id/txtDateH"/>
<TextView
android:id="@+id/txtDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tempView2"
android:text="Saturday April 30, 2016 at 8:30 PM"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right|end"
android:layout_margin="16dp"
android:src="@drawable/ic_mode_edit_white_24dp"
android:onClick="editMemory"/>
</android.support.design.widget.CoordinatorLayout>
我已经更改了activity_main.xml
。
这是代码:-
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
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/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="@+id/image_layer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:layout_marginTop="?attr/actionBarSize"
android:layout_marginBottom="?attr/actionBarSize">
<android.support.v4.view.ViewPager
android:id="@+id/image_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:layout_alignParentTop="true"/>
<LinearLayout
android:id="@+id/image_indicators"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp"
android:gravity="center"
android:layout_alignParentBottom="true">
<View
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_margin="4dp"
android:background="@drawable/indicator"/>
<View
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_margin="4dp"
android:background="@drawable/indicator"/>
<View
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_margin="4dp"
android:background="@drawable/indicator"/>
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="@+id/toolbar_background"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:scaleType="centerCrop"
android:visibility="gone"
android:layout_gravity="top"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:background="@drawable/banner_gif"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
>
<de.scrollbehaviour.CustomTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#FF0000"
android:textStyle="bold"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_gravity="center"
android:id="@+id/toolbar_title"
tools:text="Titel"/>
</android.support.v7.widget.Toolbar>
<!-- we need to set this value to a very big value so that a single tab gets displayed over the full width too -->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/activity_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabBackground="@color/colorWhite"
app:tabTextColor="#000000"
app:tabGravity="fill"
android:layout_gravity="top"
app:tabMode="fixed"
app:tabMaxWidth="2000dp"/>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/viewpager"
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"/>
</FrameLayout>
#.这里我用CollapsingToolbarLayout
高度作为300dp
,它是Toolbar
、ImageSlider
和TabLayout
身高。使用 app:titleEnabled="false"
隐藏 CollapsingToolbar title
。
#. 在 CollapsingToolbarLayout
中,添加 RelativeLayout
作为 ViewPager
(图像) 和 LinearLayout
(指标).添加了属性 android:layout_marginTop="?attr/actionBarSize"
以将其置于 ToolBar
下方,并且
添加 app:layout_collapseMode="parallax"
以在滚动期间显示 parallax
效果。
#. 在 RelativeLayout
下方,添加了一个 ImageView
以在其上显示 GIF
图像。添加属性 android:layout_height="?attr/actionBarSize"
使其高度为 Toolbar
高度。添加属性 app:layout_collapseMode="pin"
以保持 ImageView
在滚动前后固定在 top
和 visible
。
#. 在 ImageView
下面添加了 Toolbar
以显示 Toolbar
在 ImageView
之上。由于我没有将任何 background
颜色设置为 Toolbar
,它将作为 transparent
工作。像 ImageView
一样,将 app:layout_collapseMode="pin"
添加到 Toolbar
到 pin
它总是在 top
。添加了属性 android:layout_height="104dp"
,以在 collapsed
状态期间在 Toolbar
下方显示 Tablayout
。这里 104dp
是 Toolbar
height(56dp
) + Tablayout
height(48dp
).
#.最后在Toolbar
下方添加了TabLayout
并添加了属性android:layout_gravity="bottom"
显示在CollapsingToolbarLayout
的底部.
这里是简化的工作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"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<!-- Image slider container -->
<RelativeLayout
android:id="@+id/image_layer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
app:layout_collapseMode="parallax">
<!-- ViewPager -->
<android.support.v4.view.ViewPager
android:id="@+id/image_gallery"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- Pager Indicator Container -->
<LinearLayout
android:id="@+id/image_indicators"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="56dp"
android:orientation="horizontal"
android:padding="8dp"
android:gravity="center"
android:background="@color/black"/>
</RelativeLayout>
<!-- Toolbar background :: GIF -->
<ImageView
android:id="@+id/toolbar_background"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:scaleType="centerCrop"
app:layout_collapseMode="pin"
android:src="@drawable/dummy"/>
<!-- Toolbar -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAllCaps="true"
android:textColor="#000"
android:textStyle="bold"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_gravity="top"
android:id="@+id/toolbar_title"
android:text="Restaurant Title"/>
</android.support.v7.widget.Toolbar>
<!-- TabLayout -->
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabBackground="@android:color/holo_red_dark"
app:tabIndicatorColor="@android:color/transparent"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabMaxWidth="2000dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Container for TAB'S Fragments -->
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
输出:
仅供参考, 因为您使用自定义 Toolbar
和 TextView
,您必须隐藏 ActionBar
的默认 title
.为此,请在 Activity
:
中使用以下代码
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("");
希望对你有所帮助~
我想像这样实现 CollapsingToolbarLayout
:
这里的挑战是我需要一个自定义 Toolbar
和一个 gif 作为背景,因此我需要一个 ImageView
作为 Toolbar
的背景。你可以在下面看到我的实现 xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="@color/colorAccent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorAccent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<!-- Container which should be scrolled parallax and contains the image gallery -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<RelativeLayout
android:id="@+id/image_layer"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/image_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:layout_marginTop="?attr/actionBarSize"/>
<LinearLayout
android:id="@+id/image_indicators"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="@dimen/defaultPadding"
android:gravity="center"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</LinearLayout>
<!-- Container which contains the background for the toolbar and the toolbar itself -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
<ImageView
android:id="@+id/toolbar_background"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:scaleType="centerCrop"
android:layout_gravity="top"
android:background="@color/colorPrimaryLight"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<de.views.CustomTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAllCaps="true"
android:textColor="#FF0000"
android:textStyle="bold"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_gravity="center"
android:id="@+id/toolbar_title"
tools:text="Restauranttitel"/>
</android.support.v7.widget.Toolbar>
</RelativeLayout>
<!-- Tablayout -->
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabBackground="@drawable/selected_tab_background"
app:tabIndicatorColor="@android:color/transparent"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabMaxWidth="2000dp"/> <!-- we need to set this value to a very big value so that a single tab gets displayed over the full width too -->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/activity_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
通过此实现,整个视图都在滚动,Toolbar
和 TabLayout
都没有固定到屏幕顶部。
我学习了很多教程和 Whosebug 的答案,f.e。
- https://antonioleiva.com/collapsing-toolbar-layout/
- http://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/
他们都很好地解释了如何使用 CollapsingToolbarLayout
。我认为我的实现的问题是包含 ImageView
和 Toolbar
的 RelativeLayout
。当删除 RelativeLayout
和 ImageView
并将 Toolbar
的 collapseMode 设置为 'pin' 时,一切都按预期工作并且 Toolbar
和 Tablayout
都得到了如果用户正在滚动,则固定在屏幕顶部。但不幸的是,我需要 toolbar
上方的 ImageView
才能加载 GIF 作为 Toolbar
背景。
也许你们中的某个人对如何解决这个问题有了绝妙的想法。或者你有另一个想法如何实现所需的行为?请告诉我:)
更新:我创建了一个示例项目 (https://drive.google.com/open?id=0B1aHkcAaWIA-dHBTZnUyeUt3eTQ),您可以使用它重现错误的滚动行为。
除了我的 Activity
中没有 TabLayout
,我也做了同样的事情。下面是我的做法,希望对你有帮助。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rootLayout"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".ActivityMemoryDetail">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="?attr/actionBarSize"
app:expandedTitleMarginStart="10dp"
app:expandedTitleMarginBottom="10dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<LinearLayout
android:id="@+id/imageIndicatorLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="4dp"
android:orientation="horizontal">
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="@style/ThemeOverlay.AppCompat.Light"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/nstScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/txtTagsH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Tags"/>
<View
android:id="@+id/tempView1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#6d6d6d"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_below="@+id/txtTagsH"/>
<TextView
android:id="@+id/txtTags"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tempView1"
android:text="lorem, ispum, dolor, sit"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="@+id/txtDateH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="Date"/>
<View
android:id="@+id/tempView2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#6d6d6d"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:layout_below="@+id/txtDateH"/>
<TextView
android:id="@+id/txtDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tempView2"
android:text="Saturday April 30, 2016 at 8:30 PM"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right|end"
android:layout_margin="16dp"
android:src="@drawable/ic_mode_edit_white_24dp"
android:onClick="editMemory"/>
</android.support.design.widget.CoordinatorLayout>
我已经更改了activity_main.xml
。
这是代码:-
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
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/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="@+id/image_layer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:layout_marginTop="?attr/actionBarSize"
android:layout_marginBottom="?attr/actionBarSize">
<android.support.v4.view.ViewPager
android:id="@+id/image_gallery"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:layout_alignParentTop="true"/>
<LinearLayout
android:id="@+id/image_indicators"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="8dp"
android:gravity="center"
android:layout_alignParentBottom="true">
<View
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_margin="4dp"
android:background="@drawable/indicator"/>
<View
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_margin="4dp"
android:background="@drawable/indicator"/>
<View
android:layout_width="8dp"
android:layout_height="8dp"
android:layout_margin="4dp"
android:background="@drawable/indicator"/>
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="@+id/toolbar_background"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:scaleType="centerCrop"
android:visibility="gone"
android:layout_gravity="top"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:background="@drawable/banner_gif"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
>
<de.scrollbehaviour.CustomTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#FF0000"
android:textStyle="bold"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_gravity="center"
android:id="@+id/toolbar_title"
tools:text="Titel"/>
</android.support.v7.widget.Toolbar>
<!-- we need to set this value to a very big value so that a single tab gets displayed over the full width too -->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/activity_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabBackground="@color/colorWhite"
app:tabTextColor="#000000"
app:tabGravity="fill"
android:layout_gravity="top"
app:tabMode="fixed"
app:tabMaxWidth="2000dp"/>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/viewpager"
android:layout_marginTop="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"/>
</FrameLayout>
#.这里我用CollapsingToolbarLayout
高度作为300dp
,它是Toolbar
、ImageSlider
和TabLayout
身高。使用 app:titleEnabled="false"
隐藏 CollapsingToolbar title
。
#. 在 CollapsingToolbarLayout
中,添加 RelativeLayout
作为 ViewPager
(图像) 和 LinearLayout
(指标).添加了属性 android:layout_marginTop="?attr/actionBarSize"
以将其置于 ToolBar
下方,并且
添加 app:layout_collapseMode="parallax"
以在滚动期间显示 parallax
效果。
#. 在 RelativeLayout
下方,添加了一个 ImageView
以在其上显示 GIF
图像。添加属性 android:layout_height="?attr/actionBarSize"
使其高度为 Toolbar
高度。添加属性 app:layout_collapseMode="pin"
以保持 ImageView
在滚动前后固定在 top
和 visible
。
#. 在 ImageView
下面添加了 Toolbar
以显示 Toolbar
在 ImageView
之上。由于我没有将任何 background
颜色设置为 Toolbar
,它将作为 transparent
工作。像 ImageView
一样,将 app:layout_collapseMode="pin"
添加到 Toolbar
到 pin
它总是在 top
。添加了属性 android:layout_height="104dp"
,以在 collapsed
状态期间在 Toolbar
下方显示 Tablayout
。这里 104dp
是 Toolbar
height(56dp
) + Tablayout
height(48dp
).
#.最后在Toolbar
下方添加了TabLayout
并添加了属性android:layout_gravity="bottom"
显示在CollapsingToolbarLayout
的底部.
这里是简化的工作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"
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:fitsSystemWindows="true"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<!-- Image slider container -->
<RelativeLayout
android:id="@+id/image_layer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
app:layout_collapseMode="parallax">
<!-- ViewPager -->
<android.support.v4.view.ViewPager
android:id="@+id/image_gallery"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<!-- Pager Indicator Container -->
<LinearLayout
android:id="@+id/image_indicators"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="56dp"
android:orientation="horizontal"
android:padding="8dp"
android:gravity="center"
android:background="@color/black"/>
</RelativeLayout>
<!-- Toolbar background :: GIF -->
<ImageView
android:id="@+id/toolbar_background"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:scaleType="centerCrop"
app:layout_collapseMode="pin"
android:src="@drawable/dummy"/>
<!-- Toolbar -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAllCaps="true"
android:textColor="#000"
android:textStyle="bold"
android:gravity="center"
android:maxLines="1"
android:ellipsize="end"
android:layout_gravity="top"
android:id="@+id/toolbar_title"
android:text="Restaurant Title"/>
</android.support.v7.widget.Toolbar>
<!-- TabLayout -->
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabBackground="@android:color/holo_red_dark"
app:tabIndicatorColor="@android:color/transparent"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabMaxWidth="2000dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- Container for TAB'S Fragments -->
<android.support.v4.view.ViewPager
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
输出:
仅供参考, 因为您使用自定义 Toolbar
和 TextView
,您必须隐藏 ActionBar
的默认 title
.为此,请在 Activity
:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("");
希望对你有所帮助~