Android 折叠式布局

2020-09-25 13:40:05 浏览数 (1)

折叠式布局

效果图如下

从头开始 先建立一个名为 Folding 项目,然后在创建一个Activity, OneActivity 这个Activity带有自身的XML布局文件,

** 标题栏折叠** 首先打开activity_one.xml文件 将里面的总布局改为CoordinatorLayout里面以此嵌套AppBarLayoutToolbar。如下图所示

嵌套好之后设置一些简单的样式即可 到这一步基本上这个折叠布局已经完成了,然后只要填充相关的控件即可实现效果,要注意的点是Toolbar中放置的是你需要折叠和展开的控件,而AppBarLayout中放置的是Toolbar折叠之后显示的控件,这个地方你可以放任何控件,前提是你得避免控件之间的冲突。我们就折叠一个图片ImageView吧,折叠之后显示一个标题TextView。如下图所示

到这里我们就已经实现了这个折叠式,当你点击这个蓝色背景标题往上面滑动时,ImageView就会折叠起来,往下滑动时图片就会展开。为了使体现更好可以AppBarLayout下面放一个滚动条,不要用ScrollView而是NestedScrollView因为这里你是要联动的。不论是ScrollView还是NestedScrollView,里面都只能包裹一个控件,我常用的是LinearLayout 然后LinearLayout里面设置纵向排列,放三张图片,这样LinearLayout的总高度就会超过手机屏幕,形成滑动之后图片向上面展示的效果,其实加了NestedScrollView之后,即使里面什么东西都没有,你照样可以滚动,但是如果你用ScrollView就不行,它里面就必须要有东西才行,我们看一下布局

这个时候再运行一下就有比较好的折叠效果了

最后我再放一下整体的布局页面的代码

代码语言:javascript复制
<?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"
    tools:context=".OneActivity">


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

        <android.support.v7.widget.Toolbar
            android:id="@ id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentInsetStart="0dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <ImageView
                android:scaleType="centerCrop"
                android:src="@drawable/background7"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>
        </android.support.v7.widget.Toolbar>


        <TextView
            android:gravity="center"
            android:textSize="18sp"
            android:textColor="#fff"
            android:text="标题"
            android:background="#2B8EE1"
            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">
            
            <ImageView
                android:scaleType="centerCrop"
                android:src="@drawable/background"
                android:layout_width="match_parent"
                android:layout_height="300dp"/>

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

            <ImageView
                android:scaleType="centerCrop"
                android:src="@drawable/background5"
                android:layout_width="match_parent"
                android:layout_height="300dp"/>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Github地址

0 人点赞