【框架】CoordinatorLayout协调者布局

<?xml version="1.0" encoding="utf-8"?>
<!--
协调者布局,该布局整体上分为两部分,
第一部分是一个AppBar
第二部分是一个滚动控件,可用的滚动控件有两种:1.NestedScrollView、2.RecyclerView
-->
<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="org.mobiletrain.a8_2coordinatorlayout.MainActivity">

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

        <!--
        app:layout_scrollFlags="scroll" 表示CollapsingToolbarLayout的折叠行为,一共有5种取值:
        1. scroll 表示CollapsingToolbarLayout可以滚动
        2. enterAlways 表示只要下方的滚动控件向下滚动,头部就显示出来
        3. enterAlwaysCollapsed 表示当下方的滚动控件滚动见顶时,头部显示出来
        4. exitUntilCollapsed 表示当CollapsingToolbarLayout折叠到最小高度时(ToolBar的高度)时,停止折叠
        5. snap 表示在折叠过程中如果停止折叠,则CollapsingToolbarLayout会就近停靠

        app:contentScrim="@color/colorPrimary"表示当CollapsingToolbarLayout折叠到最小高度时ToolBar显示的颜色

        app:layout_collapseMode="parallax"表示CollapsingToolbarLayout中子控件的折叠模式,取值有两种:
        1.parallax表示该控件的折叠速度和CollapsingToolbarLayout的折叠速度不同步
        2.pin 表示当折叠完成后,该控件停留在头部

        app:layout_collapseParallaxMultiplier="1"表示视觉乘数(视觉差),取值0~1,
        0表示该控件上面折叠,下面不折叠
        1表示该控件下面折叠,上面不折叠
        0~1之间表示上下同时折叠,0.5表示上下折叠速率相同,大于0.5表示下面折叠速率大于上面折叠速率

        CollapsingToolbarLayout上的app:title="协调者布局"属性会覆盖掉ToolBar上的Title,建议在使用CollapsingToolbarLayout时不使用ToolBar的Title
        app:collapsedTitleGravity="right"表示折叠之后Title的位置
        app:expandedTitleGravity="bottom|right"表示展开后Title的位置
        -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:collapsedTitleGravity="left"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleGravity="bottom|right"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="协调者布局">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/p1"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <!--
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    该字符串表示协调滚动控件和AppBar协同工作的类的地址
    -->
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="@string/book_content"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}
时间: 2024-10-12 11:24:02

【框架】CoordinatorLayout协调者布局的相关文章

【框架】CoordinatorLayout&amp;RecyclerView 协调者布局+卡片布局

效果图:    *recycler_view_item.xml <LinearLayout 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="1

协调者布局:CoordinatorLayout

layout_scrollFlag属性: scroll:需要哪个View滚动就需要设置该属性: exitUntilCollapsed:向上推动屏幕的时候滑动的部分折叠起来,只有下滑到最低端的时候折叠部分才会出现 enterAlways:只要下滑的时候,折叠的部分就会出现 enterAlwaysCollapsed:以最小高度折叠起来,到达顶部显示完整高度 <android.support.design.widget.CoordinatorLayout xmlns:android="http:

第三方框架-纯代码布局:Masonry的简单使用

Masonry是一个对系统NSLayoutConstraint进行封装的第三方自动布局框架,采用链式编程的方式提供给开发者API.系统AutoLayout支持的操作,Masonry都支持,相比系统API功能来说,Masonry是有过之而无不及. Masonry采取了链式编程的方式,代码理解起来非常清晰易懂,而且写完之后代码量看起来非常少.之前用NSLayoutConstraint写很多代码才能实现的布局,用Masonry最少一行代码就可以搞定.下面看到Masonry的代码就会发现,太简单易懂了.

Android批量图片加载经典系列——Volley框架实现多布局的新闻列表

一.问题描述 Volley是Google 2013年发布的实现Android平台上的网络通信库,主要提供网络通信和图片下载的解决方案,比如以前从网上下载图片的步骤可能是这样的流程: 在ListAdapter的getView()里开始图像的读取. 通过AsyncTask等机制使用HttpURLConnection从服务器去的图片资源,在AsyncTask的onPostExecute()里设置相应ImageView的属性.而在Volley下,只需要ImageLoader即可实现. 案例介绍--现图片

Android Support Design练手[DrawerLayout、CoordinatorLayout、CollapsingToolbarLayout...]

先po一张效果图 PS:原谅题主的懒惰吧.. 看着是不是很酷炫,那是因为5.0的动画做得好,代码其实没有多少,搞清楚这个布局的层次关系很重要. 废话不多说了,先来看布局文件 最外层是一个DrawerLayout,它里面可以嵌套(一个?)container和多个drawer 在这个demo中DrawerLayout包含了一个CoordinatorLayout , ListView , NavigationView CoordinatorLayout  作为 container的根布局 listVi

材料设计---Design

效果: main_activity.xml <?xml version="1.0" encoding="utf-8"?> <!--CoordinatorLayout:协调者布局.--> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app

Android5.0之TextInputLayout、FloatingActionButton的使用

TextInputLayout和FloatingActionButton都属于MD风格的控件,比起普通的EditText和Button.ImageButton,TextInputLayout和FloatingActionButton还是有很多炫酷的地方,今天我们就一起来看一下. 1.TextInputLayout TextInputLayout这个控件主要是配合EditText来使用的,以前在EditText中我们经常需要给EditText设置一个hint属性告诉用户这里输入什么,但是用户有可能

仿支付宝首页头部伸缩效果

原文链接:https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw 每次打开支付宝首页滑动,头部的伸缩动画甚是吸引人.于是自己决定动手来实现一个. 无图言虚空,效果图: 首先看到这种效果,第一反应就是coordinatorLayout布局,android studio新建项目时,可以直接新建个Scrolling Activity来查看demo效果. 官方自带的布局示例: gradle关联 implementation 'com.android.suppo

Bootstrap 框架 栅格布局系统设计原理

如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下载了源代码进行分析了一番,看完之后果然有了收获,不过我只看了栅格布局的那块代码,其实也很简单,不必担心不懂,你只需要要基础的CSS知识即可. 前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会