CollapsingToolbarLayout是可折叠MD风格ToolbarLayout,继承于FrameLayout

compile 'com.android.support:design:24.0.0' //可修改版本号为自己匹配

效果图

CollapsingToolbarLayout 放置到AppBarlayout里,示例

<android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="256dp" 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:title="CollapsingToolbarLayout例子"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp">

        <com.baiwanlu.android.image.FImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            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>

CollapsingToolbarLayout的属性

  • app:contentScrim设置颜色值。是CollapsingToolbarLayout收缩后最顶部的颜色

  • app:expandedTitleGravity表示将此CollapsingToolbarLayout完全展开后,title所处的位置,默认是left + bottom。

  • app:collapsedTitleGravity 表示当头部的衬图ImageView消失后,此title(zhangphil)将回归到Toolbar的位置(left,right等位置),默认是left

  • app:title 设置标题

CollapsingToolbarLayout里的子view可以设置属性layout_collapseMode

  • pin表示固定

  • parallax 则有一定的缩放效果。缩放效果和速率则可由app:layout_collapseParallaxMultiplier控制

标签: none

评论已关闭