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

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

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

    有些人永远不会有自信,因为他曾经有过这样的感觉:”我还不如一个幼儿园学生“。也有些人永远都会盲目自信,因为他一直都是佼佼者,没有碰过壁,还不曾有敬畏之心,时常会有这样的幻觉:”我与天同高(齐天大圣)“。我们只有结合自身的综合情况客观的评价自己,注意是”综合情况“,不只是局限于你的工作能力、吹牛能力,还有你的身心健康(没有了健康自信全是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:


  
  1. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. xmlns:app="http://schemas.android.com/apk/res-auto">
  6. <android.support.v7.widget.RecyclerView
  7. app:layout_behavior="@string/appbar_scrolling_view_behavior"
  8. android:id="@+id/recyclerview"
  9. android:layout_width="match_parent"
  10. android:layout_height="match_parent"
  11. android:clipToPadding="false"
  12. android:clipChildren="false"
  13. android:paddingTop="?attr/actionBarSize"
  14. />
  15. <android.support.design.widget.AppBarLayout
  16. android:layout_width="match_parent"
  17. android:layout_height="wrap_content">
  18. <android.support.v7.widget.Toolbar
  19. app:layout_scrollFlags="scroll|enterAlways"
  20. android:elevation="4dp"
  21. app:titleTextColor="@color/color_white"
  22. android:id="@+id/toolbar"
  23. android:layout_width="match_parent"
  24. android:layout_height="?attr/actionBarSize"
  25. android:background="?attr/colorPrimary"/>
  26. </android.support.design.widget.AppBarLayout>
  27. </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列表,能滑动就行。


  
  1. package com.example.administrator.appbarrecyclerview;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.support.v7.widget.LinearLayoutManager;
  5. import android.support.v7.widget.RecyclerView;
  6. import android.support.v7.widget.Toolbar;
  7. import android.widget.ImageButton;
  8. import com.example.administrator.appbarrecyclerview.adapter.RecyclerAdapter;
  9. import java.util.ArrayList;
  10. import java.util.List;
  11. public class MainActivity extends AppCompatActivity {
  12. RecyclerView recyclerview;
  13. Toolbar toolbar;
  14. ImageButton fab;
  15. @Override
  16. protected void onCreate(Bundle savedInstanceState) {
  17. super.onCreate(savedInstanceState);
  18. setContentView(R.layout.activity_main);
  19. recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
  20. toolbar = (Toolbar) findViewById(R.id.toolbar);
  21. setSupportActionBar(toolbar);
  22. setTitle("滑动隐藏");
  23. recyclerview.setLayoutManager(new LinearLayoutManager(this));
  24. List<String> list = new ArrayList<>();
  25. for (int i = 0; i < 50; i++) {
  26. list.add("条目" + i);
  27. }
  28. RecyclerView.Adapter adapter = new RecyclerAdapter(list);
  29. recyclerview.setAdapter(adapter);
  30. }
  31. }

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

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

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

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

2.1 布局文件


  
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. >
  7. <android.support.design.widget.AppBarLayout
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content">
  10. <android.support.v7.widget.Toolbar
  11. android:id="@+id/toolbar"
  12. android:layout_width="match_parent"
  13. android:layout_height="?attr/actionBarSize"
  14. android:background="?attr/colorPrimary"
  15. android:elevation="4dp"
  16. app:layout_scrollFlags="scroll|enterAlways"
  17. app:titleTextColor="@color/white" />
  18. </android.support.design.widget.AppBarLayout>
  19. <android.support.v4.widget.NestedScrollView
  20. android:layout_width="match_parent"
  21. app:layout_behavior="@string/appbar_scrolling_view_behavior"
  22. android:layout_height="wrap_content">
  23. <LinearLayout
  24. android:orientation="vertical"
  25. android:layout_width="match_parent"
  26. android:layout_height="match_parent">
  27. <TextView
  28. android:layout_width="match_parent"
  29. android:layout_height="200dp"
  30. android:text="滑动NestedScrollview隐藏或显示Toolbar!"
  31. app:layout_constraintBottom_toBottomOf="parent"
  32. app:layout_constraintLeft_toLeftOf="parent"
  33. app:layout_constraintRight_toRightOf="parent"
  34. app:layout_constraintTop_toTopOf="parent" />
  35. <TextView
  36. android:layout_width="match_parent"
  37. android:layout_height="200dp"
  38. android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
  39. app:layout_constraintBottom_toBottomOf="parent"
  40. app:layout_constraintLeft_toLeftOf="parent"
  41. app:layout_constraintRight_toRightOf="parent"
  42. app:layout_constraintTop_toTopOf="parent" />
  43. <TextView
  44. android:layout_width="match_parent"
  45. android:layout_height="200dp"
  46. android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
  47. app:layout_constraintBottom_toBottomOf="parent"
  48. app:layout_constraintLeft_toLeftOf="parent"
  49. app:layout_constraintRight_toRightOf="parent"
  50. app:layout_constraintTop_toTopOf="parent" />
  51. <TextView
  52. android:layout_width="match_parent"
  53. android:layout_height="200dp"
  54. android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
  55. app:layout_constraintBottom_toBottomOf="parent"
  56. app:layout_constraintLeft_toLeftOf="parent"
  57. app:layout_constraintRight_toRightOf="parent"
  58. app:layout_constraintTop_toTopOf="parent" />
  59. <TextView
  60. android:layout_width="match_parent"
  61. android:layout_height="200dp"
  62. android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
  63. app:layout_constraintBottom_toBottomOf="parent"
  64. app:layout_constraintLeft_toLeftOf="parent"
  65. app:layout_constraintRight_toRightOf="parent"
  66. app:layout_constraintTop_toTopOf="parent" />
  67. <TextView
  68. android:layout_width="match_parent"
  69. android:layout_height="200dp"
  70. android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
  71. app:layout_constraintBottom_toBottomOf="parent"
  72. app:layout_constraintLeft_toLeftOf="parent"
  73. app:layout_constraintRight_toRightOf="parent"
  74. app:layout_constraintTop_toTopOf="parent" />
  75. <TextView
  76. android:layout_width="match_parent"
  77. android:layout_height="200dp"
  78. android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
  79. app:layout_constraintBottom_toBottomOf="parent"
  80. app:layout_constraintLeft_toLeftOf="parent"
  81. app:layout_constraintRight_toRightOf="parent"
  82. app:layout_constraintTop_toTopOf="parent" />
  83. <TextView
  84. android:layout_width="match_parent"
  85. android:layout_height="200dp"
  86. android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
  87. app:layout_constraintBottom_toBottomOf="parent"
  88. app:layout_constraintLeft_toLeftOf="parent"
  89. app:layout_constraintRight_toRightOf="parent"
  90. app:layout_constraintTop_toTopOf="parent" />
  91. </LinearLayout>
  92. </android.support.v4.widget.NestedScrollView>
  93. </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代码


  
  1. package com.example.administrator.nestedscrollviewtoolbar;
  2. import android.support.v7.app.AppCompatActivity;
  3. import android.os.Bundle;
  4. import android.support.v7.widget.Toolbar;
  5. public class MainActivity extends AppCompatActivity {
  6. Toolbar toolbar;
  7. @Override
  8. protected void onCreate(Bundle savedInstanceState) {
  9. super.onCreate(savedInstanceState);
  10. setContentView(R.layout.activity_main);
  11. toolbar = (Toolbar) findViewById(R.id.toolbar);
  12. setSupportActionBar(toolbar);
  13. setTitle("滑动隐藏");
  14. }
  15. }

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

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

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

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

                       

 

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

3.1  main.xml布局


  
  1. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:app="http://schemas.android.com/apk/res-auto"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical">
  6. <android.support.design.widget.AppBarLayout
  7. android:layout_width="match_parent"
  8. android:layout_height="wrap_content">
  9. <android.support.v7.widget.Toolbar
  10. android:id="@+id/toolbar"
  11. app:titleTextColor="@color/white"
  12. app:layout_scrollFlags="scroll|enterAlways"
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content">
  15. </android.support.v7.widget.Toolbar>
  16. <android.support.design.widget.TabLayout
  17. android:background="@color/white"
  18. app:tabMode="scrollable"
  19. android:id="@+id/tablayout"
  20. android:layout_width="fill_parent"
  21. android:layout_height="wrap_content"
  22. app:tabIndicatorColor="@color/colorPrimary"
  23. app:tabTextColor="@color/colorPrimary"
  24. app:tabSelectedTextColor="@color/colorPrimaryDark"
  25. app:tabGravity="fill"
  26. />
  27. </android.support.design.widget.AppBarLayout>
  28. <android.support.v4.view.ViewPager
  29. android:id="@+id/vp"
  30. android:layout_width="fill_parent"
  31. android:layout_height="fill_parent"
  32. />
  33. </android.support.design.widget.CoordinatorLayout>

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

3.2 ViewPager每一页fragment的布局


  
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. xmlns:app="http://schemas.android.com/apk/res-auto">
  6. <android.support.v4.widget.NestedScrollView
  7. android:layout_width="match_parent"
  8. app:layout_behavior="@string/appbar_scrolling_view_behavior"
  9. android:layout_height="match_parent">
  10. <LinearLayout
  11. android:orientation="vertical"
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content">
  14. <TextView
  15. android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
  16. android:layout_width="match_parent"
  17. android:layout_height="200dp" />
  18. <TextView
  19. android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
  20. android:layout_width="match_parent"
  21. android:layout_height="200dp" />
  22. <TextView
  23. android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
  24. android:layout_width="match_parent"
  25. android:layout_height="200dp" />
  26. <TextView
  27. android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
  28. android:layout_width="match_parent"
  29. android:layout_height="200dp" />
  30. <TextView
  31. android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
  32. android:layout_width="match_parent"
  33. android:layout_height="200dp" />
  34. <TextView
  35. android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
  36. android:layout_width="match_parent"
  37. android:layout_height="200dp" />
  38. <TextView
  39. android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
  40. android:layout_width="match_parent"
  41. android:layout_height="200dp" />
  42. <TextView
  43. android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
  44. android:layout_width="match_parent"
  45. android:layout_height="200dp" />
  46. </LinearLayout>
  47. </android.support.v4.widget.NestedScrollView>
  48. </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
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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

举报
请填写举报理由
0/200