CoordinatorLayout--协调者

来源：互联网发布：javascript resources 编辑：程序博客网时间：2024/05/16 12:43

本文参考：

http://blog.csdn.net/xyz_lmn/article/details/48055919

南尘2251 ：http://www.jianshu.com/p/640f4ef05fb2

依赖注入：

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

CoordinatorLayout与FloatingActionButton

布局如下：

<?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:background="@android:color/darker_gray">    <android.support.design.widget.FloatingActionButton        android:id="@+id/floatingActionButton"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="end|bottom"        android:layout_margin="16dp"        android:src="@mipmap/ic_launcher" /></android.support.design.widget.CoordinatorLayout>

Activity中这样写的：

    @OnClick(R.id.floatingActionButton)    public void onClickFloatingBtn() {        Snackbar.make(floatingActionButton, "点着了", Snackbar.LENGTH_SHORT).setAction("取消", new View.OnClickListener() {            @Override            public void onClick(View v) {                Toast.makeText(mContext, "取消了", Toast.LENGTH_SHORT).show();            }        }).show();    }

效果大概如下图（盗图）

CoordinatorLayout与AppBarLayout

布局如下

<?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:id="@+id/coordinatorLayout"    android:layout_width="368dp"    android:layout_height="wrap_content"    tools:context="com.lwz.designdemo.AppBarActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical">        <android.support.v7.widget.Toolbar            android:id="@+id/tb_toolbar"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/colorPrimary"            app:layout_scrollFlags="scroll|enterAlways"></android.support.v7.widget.Toolbar>    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/rv_data"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v7.widget.RecyclerView></android.support.design.widget.CoordinatorLayout>

app:layout_behavior="@string/appbar_scrolling_view_behavior" 指定联动关系

我们可以看到，上面出现了一个 app:layouy_scrollFrags 的自定义属性设置，这个属性可以定义我们不同的滚动行为。

根据官方文档，layout_scrollFlags 的取值可以为以下几种。

scroll
设成这个值的效果就好比本 View 和 Scrolling view 是“一体”的。具体示例我们在上面已经给出。有一点特别需要我们的注意，为了其他的滚动行为生效，必须同时指定 Scroll 和相应的标记，比如我们想要exitUntilCollapsed 所表现的滚动行为，必须将 layout_scrollFlags 指定为scroll|exitUntilCollapsed 。
exitUntilCollapsed
当本 View 离开屏幕时，会被“折叠”直到达到其最小高度。我们可以这样理解这个效果：当我们开始向上滚动 Scrolling view 时，本 View 会先接管滚动事件，这样本 View 会先进行滚动，直到滚动到了最小高度（折叠了），Scrolling view 才开始实际滚动。而当本 View 已完全折叠后，再向下滚动 Scrolling view，直到 Scrolling view 顶部的内容完全显示后，本 View 才会开始向下滚动以显现出来。
enterAlways
当 Scrolling view 向下滚动时，本 View 会一起跟着向下滚动。实际上就好比我们同时对 Scrolling view 和本 View 进行向下滚动。　　
enterAlwaysCollapsed
从名字上就可以看出，这是在 enterAlways 的基础上，加上了“折叠”的效果。当我们开始向下滚动 Scrolling View 时，本 View 会一起跟着滚动直到达到其“折叠高度”（即最小高度）。然后当 Scrolling View 滚动至顶部内容完全显示后，再向下滚动 Scrolling View，本 View 会继续滚动到完全显示出来。　　
snap
在一次滚动结束时，本 View 很可能只处于“部分显示”的状态，加上这个标记能够达到“要么完全隐藏，要么完全显示”的效果。

-- 摘抄自
作者：南尘2251
链接：http://www.jianshu.com/p/640f4ef05fb2
來源：简书

activity这样写的：

    protected void initView(Bundle savedInstanceState) {        tbToolbar.setTitle("我就是title");        tbToolbar.setLogo(R.mipmap.ic_launcher);        tbToolbar.inflateMenu(R.menu.menu_toolbar);        List<String> list = new ArrayList<>();        for (int i = 0; i < 100; i++) {            list.add("测试_" + i);        }        rvData.setLayoutManager(new LinearLayoutManager(mContext));        rvData.addItemDecoration(new DividerItemDecoration(mContext, DividerItemDecoration.VERTICAL));        rvData.setAdapter(new AppBarAdapter(mContext, list));    }

效果如下

AppBarLayout嵌套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"    tools:context="com.lwz.designdemo.CoorToolBarActivity">    <!--继承自LinearLayout-->    <android.support.design.widget.AppBarLayout        android:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:fitsSystemWindows="true"        app:theme="@style/AppTheme.AppBarOverlay">        <!--可折叠部分-->        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/ctl_title"            android:layout_width="match_parent"            android:layout_height="200dp"            app:contentScrim="@color/colorPrimary"            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">            <ImageView                android:layout_width="match_parent"                android:layout_height="match_parent"                android:fitsSystemWindows="true"                android:src="@mipmap/ic_launcher"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.6" />            <!--这的layout_collapseMode是关键属性，pin表示一直存在-->            <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.design.widget.CollapsingToolbarLayout>        <!--由于继承自LinearLayout，这里是可折叠窗口的下面，并跟随折叠窗口，这里用了TabLayout，可与viewPager订阅-->        <android.support.design.widget.TabLayout            android:id="@+id/tabLayout"            android:layout_width="match_parent"            android:layout_height="48dp"            android:background="@color/blue"            app:tabIndicatorColor="@android:color/holo_orange_light" />    </android.support.design.widget.AppBarLayout>    <!--这里的layout_behavior属性是@string/appbar_scrolling_view_behavior，这是系统给出的支持滑动效果的behavior-->    <android.support.v4.view.ViewPager        android:id="@+id/view_pager"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layout_behavior="@string/appbar_scrolling_view_behavior" />    <!--浮层-->    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center"        android:background="@android:color/holo_red_dark"        android:gravity="center"        android:padding="20dp"        android:text="hello"        android:textSize="18sp"        app:layout_behavior="com.lwz.designdemo.widget.MyBehavior" />    <!--悬浮按钮-->    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="16dp"        android:src="@mipmap/ic_launcher"        app:layout_anchor="@id/appbar"        app:layout_anchorGravity="bottom|right" /></android.support.design.widget.CoordinatorLayout>

同样需要以CoordinatorLayout作为根节点，AppBarLayout嵌套CollapsingToolbarLayout

CollapsingToolBarLayout 的 layout_scrollFlags 指定为 scroll|exitUntilCollapsed|snap，这样便实现了向上滚动的折叠效果。

CollapsingToolbarLayout 提供以下属性和方法是用：
1. Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。
2. Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景。
3. Status bar scrim：状态栏的背景，调用方法setStatusBarScrim(Drawable)。还没研究明白，不过这个只能在Android5.0以上系统有效果。
4. Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。值de的范围[0.0,1.0]，值越大视察越大。
5. CollapseMode ：子视图的折叠模式，在子视图设置，有两种“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

CoordinatorLayout 还提供了一个 layout_anchor 的属性，连同 layout_anchorGravity 一起，可以用来放置与其他视图关联在一起的悬浮视图（如 FloatingActionButton）。本例中使用FloatingActionButton

通过下面的参数设置了FloatingActionButton的位置，两个属性共同作用使得FAB 浮动按钮也能折叠消失，展现。

app:layout_anchor="@id/appbar"app:layout_anchorGravity="bottom|right|end"1
2
1
2

使用CollapsingToolbarLayout实现折叠效果，需要注意3点
1. AppBarLayout的高度固定
2. CollapsingToolbarLayout的子视图设置layout_collapseMode属性
3. 关联悬浮视图设置app:layout_anchor，app:layout_anchorGravity属性

--摘抄自xyz_lmn的博客，博客地址：http://blog.csdn.net/xyz_lmn/article/details/48055919

参照yhy_的demo：https://github.com/Abounce/Material_demo

博客地址：http://blog.csdn.net/weixin_36222137/article/details/53420807

粘一下代码

package com.lwz.designdemo;import android.os.Bundle;import android.support.design.widget.AppBarLayout;import android.support.design.widget.CollapsingToolbarLayout;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.Snackbar;import android.support.design.widget.TabLayout;import android.support.v4.view.ViewPager;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import com.lwz.designdemo.base.BaseActivity;import com.lwz.designdemo.base.BasePagerAdapter;import com.lwz.designdemo.fragment.GameFragment;import com.lwz.designdemo.fragment.HomeFragment;import java.util.ArrayList;import java.util.List;import butterknife.BindView;public class CoorToolBarActivity extends BaseActivity {    @BindView(R.id.toolbar)    Toolbar toolbar;    @BindView(R.id.appbar)    AppBarLayout appbar;    @BindView(R.id.fab)    FloatingActionButton fab;    @BindView(R.id.tabLayout)    TabLayout tabLayout;    @BindView(R.id.ctl_title)    CollapsingToolbarLayout ctlTitle;    @BindView(R.id.view_pager)    ViewPager viewPager;    @Override    protected boolean translucentStatusBar() {        return false;    }    @Override    protected int getLayoutId() {        return R.layout.activity_coor_tool_bar;    }    @Override    protected void initView(Bundle savedInstanceState) {        initToolBar();        List<String> titles = new ArrayList<>();        titles.add("热点");        titles.add("游戏");        BasePagerAdapter adapter = new BasePagerAdapter(getSupportFragmentManager(), titles);        adapter.addFragment(new HomeFragment());        adapter.addFragment(new GameFragment());        viewPager.setAdapter(adapter);        // 绑定        tabLayout.setupWithViewPager(viewPager);    }    private void initToolBar() {        toolbar.setTitle("我就是title");        toolbar.setLogo(R.mipmap.ic_launcher);        toolbar.inflateMenu(R.menu.menu_toolbar);        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {            @Override            public boolean onMenuItemClick(MenuItem item) {                switch (item.getItemId()) {                    case R.id.setting:                        Snackbar.make(toolbar, "设置", Snackbar.LENGTH_SHORT).show();                        break;                    case R.id.about:                        Snackbar.make(toolbar, "关于", Snackbar.LENGTH_SHORT).show();                        break;                }                return false;            }        });    }}

我的demo效果（不会搞gif，哈哈哈）

盗一张效果图过来，~~!

本文照抄自xyz_lmn（csdn）、南尘2251（简书）、yhy_(csdn)的博客及demo；

阅读全文

0 0