Android一起学Ui(1)----(折叠布局)

最新推荐文章于 2025-02-14 16:09:31 发布

小坤同学

最新推荐文章于 2025-02-14 16:09:31 发布

阅读量1k

点赞数 1

分类专栏： Android-Ui

本文链接：https://blog.youkuaiyun.com/data_hlk/article/details/63685597

版权

Android-Ui 专栏收录该内容

1 篇文章

订阅专栏

本文记录了一篇关于Android UI布局的笔记，重点介绍了折叠布局的使用方法。作者通过实例代码展示了如何实现折叠效果，并强调理解控件属性、场景和方法对深入学习的重要性。同时提到了在使用Material Design控件时需要引入的相关库，以及fitsSystemWindows属性的影响。文中还给出了参考学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不知道大家有没有健忘的习惯啊,总是写完之后再过一段时间就忘记了自己写的代码了,每次需要写的时候还要重新再看一次,或者在去查询一下相关的属性以及方法.

近期感觉这种情况比较明显,总是忘记很多方法和属性,久而久之每次写代码都会觉得特别累,也会开始怀疑自己是不是脑子不好使了,有点挫败感有木有….

所以打算记录一系列关于Android Ui 布局方面的笔记,一方面方便自己查询使用,另一方面方便学习记录.

今天第一篇就写一个关于折叠布局的文章吧,内容不涉及太多的原理介绍,只是简单罗列使用方式方法,从代码和效果中体会控件的使用以及场景,秉承能简单可使用的原则.

先上效果图:
这里写图片描述

整体布局为:

<android.support.design.widget.CoordinatorLayout >

    <android.support.design.widget.AppBarLayout>

        <android.support.design.widget.CollapsingToolbarLayout>
            <ImageView/>
            <android.support.v7.widget.Toolbar />

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

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

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

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

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

代码如下:

//Coordinator(协调者)继承自Framelayout 1,作为顶层布局 2, 调度协调子布局
// 根据behavior 行为属性,比如NestedScrollView 指定为依赖AppBar,那么就会处理关于AppBar根据
// NestedScrollView的行为,而使AppBar进行相应的动作(这里可以不深究,文后给出相应的文章将的会更透彻)

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

//AppBarLayout 继承自LinearLayout 加入了材料设计概念 
//根据其他滚动的View的变化,对其内部的view做一些动态的处理
//比如SrollView向上滑动,我们让ToolBar也跟着滑动.
//通过指定app:layout_scrollFlags 属性,来使内部的子view做出相应的动作

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true">

//对ToolBar进行再次包装,主要实现折叠的效果
// app:contentScrim 当收缩到最小高度时 显示的颜色 一般为toolBar 的颜色
//app:layout_collapseMode 子View的视图折叠模式
// parallax : 视差效果
// pin : 达到最小高度时 固定不动
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/coolapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

//layout_scrollFlags: 属性中 
// scroll : 跟随滚动,比如跟随Scrollview 的滚动做出相同的滚动
// enterAlways : 直接滚动出全部,不论Scrollview滚动多少距离
// exitUntilCollapsed : Scrollview 向上滚动时,先滚动自己到最小高度,停留后,Scrollview继续向上
// enterAlwaysCollapsed: 跟随滚动到最小高度,当Scrollview向下滚动到顶部时,再继续跟随滚动到自身的最大值
//这个属性主要是设置给AppBar的.

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:src="@drawable/splash0"
                app:layout_collapseMode="parallax" />
//ToolBar 用来替换AnctionBar,所以我们先要隐藏掉ActionBar

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


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

//NestedScrollView 继承Framelayout 实现效果与Scrollview一样,内部处理了对于AppBar的依赖
// 需要指定 app:layout_behavior="@string/appbar_scrolling_view_behavior"属性,才会对AppBar产生影响.必须指定.
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nestedScroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

            <include layout="@layout/commot_cardview" />

            <include layout="@layout/commot_cardview" />

            <include layout="@layout/commot_cardview" />

            <include layout="@layout/commot_cardview" />

            <include layout="@layout/commot_cardview" />

            <include layout="@layout/commot_cardview" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

// 浮动的Button 
// 这里设置了一个锚点 layout_anchor,来指定Buttton所在控件的范围
// layout_anchorGravity : 指定Button 具体的位置
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fabtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:src="@drawable/ic_done_white_24dp"
        android:layout_margin="16dp"
        app:elevation="5dp"
        app:layout_anchor="@+id/appBar"
        app:layout_anchorGravity="end|right|bottom" />

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

那么通过以上的布局就可以直接实现折叠的效果了,其实很多原理的知识,会很杂乱无章,也会经常性的忘记,那么可以通过一些列子加深这样的印象,当一个控件你明白了其中的属性,以及使用场景和方法时,再去探究其内部的原理或源码的时候,我觉得会事半功倍.

对于以上内容的一点补充:

使用材料设计中的控件的时候我们需要在build.gradle 下引入,相关的库

 compile 'com.android.support:appcompat-v7:25.3.0'
 compile 'com.android.support:design:25.3.0'

fitsSystemWindows 属性为true时,ContentView会忽略actionbar,title,底部按键的空间后剩余的可用区域.所以图片会向上移动占据状态栏.

如果状态栏要使用图片延伸作为背景需要在values-v21 styles 主题中指定
<item name="android:statusBarColor">@android:color/transparent</item>

源码地址:AndroidUiDemo

学习参考文章如下:

玩转AppBarLayout，更酷炫的顶部栏

android CoordinatorLayout使用

关于ToolBar的使用:

Android 5.x Theme 与 ToolBar 实战

关于CoordinatorLayout的使用以及如何自定义依赖效果

CoordinatorLayout的使用如此简单