下拉显示上滑掩盖

最新推荐文章于 2019-01-23 16:01:28 发布

原创最新推荐文章于 2019-01-23 16:01:28 发布 · 298 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用CollapsingToolbarLayout实现的可折叠布局方案，该方案能够在滚动时改变头部的展示形式，包括图片和标题的显示效果。文章详细展示了如何配置属性如滚动模式、颜色及位置设置等。

<?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">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="300dp">

        <!--app:layout_scrollFlags="scroll|enterAlwaysCollapsed"  滚动的模式
        app:expandedTitleGravity=""  展开时,文字显示的位置
         app:expandedTitleMarginBottom="@dimen/activity_vertical_margin"    距离底部的尺寸
           app:expandedTitleMarginEnd="@dimen/activity_vertical_margin"    距离右侧的尺寸
           app:contentScrim="#00ff00"   折叠起来的颜色, 回到固定大小时, 显示的颜色

        -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/ct_id"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:expandedTitleGravity="right|bottom"
            app:contentScrim="#00ff00"
            >

            <!--app:layout_collapseMode=”parallax”  来实现视差滚动效果-->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                app:layout_collapseMode="parallax"
                android:src="@mipmap/ic_launcher"
                />

            <!-- app:layout_collapseMode="pin"  确保了toolBar在在view折叠的时候, 依然固定在屏幕的顶部-->

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin"
                app:title="可以折叠的layout"
                android:id="@+id/tool_bar_id"
                android:layout_width="match_parent"
                android:layout_height="40dp"/>


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

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


    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <!--TODO 这个地方可以放入你的ListView -->


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"/>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"/>


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"/>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@mipmap/ic_launcher"/>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"/>

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher"/>

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

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