美文网首页
折叠布局

折叠布局

作者: DasinWong | 来源:发表于2021-01-26 15:39 被阅读0次
<?xml version="1.0" encoding="utf-8"?>
<!-- 最外层为折叠布局CoordinatorLayout -->
<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">
    
    <!--  第一部分为固定的部分,用AppBarLayout包裹 -->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--  Toolbar中包裹的内容为折叠的内容 -->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentInsetStart="0dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlways">

            <ImageView
                android:scaleType="centerCrop"
                android:src="@drawable/background"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

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

        <!-- 其余部分是跟随折叠内容移动的固定部分 -->
        <TextView
            android:gravity="center"
            android:textSize="18sp"
            android:textColor="#FFFFFF"
            android:text="跟随折叠内容移动的固定部分"
            android:background="#000000"
            android:layout_width="match_parent"
            android:layout_height="50dp"/>

    </android.support.design.widget.AppBarLayout>
    
    <!--  第二部分是滚动部分,用来触发折叠效果 -->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

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

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

相关文章

网友评论

      本文标题:折叠布局

      本文链接:https://www.haomeiwen.com/subject/arigzktx.html