Android高级UI开发（二十）AppBar与CoordinatorLayout 组合出各式各样的效果

举报
yd_57386892 发表于 2020/12/29 01:32:13 2020/12/29
2.9k+ 0 0
【摘要】     如果无法成为大鲨鱼，就当一枚小虾吧，时而激起小浪花。无法成为太阳，就做星辰吧。     有些人永远不会有自信，因为他曾经有过这样的感觉：”我还不如一个幼儿园学生“。也有些人永远都会盲目自信，因为他一直都是佼佼者，没有碰过壁，还不曾有敬畏之心，时常会有这样的幻觉：”我与天同高（齐天大圣）“。我们只有结合自身的综合情况客观的评价自己，注意是”综合情况“，不只是局限于你的...

    如果无法成为大鲨鱼，就当一枚小虾吧，时而激起小浪花。无法成为太阳，就做星辰吧。

    有些人永远不会有自信，因为他曾经有过这样的感觉：”我还不如一个幼儿园学生“。也有些人永远都会盲目自信，因为他一直都是佼佼者，没有碰过壁，还不曾有敬畏之心，时常会有这样的幻觉：”我与天同高（齐天大圣）“。我们只有结合自身的综合情况客观的评价自己，注意是”综合情况“，不只是局限于你的工作能力、吹牛能力，还有你的身心健康（没有了健康自信全是0）  找到自己，做自己，你在这个世界上是独一无二的。

            如果无法成为灌木，就当摇曳的小草吧，让道路因你的存在而更加美妙。

            无法成为大道，就做小径；

            无法成为太阳，就做星辰。

            不可能人人都是船长，水手也有水手的精彩。

           如果无法成为大鲨鱼，就当一枚小虾吧。

           快过年了，祝大家身体健康，万事如意。

  

      我们Android中常见的是ActionBar与Toolbar，今天我们来一起研究一下AppBar。以Coorderration为根布局，当AppBar包裹Toolbar，同时设置一些属性就可以实现 我们平时需要大量代码来实现的效果。今天我们来3个效果：

1. 监听Recyclerview的滑动来让Toolbar显示和隐藏。

关于这个效果我们上一节已经用Coorderration和Behavior已经实现了，还写了些Toolbar显示和隐藏相关的代码。这次我们不用编写代码，利用AppBar包裹Toolbar，然后设置一些AppBar的属性就可以实现这个效果。

2. 监听android.support.v4.widget.NestedScrollView的滑动来让Toolbar显示和隐藏。

这里与1的区别是监控NestedScrollView（Scrollview的升级版）的滑动。相同之处还是设置Appbar的一些属性，1分钟搞定这个效果。

3. 监听viewpager的滑动滑动来让Toolbar显示和隐藏。

 相同之处还是设置Appbar的一些属性，1分钟搞定这个效果。

我们接下来按上面的顺序来分析和实现每一个效果。

1、监听Recyclerview的滑动来让Toolbar显示和隐藏

1.1 原理：

（1） CoordinatorLayout为根布局来监控它的内部所有控件的滑动事件，这里监控的是Recyclerview列表的滑动事件然后纷发给名称为“appbar_scrolling_view_behavio。

（2）这个名称为“appbar_scrolling_view_behavio的Behavior是配置给Recyclerview的。（LisTview不行）

（3） AppBar设置的属性app:layout_scrollFlags="scroll|enterAlways"

（4）.appbar_scrolling_view_behavio会自动检查AppBar内部Toolbar设置的属性app:layout_scrollFlags，根据这个属性控制Toolbar的隐藏与显示。此app:layout_scrollFlags="scroll|enterAlways"表示当上滑列表时Toolbar会随着滚动出屏幕顶端，当下滑时又会重新进入屏幕并固定在顶端。

1.2 代码实现

我们从1.1原理中 可以看出我们只需要在布局文件里为RecyclerView与Appbar内部的Toolbar配置一些属性即可。不需要为这个滑动效果编写额外的代码。

（1）布局文件main.xml：


      <android.support.design.widget.CoordinatorLayout 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"
      xmlns:app="http://schemas.android.com/apk/res-auto">
      <android.support.v7.widget.RecyclerView
      app:layout_behavior="@string/appbar_scrolling_view_behavior"
      android:id="@+id/recyclerview"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:clipToPadding="false"
      android:clipChildren="false"
      android:paddingTop="?attr/actionBarSize"
       />
      <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
      <android.support.v7.widget.Toolbar
      app:layout_scrollFlags="scroll|enterAlways"
      android:elevation="4dp"
      app:titleTextColor="@color/color_white"
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"/>
      </android.support.design.widget.AppBarLayout>
      </android.support.design.widget.CoordinatorLayout>

       如上面布局文件CoordinatorLayout作为根目录可以捕捉Recyclerview的滑动事件，然后交给这个类名为@string/appbar_scrolling_view_behavior的Behavior，然后Behavior根据toolbar的 app:layout_scrollFlags="scroll|enterAlways"属性来处理toolbar，实现上滑列表Toolbar跟着滑出屏幕顶端，下滑列表时Toolbar又回显出来。注意这里的列表指的是Recyclerview，不是Listview。Listview的滑动事件不会分发给这个appbar_scrolling_view_behavior，从而控制不了Appbar内部的Toolbar效果。

（2）MainActivity.java

这里主要是实现一个简单的RecyclerView列表，能滑动就行。


      package com.example.administrator.appbarrecyclerview;
      import android.support.v7.app.AppCompatActivity;
      import android.os.Bundle;
      import android.support.v7.widget.LinearLayoutManager;
      import android.support.v7.widget.RecyclerView;
      import android.support.v7.widget.Toolbar;
      import android.widget.ImageButton;
      import com.example.administrator.appbarrecyclerview.adapter.RecyclerAdapter;
      import java.util.ArrayList;
      import java.util.List;
      public class MainActivity extends AppCompatActivity {
      RecyclerView recyclerview;
      Toolbar toolbar;
      ImageButton fab;
      @Override
      protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
       toolbar = (Toolbar) findViewById(R.id.toolbar);
       setSupportActionBar(toolbar);
       setTitle("滑动隐藏");
       recyclerview.setLayoutManager(new LinearLayoutManager(this));
      List<String> list = new ArrayList<>();
      for (int i = 0; i < 50; i++) {
       list.add("条目" + i);
       }
      RecyclerView.Adapter adapter = new RecyclerAdapter(list);
       recyclerview.setAdapter(adapter);
       }
      }

MainActivity.java代码里主要实现了一个可以滑动的Recyclerview。Demo源码下载在文章最后。

2. 监听android.support.v4.widget.NestedScrollView的滑动来让Toolbar显示和隐藏。

这次与1中的实现原理差不多，只是把可滑动的控件换成了NestedScrollView而已.    NestedScrollView

是一个Scrollview的升级版，同样只有 它的事件才能被纷发给bappbar_scrolling_view_behavior，从而控制不了Appbar内部的Toolbar效果,而Scrollview是不行的。

2.1 布局文件


      <?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"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
       >
      <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
      <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?attr/colorPrimary"
      android:elevation="4dp"
      app:layout_scrollFlags="scroll|enterAlways"
      app:titleTextColor="@color/white" />
      </android.support.design.widget.AppBarLayout>
      <android.support.v4.widget.NestedScrollView
      android:layout_width="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"
      android:layout_height="wrap_content">
      <LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:text="滑动NestedScrollview隐藏或显示Toolbar!"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
      <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
      <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
      <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
      <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
      <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
      <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
      <TextView
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
      </LinearLayout>
      </android.support.v4.widget.NestedScrollView>
      </android.support.design.widget.CoordinatorLayout>

如上面布局文件CoordinatorLayout作为根目录可以捕捉NestedScrollView的滑动事件，然后交给这个类名为@string/appbar_scrolling_view_behavior的Behavior，然后Behavior根据toolbar的 app:layout_scrollFlags="scroll|enterAlways"属性来处理toolbar，实现上滑列表Toolbar跟着滑出屏幕顶端，下滑列表时Toolbar又回显出来。其实和1中Recyclerview滑动是一样的，只是这里滑动控件被替换为NestedScrollView而已。

2.2 MainActivity.java代码


      package com.example.administrator.nestedscrollviewtoolbar;
      import android.support.v7.app.AppCompatActivity;
      import android.os.Bundle;
      import android.support.v7.widget.Toolbar;
      public class MainActivity extends AppCompatActivity {
      Toolbar toolbar;
      @Override
      protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       toolbar = (Toolbar) findViewById(R.id.toolbar);
       setSupportActionBar(toolbar);
       setTitle("滑动隐藏");
       }
      }

这里没有什么，只是显示了一个toolbar. 也就是说滑动隐藏或显示toolbar的效果其实都是在布局文件里通过配置属性而实现的。

该Demo源码下载地址同样在文章最后。

3. 监听viewpager的滑动滑动来让Toolbar显示和隐藏。

这个原理还是一样的，只是viewpager里的每一个页面布局定义成一个可滑动的NestedScrollView。同样配置Appbar内部Toolbar的一些属性可以实现垂直滑动Viewpager内容时显示或隐藏Toolbar，而且还可以隐藏TabLayout等。我们先对比一下原来的效果与现在要实现的效果：

                       

这里只在 《高级进阶十六》的源码基础上修改了布局，我们在此主要看一下布局

3.1  main.xml布局


      <android.support.design.widget.CoordinatorLayout 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="match_parent"
      android:orientation="vertical">
      <android.support.design.widget.AppBarLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
      <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      app:titleTextColor="@color/white"
      app:layout_scrollFlags="scroll|enterAlways"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
      </android.support.v7.widget.Toolbar>
      <android.support.design.widget.TabLayout
      android:background="@color/white"
      app:tabMode="scrollable"
      android:id="@+id/tablayout"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      app:tabIndicatorColor="@color/colorPrimary"
      app:tabTextColor="@color/colorPrimary"
      app:tabSelectedTextColor="@color/colorPrimaryDark"
      app:tabGravity="fill"
       />
      </android.support.design.widget.AppBarLayout>
      <android.support.v4.view.ViewPager
      android:id="@+id/vp"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
       />
      </android.support.design.widget.CoordinatorLayout>

这里正如我们所说，仍旧是在AppBarLayout里的Toolbar设置属性scrollFlags = "scroll|enterAlways".然后我们要让ViewPager里的页面内容可以垂直滑动起来。

3.2 ViewPager每一页fragment的布局


      <?xml version="1.0" encoding="utf-8"?>
      <android.support.constraint.ConstraintLayout 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.support.v4.widget.NestedScrollView
      android:layout_width="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"
      android:layout_height="match_parent">
      <LinearLayout
      android:orientation="vertical"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
      <TextView
      android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
      android:layout_width="match_parent"
      android:layout_height="200dp" />
      <TextView
      android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
      android:layout_width="match_parent"
      android:layout_height="200dp" />
      <TextView
      android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
      android:layout_width="match_parent"
      android:layout_height="200dp" />
      <TextView
      android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
      android:layout_width="match_parent"
      android:layout_height="200dp" />
      <TextView
      android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
      android:layout_width="match_parent"
      android:layout_height="200dp" />
      <TextView
      android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
      android:layout_width="match_parent"
      android:layout_height="200dp" />
      <TextView
      android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
      android:layout_width="match_parent"
      android:layout_height="200dp" />
      <TextView
      android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
      android:layout_width="match_parent"
      android:layout_height="200dp" />
      </LinearLayout>
      </android.support.v4.widget.NestedScrollView>
      </android.support.constraint.ConstraintLayout>

这里我们声明了一个滚动布局NestedScrollView，在里面添加足够多的Textview使页面可以垂直滑动起来，同第2节中的NestedScrollView一样，设置layout_behavior属性为@string/appbar_scrolling_view_behavior.

至此我们讲了3种情况下垂直滑动页面内容让Toolbar显示和隐藏的实现。

源码下载：

1.滑动RecyclerView列表让Toolbar显示和隐藏的源码：

https://download.csdn.net/download/gaoxiaoweiandy/10946317

2. 滑动NestedScrollView让Toolbar显示和隐藏的源码：

https://download.csdn.net/download/gaoxiaoweiandy/10946304

3. 滑动ViewPager页面内容让Toolbar显示和隐藏的源码：

https://download.csdn.net/download/gaoxiaoweiandy/10945313

附录

使用心得

app:layout_scrollFlags="scroll|enterAlways"属性，不只适用于上面的Toolbar，可以将Toolbar换成任意布局，如LinearLayout，也可以达到上述隐藏/显示的效果。

文章来源: blog.csdn.net，作者：冉航--小虾米，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/gaoxiaoweiandy/article/details/86598057

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Android
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论（0）

抱歉，系统识别当前为高风险访问，暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称，即可参与社区互动！

    *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

    确认 取消

    目录

    加入云驻计划，成为创作者

    • 华为云周边好礼
    • 免费体验产品
    • 特殊身份标识
    • 线下官方门票
    • 内部专家零距离
    • 与10000+优质创作者共同成长
    立即加入