android的CoordinatorLayout的几个使用方法

最新推荐文章于 2021-07-05 11:03:08 发布
最新推荐文章于 2021-07-05 11:03:08 发布
阅读量3.2k 收藏 2
点赞数 3
分类专栏： android 文章标签： android

其实完全不太明白CoordinatorLayout，个人感觉就是可以动态布局。

效果图

img

  1. 第一种，FloatingActionButton随着Snackbar移动
  2. 第二种，AppBarLayout滚动消失与显示
  3. 第三种，CollapsingToolbarLayout的展开与收缩

原文

android的CoordinatorLayout的几个使用方法

代码

先添加依赖

    compile 'com.android.support:appcompat-v7:24.1.0'
    compile 'com.android.support:design:24.1.0'
    compile 'com.android.support:palette-v7:24.1.0'
AppBarLayoutActivity.java
package com.qefee.pj.testcoordinatorlayout;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.OrientationHelper;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class AppBarLayoutActivity extends AppCompatActivity {

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        //设置布局管理器
        recyclerView.setLayoutManager(layoutManager);
        //设置为垂直布局，这也是默认的
        layoutManager.setOrientation(OrientationHelper.VERTICAL);
        //设置Adapter
        recyclerView.setAdapter(new RecyclerView.Adapter() {
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                TextView tv = new TextView(AppBarLayoutActivity.this);
                ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.WRAP_CONTENT
                );
                tv.setLayoutParams(params);

                RecyclerView.ViewHolder vh = new RecyclerView.ViewHolder(tv) {};
                return vh;
            }

            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
                TextView tv = (TextView) holder.itemView;
                tv.setText("test --> " + position);
            }

            @Override
            public int getItemCount() {
                return 50;
            }
        });
        //设置分隔线
        //        recyclerView.addItemDecoration( new DividerGridItemDecoration(this ));
        //设置增加或删除条目的动画
        recyclerView.setItemAnimator(new DefaultItemAnimator());
    }
}
CollapsingToolbarLayoutActivity.java
package com.qefee.pj.testcoordinatorlayout;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
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.graphics.Palette;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.OrientationHelper;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.ViewGroup;
import android.widget.TextView;

public class CollapsingToolbarLayoutActivity extends AppCompatActivity {

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        final CollapsingToolbarLayout
                collapsingToolbar = (CollapsingToolbarLayout) findViewById(
                R.id.collapsing_toolbar);
        collapsingToolbar.setTitle(getString(R.string.app_name));
        collapsingToolbar.setExpandedTitleColor(getResources().getColor(android.R.color.transparent));

        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(final Palette palette) {
                int defaultColor = getResources().getColor(R.color.colorPrimary);
                int defaultTitleColor = getResources().getColor(android.R.color.white);
                int bgColor = palette.getDarkVibrantColor(defaultColor);
                int titleColor = palette.getLightVibrantColor(defaultTitleColor);
                collapsingToolbar.setContentScrimColor(bgColor);
                collapsingToolbar.setCollapsedTitleTextColor(titleColor);
                collapsingToolbar.setExpandedTitleColor(titleColor);
            }
        });

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        //设置布局管理器
        recyclerView.setLayoutManager(layoutManager);
        //设置为垂直布局，这也是默认的
        layoutManager.setOrientation(OrientationHelper.VERTICAL);
        //设置Adapter
        recyclerView.setAdapter(new RecyclerView.Adapter() {
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                TextView tv = new TextView(CollapsingToolbarLayoutActivity.this);
                ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.WRAP_CONTENT
                );
                tv.setLayoutParams(params);

                RecyclerView.ViewHolder vh = new RecyclerView.ViewHolder(tv) {};
                return vh;
            }

            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
                TextView tv = (TextView) holder.itemView;
                tv.setText("test --> " + position);
            }

            @Override
            public int getItemCount() {
                return 50;
            }
        });
        //设置分隔线
        //        recyclerView.addItemDecoration( new DividerGridItemDecoration(this ));
        //设置增加或删除条目的动画
        recyclerView.setItemAnimator(new DefaultItemAnimator());
    }
}
FloatingActionButtonActivity.java
package com.qefee.pj.testcoordinatorlayout;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class FloatingActionButtonActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_floating_action_button);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                final Snackbar snackbar = Snackbar.make(view, "支持右滑消失", Snackbar.LENGTH_LONG);
                snackbar.setAction("点我试试", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        snackbar.dismiss();
                    }
                }).show();
            }
        });
    }
}
MainActivity.java
package com.qefee.pj.testcoordinatorlayout;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

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

        Button fabButton = (Button) findViewById(R.id.fabButton);
        Button ablButton = (Button) findViewById(R.id.ablButton);
        Button ctblButton = (Button) findViewById(R.id.ctblButton);

        fabButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this, FloatingActionButtonActivity.class);
                startActivity(intent);
            }
        });

        ablButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this, AppBarLayoutActivity.class);
                startActivity(intent);
            }
        });

        ctblButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(MainActivity.this, CollapsingToolbarLayoutActivity.class);
                startActivity(intent);
            }
        });
    }
}

activity_app_bar_layout.xml

<?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:fitsSystemWindows="true"
    tools:context="com.qefee.pj.testcoordinatorlayout.AppBarLayoutActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

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

activity_collapsing_toolbar_layout.xml

<?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:fitsSystemWindows="true"
    tools:context="com.qefee.pj.testcoordinatorlayout.CollapsingToolbarLayoutActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_collapseParallaxMultiplier="0.6"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/backdropImageView"
                android:layout_width="match_parent"
                android:layout_height="256dp"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax" />

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

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

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

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

activity_floating_action_button.xml

<?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:fitsSystemWindows="true"
    tools:context="com.qefee.pj.testcoordinatorlayout.FloatingActionButtonActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello world!"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

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

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context="com.qefee.pj.testcoordinatorlayout.MainActivity">

    <Button
        android:id="@+id/fabButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="FloatingActionButton"/>

    <Button
        android:id="@+id/ablButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="AppBarLayoutButton"/>

    <Button
        android:id="@+id/ctblButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="CollapsingToolbarLayoutButton"/>

</LinearLayout>

参考文章

aotian16
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android CoordinatorLayout高级用法之自定义Behavior
01-04
上次简单的说了一下CoordinatorLayout的基本用法(android特性之CoordinatorLayout用法探析实例)。其中CoordinatorLayout给我们提供了一种新的事件的处理方式，Behavior。还记得那一串字符串吗？ app:layout_...
android CoordinatorLayout使用
热门推荐
09-02 21万+
一、CoordinatorLayout有什么作用 CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能： 1、作为顶层布局 2、调度协调子布局 动画作为Material Design的重要元素，CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形似产生动画效果。CoordinatorLayout通
【Android -- Material Design】CoordinatorLayout 的基本使用
Kevin Learn Android
08-02 282
CoordinatorLayout 继承于ViewGroup,它就是一个超级强大 Framelayout。CoordinatorLayout 的作用就是协调子 View。
Android CoordinatorLayout使用
周平的博客
05-12 4563
一、简介 CoordinatorLayout翻译为协调者布局，是在 Google IO/15 大会发布的，遵循Material Design风格，包含在 com.android.support:design中，结合AppBarLayout, CollapsingToolbarLayout等可产生各种炫酷的效果。 二、使用 CoordinatorLayout结合AppBarLayout使用 ...
Android CoordinatorLayout 的使用
06-18 1284
1.CoordinatorLayout 是Design报下的面的一个布局文件，通过该布局文件可以组合成很多炫酷的效果 layout_anchor：设置当前view 的锚点，我们熟悉的 PopupWindow 也有类似概念。 layout_anchorGravity：设置相对锚点的位置，如bottom|right表示 FAB 位于锚点的右下角 ...
android 协调布局,CoordinatorLayout的使用如此简单（Android）
weixin_42298878的博客
05-26 507
曾在网上找了一些关于CoordinatorLayout的教程，大部分文章都是把CoordinatorLayout、AppbarLayout、CollapsingToolbarLayout 以及Toolbar等一起使用来介绍，这让我不知不觉在心中认为把这几个布局要一起使用，而且只是用于那种场景中。其实CoordinatorLayout的功能并不是局限于与AppBarLayout一起使用，它的功能强大...
Android CoordinatorLayout详解及实例代码
08-31
主要介绍了Android CoordinatorLayout详解及实例代码的相关资料,CoordinatorLayout基本实现两个功能： 作为顶层布局 和调度协调子布局，这里详细介绍此部分知识，需要的朋友可以参考下
Android CoordinatorLayout打造酷炫的顶部栏
07-08
详情请查看博客： https://blog.csdn.net/qq_20785431/article/details/95076071
Android使用CoordinatorLayout实现底部弹出菜单
08-26
主要为大家详细介绍了Android使用CoordinatorLayout实现底部弹出菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android 5.0中CoordinatorLayout的使用技巧
09-01
主要为大家详细介绍了Android 5.0中CoordinatorLayout的使用技巧,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android使用协调布局CoordinatorLayout的代码例子
02-27
Android使用协调布局CoordinatorLayout的代码例子。用于演示CoordinatorLayout的基本用法，以及悬浮按钮FloatingActionButton、底部弹窗BottomSheetBehavior的使用方法。
详解android特性之CoordinatorLayout用法探析实例
08-28
本篇文章主要介绍了android特性之CoordinatorLayout用法探析实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解Android使用CoordinatorLayout+AppBarLayout实现拉伸顶部图片功能
01-04
一、国际惯例，先看下效果图 二、不跟你多bb直接上布局文件代码 <?xml version=1.0 encoding=utf-8?> <LinearLayout 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_
使用CoordinatorLayout协调者布局实现仿京东发现页面效果
03-28
使用CoordinatorLayout协调者布局实现仿京东发现页面效果，有兴趣的可以深入研究下，相关博客https://blog.csdn.net/hq942845204/article/details/88844272
CoordinatorLayout的使用如此简单（Android）
09-01
主要为大家详细介绍了Android CoordinatorLayout的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
android 百分比布局操作sp,constraintlayout中的百分比布局
weixin_39959236的博客
05-27 874
constraintlayout布局中为我们提供了，两种百分布局可以帮助我们去适配界面第一种layout_constraintVertical_bias 该属性代表的意思是垂直距离的百分比，默认0.5就是剧中第二种layout_constraintHorizontal_bias 水平距离的百分比，也是一样默认0.5就是剧中如果要使用以上属性，必须要设置该view的上下左右的约束xmlns:...
Android ConstraintLayout百分比布局-适配终结者（基本适配所有机型）
华至的博客
08-21 1万+
对于Android开发者来讲，适配始终是个大问题，在小米手机上面是一个样，在oppo上面是一个样，真是让人恼火。 现在讲一下笔者最近遇到的问题，公司项目需求，一颗树，树有很有枝桠，枝桠上面要挂红包，这需求是真坑爹，精度要求特别高，这肯定不能使用DP适配了，最开始想自己根据屏幕分辨率来做适配，设计图是750*1334的，我自己等比缩放在1080上面和720上面，这工作量有点大啊，一个人无法完成的赶...
Android弹窗探究之Dialog（二）—— BottomSheetDialog的基本使用
zhoufan11132的博客
07-05 1380
在上篇介绍完Dialog的基本使用之后，接下来我们就具化一下，看下最近比较流行的MD样式的底部弹出框BottomSheetDialog，先看下效果。 BottomSheet BottomSheet的效果是指从屏幕底部向上滑的效果，是MaterialDesign风格的一种,使用起来也很简单。 布局文件 <androidx.coordinatorlayout.widget.CoordinatorLayout android:layout_width="match_parent" andr
Android CoordinatorLayout布局的使用方式和属性
DDLoveWorld的博客
04-11 6526
在Android5.0之后 谷歌又添加了新的布局CoordinatorLayout CoordinatorLayout 1、app:layout_scrollFlags （子布局设置是否可滑动） 2、android:layout_gravity 属性控制组件在布局中的位置 3、app:layout_behavior="@string/appbar_scrolling_v
android coordinatorlayout
最新发布
06-06
Android CoordinatorLayout是一个布局管理器，用于协调其子视图之间的交互。它可以处理滚动、拖拽和其他用户交互事件，并根据需要调整子视图的位置和大小。CoordinatorLayout还可以与Behavior配合使用，以便在子视图...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值