CoordinatorLayout的使用（一）——简单使用

2023-05-16

简介

CoordinatorLayout是Android support design推出的新布局，主要用于作为视图根布局以及协调子控件的行为（根据用户的触摸行为产生一定的动画效果）。主要是通过设置子View的 Behaviors来实现不同效果。

环境配置

直接在Module的build.gradle文件引入

悬浮按钮FloatingActionButton的使用

这个使用比较简单，直接在XML中通过CoordinatorLayout作为父布局，嵌套FloatingActionButton即可

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.victor.coordinatorlayoutdemo.MainActivity">
	<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="20dp"
        app:backgroundTint="@color/colorPrimary"
        android:src="@android:drawable/ic_dialog_email"/>

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

几个比较关键的属性（注意区分android和app自定义属性，使用混了会报错，后面几个列子也一样）：

layout_gravity：控制自己位于父控件的位置

app:backgroundTint：控制背景颜色

android:src：和Image的src一样

layout_anchor：设置锚点（参考的控件）

layout_anchorGravity：相对于锚点的位置bottom/end……等属性

显示效果（右下角就能显示了）：

AppBarLayout的使用

AppBarLayout本身一般没有太多直接的UI展示的效果，一般是通过和CollapsingToolbarLayout和TabLayout进行嵌套使用。

嵌套TabLayout使用

通过TabLayout的嵌套使用，就可以通过滚动来控制ToolBar的显示和隐藏了。

布局文件：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                 android:layout_width="match_parent"
                                                 android:layout_height="match_parent"
                                                 xmlns:app="http://schemas.android.com/apk/res-auto"
                                                 android:orientation="vertical">
    <android.support.design.widget.AppBarLayout
        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/tb_main"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue"
            app:tabIndicatorColor="@color/white"
            app:tabSelectedTextColor="@android:color/holo_red_light"
            app:tabTextColor="@color/white"/>

    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

java代码实现

package com.victor.coordinatorlayoutdemo;

import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import com.victor.coordinatorlayoutdemo.fragment.FoundFragment;
import com.victor.coordinatorlayoutdemo.fragment.FriendFragment;
import com.victor.coordinatorlayoutdemo.fragment.MsgFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {


    private List<Fragment> mFragments;
    private String[] mTabTitles = {"消息", "好友", "动态"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initToolBar();
        initFragment();

        ViewPager viewPager = (ViewPager) findViewById(R.id.vp_main);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_main);

        // 初始化Adapter
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), this);
        // 设置adapter将ViewPager和Fragment关联起来
        viewPager.setAdapter(adapter);
        // 将TabLayout和ViewPager关联，达到TabLayout和Viewpager、Fragment联动的效果
        tabLayout.setupWithViewPager(viewPager);

    }

    /**
     * 初始化toolBar
     */
    private void initToolBar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.tb_main);
        // 指定ToolBar的标题
        toolbar.setTitle("CoordinatorLayout");
        // 将toolBar和actionBar进行关联
        setSupportActionBar(toolbar);
    }

    /**
     * 初始化Fragment
     */
    private void initFragment() {
        MsgFragment msgFragment = new MsgFragment();
        FriendFragment friendFragment = new FriendFragment();
        FoundFragment foundFragment = new FoundFragment();
        // 将三个fragment放入List里面管理，方便使用
        mFragments = new ArrayList<>();
        mFragments.add(msgFragment);
        mFragments.add(friendFragment);
        mFragments.add(foundFragment);
    }


    class MyFragmentPagerAdapter extends FragmentPagerAdapter {
        private Context context;

        public MyFragmentPagerAdapter(FragmentManager fm, Context context) {
            super(fm);
            this.context = context;
        }

        @Override
        public Fragment getItem(int position) {
            // 获取指定位置的Fragment对象
            return mFragments.get(position);
        }

        @Override
        public int getCount() {
            // ViewPager管理页面的数量
            return mFragments.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // 设置indicator的标题（TabLayout中tab的标题）
            return mTabTitles[position];
        }
    }

}

由于这里重点不在TabLayout的使用上，对于tabLayout结合VeiwPager的使用请看代码里面的注释。这里通过滑动控制的ToolBar的关键就是app:layout_scrollFlags属性，该属性有一下几个值可以设置：

scroll: 设置这个flag后就会随着滑动而滚出屏幕，没有设置这个flag的view将被固定在屏幕顶部。上述列子中的TabLayout 没有设置这个值，最终停留在屏幕顶部。
enterAlways: 设置这个flag时，向下的滚动都会导致该view变为可见，启用快速“返回模式”。
enterAlwaysCollapsed: 当你的视图已经设置最小高度属性（minHeight）再设置该属性，那么你的视图只能以最小高度进入，仅当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed: 从大慢慢滚动变小，最后折叠在顶端。

这里需要注意的是：滚动控件必须实现NestedScrollingChild接口（如RecyclerView，NestedScrollView），而没有实现该接口的滚动控件如ScrollView、WebView、ListView是全部都没有作用的。后面CollapsingToolbarLayout也同样遵循该规则。

效果如下：

嵌套CollapsingToolbarLayout使用

和CollapsingToolbarLayout嵌套使用，可以达到展示和折叠toolBar的效果，一般在详情页，博客，动态等页面使用比较多。这里的列子使用RecyclerView作为数据展示控件。

布局文件如下：

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.victor.coordinatorlayoutdemo.MainActivity">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/ctl_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:expandedTitleGravity="end|bottom"
            app:expandedTitleMarginEnd="15dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="#FF078CDF">
            
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@mipmap/ctl_bg"/>

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="parallax"></android.support.v7.widget.Toolbar>

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

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


    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="20dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="20dp"
        app:backgroundTint="@color/colorPrimary"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchorGravity=""
        />

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

Java代码

package com.victor.coordinatorlayoutdemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class CollapsingActivity extends AppCompatActivity {

    // 模仿RecyclerView的数据
    String[] mDatas = {"Each of us holds a unique place in the world. You are special,no matter what others say or what you may think. So forget about being replaced. You can’t be.",
            "How beautiful it was, falling so silently, all day long, all night long, on the mountains, on the meadows, on the roofs of the living, on the graves1) of the dead!",
            "All white save the river, that marked2) its course by a winding black line across the landscape3), and the leafless trees, that against the leaden4) sky now revealed more fully the wonderful beauty and intricacy5) of their branches!",
            "What silence, too, came with the snow, and what seclusion6)! Every sound was muffled7); every noise changed to something soft and musical.",
            "In the entire world there's nobody like me. Since the beginning of time, there has never been another person like me. Nobody has my smile. Nobody has my eyes, my nose, my hair, my hands, or my voice.",
            "If you give up when it's winter, you will miss the promise of your spring, the beauty of your summer, fulfillment of your fall. Don't let the pain of one season destroy the joy of all the rest.",
            "A burning desire is the starting point of all accomplishment. Just like a small fire cannot give much heat, a weak desire cannot produce great results.",
            "I have drunk the cup of life down to its very dregs7). They have only sipped the bubbles on top of it. I know things they will never know. I see things to which they are blind.",
            "It is only the women whose eyes have been washed clear with tears who get the broad vision that makes them little sisters to all the world."};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_collapsing);
        initToolBar();
        CollapsingToolbarLayout ctlLayout = (CollapsingToolbarLayout) findViewById(R.id.ctl_layout);
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rv);
        ctlLayout.setTitle("Victor");
        ctlLayout.setExpandedTitleColor(Color.WHITE);
        ctlLayout.setCollapsedTitleTextColor(Color.YELLOW);
        recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
        recyclerView.setAdapter(new MyAdapter());
    }

    private void initToolBar() {
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeButtonEnabled(true);
        }
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {

        @Override
        public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View view = View.inflate(getApplicationContext(), R.layout.list_item, null);
            MyViewHolder viewHolder = new MyViewHolder(view);
            return viewHolder;
        }

        @Override
        public void onBindViewHolder(MyViewHolder holder, int position) {
            holder.mTextView.setText(mDatas[position]);
        }

        @Override
        public int getItemCount() {
            return mDatas.length;
        }
    }

    class MyViewHolder extends RecyclerView.ViewHolder {

        public TextView mTextView;

        public MyViewHolder(View itemView) {
            super(itemView);
            mTextView = (TextView) itemView.findViewById(R.id.tv_item);
        }
    }
}

几个比较关键的属性：

app:expandedTitleMarginStart：设置展开后标题的边距，除了expandedTitleMarginStart，还有expandedTitleMarginEnd等等，除了设置边距还能设置颜色等等

app:contentScrim：滚动的颜色

app:title：toolBar标题

app:statusBarScrim：状态栏的背景

app:layout_collapseMode：设置滚动模式（一般是在它的子View里面设置）

上面很多属性也可以通过java代码的形式进行设置。类似TextView的setText（）等方法。

其中有些属性根据自己喜好设置，但是 AppBarLayout的高度最好固定，CollapsingToolbarLayout的子视图设置layout_collapseMode属性一定要设置。

展示效果：

本文源码地址 https://github.com/victorcatfish/CoordinatorLayoutDemo.git

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)