Appbar在不降低整个工具栏大小的情况下滚动背景图像

时间:2015-08-09 08:22:25

标签: android material-design android-support-library android-appbarlayout

我正在尝试使用Material Design Library创建一个具有大背景Image的工具栏。工具栏后面是ScrollView。在滚动时,我的期望是工具栏将慢慢减小到最小高度,而ScrollView的其余部分会扩展以填充区域。最初,当屏幕呈现时,它看起来像initialView。在滚动图像时缩短但滚动视图不会扩展。滚动On Scroll看起来像这样 知道为什么会这样吗?

<android.support.design.widget.CoordinatorLayout 
android:id="@+id/draw_insets_frame_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"><android.support.v4.widget.NestedScrollView
   app:layout_behavior=
       "@string/appbar_scrolling_view_behavior"
   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:id="@+id/card_view_post"
       android:layout_margin="10dp"
       card_view:cardCornerRadius="@dimen/cardview_default_radius"
       card_view:cardUseCompatPadding="true"
       card_view:cardPreventCornerOverlap="true"
       android:elevation="@dimen/cardview_default_elevation"
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:card_view="http://schemas.android.com/apk/res-auto"
       style="@style/CardView.Light">
       <!--Has other Views inside it -->
   </android.support.v7.widget.CardView></android.support.v4.widget.NestedScrollView><!--App bar starts --><android.support.design.widget.AppBarLayout android:layout_width="match_parent"
    android:layout_height="wrap_content" android:minHeight="0dp">
    <android.support.v7.widget.Toolbar android:id="@+id/toolbar1"
        app:layout_scrollFlags="scroll|enterAlways"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="0dp" >

    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

1 个答案:

答案 0 :(得分:2)

看起来我需要CollapsingToolbarLayout。代码粘贴在下面,以防有人遇到同样的问题

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMargin="100dp"
        android:fitsSystemWindows="true">

        <com.example.xyzreader.ui.SquareImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:fitsSystemWindows="true"
            android:id="@+id/toolbar1"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>