Android Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar

http://blog.csdn.net/u010687392/article/details/46852565

版权声明：本文为博主原创文章，未经博主允许不得转载。转载注明出处：Sunzxyong

ok，今天继续更新Material Design系列！！！

废话不说，先看看效果图吧：

好了，现在来讲讲上图是怎么实现的吧！讲之前先讲讲几个控件：

  • CoordinatorLayout 

该控件也是Design包下的一个控件，然而这个控件可以被称为Design包中最复杂、功能最强大的控件：CoordinatorLayout。为什么这样说呢？原因是：它是组织它众多子view之间互相协作的一个ViewGroup。

CoordinatorLayout 的神奇之处就在于 Behavior 对象。怎么理解呢？CoordinatorLayout使得子view之间知道了彼此的存在，一个子view的变化可以通知到另一个子view，CoordinatorLayout 所做的事情就是当成一个通信的桥梁，连接不同的view，使用 Behavior 对象进行通信。

比如：在CoordinatorLayout中使用AppBarLayout，如果AppBarLayout的子View（如ToolBar、TabLayout）标记了app:layout_scrollFlags滚动事件,那么在CoordinatorLayout布局里其它标记了app:layout_behavior的子View（LinearLayout、RecyclerView、NestedScrollView等）就能够响应（如ToolBar、TabLayout）控件被标记的滚动事件。如：

[html] view
plaincopyprint?

  1. <android.support.design.widget.CoordinatorLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     android:id="@+id/coordinator_layout"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent">  
  7.   
  8.     <android.support.design.widget.AppBarLayout  
  9.         android:id="@+id/appbar_layout"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:fitsSystemWindows="true">  
  13.         <android.support.v7.widget.Toolbar  
  14.             android:id="@+id/toolBar"  
  15.             android:layout_width="match_parent"  
  16.             android:layout_height="?attr/actionBarSize"  
  17.             android:background="#30469b"  
  18.             app:layout_scrollFlags="scroll|enterAlways" />  
  19.         <android.support.design.widget.TabLayout  
  20.             ......  
  21.              />  
  22.     </android.support.design.widget.AppBarLayout>  
  23.   
  24.     <LinearLayout  
  25.         android:layout_width="match_parent"  
  26.         android:layout_height="match_parent"  
  27.         android:orientation="vertical"  
  28.         android:scrollbars="none"  
  29.         app:layout_behavior="@string/appbar_scrolling_view_behavior">  
  30.  <!-- content view .....-->  
  31.     </LinearLayout>  
  32.   
  33. </android.support.design.widget.CoordinatorLayout>  

上面这段代码中，ToolBar标记了layout_scrollFlags滚动事件，那么当LinearLayout滚动时便可触发ToolBar中的layout_scrollFlags效果。即往上滑动隐藏ToolBar，下滑出现ToolBar，而不会隐藏TabLayout，因为TabLayout没有标记scrollFlags事件，相反，如果TabLayout也标记了ScrollFlags事件，那么LinearLayout的下滑时ToolBar和TabLayout都会隐藏了。

layout_scrollFlags中的几个值：

scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。

enterAlways:这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。

enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。 

exitUntilCollapsed:滚动退出屏幕，最后折叠在顶端。

【注意】: 设置了layout_scrollFlags标志的View必须在没有设置的View的之前定义，这样可以确保设置过的View都从上面移出,
只留下那些固定的View在下面。

  • TabLayout

说到TabLayout，就是实现多个Tab之间的切换，不过Google在Design library新推出的TabLayout既实现了固定的选项卡 - (Tab的宽度平均分配)，也实现了可滚动的选项卡
- (Tab宽度不固定，同时可以横向滚动)，还实现了所有Tab居中显示。它还有一个重要作用就是结合ViewPager来实现多个Tab之间的切换。

来看看TabLayout的三种实现方式：

  • 固定的Tab，根据TabLayout的宽度适配

  • 固定的Tab，在TabLayout中居中显示

  • 可滑动的Tab

要实现上述效果，首先就需要加入TabLayout：

[html] view
plaincopyprint?

  1. <android.support.design.widget.TabLayout  
  2.             android:id="@+id/tabLayout"  
  3.             android:layout_width="match_parent"  
  4.             android:layout_height="wrap_content"  
  5.             android:background="#30469b"  
  6.             app:tabGravity="fill"  
  7.             app:tabMode="fixed"  
  8.             app:tabSelectedTextColor="#ff0000"  
  9.             app:tabTextColor="#ffffff" />  

上面有几个参数我来详细介绍下吧，其实就是通过改变这几个参数来改变TabLayout显示效果的：

  • tabGravity  —Tab的重心，有填充和居中两个值，为别为fill和center。
  • tabMode  —Tab的模式，有固定和滚动两个模式，分别为 fixed 和 scrollable。
  • tabTextColor  —设置默认状态下Tab上字体的颜色。
  • tabSelectedTextColor  —设置选中状态下Tab上字体的颜色。

然后在代码中动态添加Tab：

[java] view
plaincopyprint?

  1. TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);  
  2.         mTabLayout.addTab(mTabLayout.newTab().setText("TabOne"));//给TabLayout添加Tab  
  3.         mTabLayout.addTab(mTabLayout.newTab().setText("TabTwo"));  
  4.         mTabLayout.addTab(mTabLayout.newTab().setText("TabThree"));  
  5.         mTabLayout.setupWithViewPager(mViewPager);//给TabLayout设置关联ViewPager，如果设置了ViewPager，那么ViewPagerAdapter中的getPageTitle()方法返回的就是Tab上的标题  

ViewPager设置代码：

[java] view
plaincopyprint?

  1. ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);  
  2.        MyViewPagerAdapter viewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());  
  3.        viewPagerAdapter.addFragment(FragmentOne.newInstance(), "TabOne");//添加Fragment  
  4.        viewPagerAdapter.addFragment(FragmentTwo.newInstance(), "TabTwo");  
  5.        viewPagerAdapter.addFragment(FragmentThree.newInstance(), "TabThree");  
  6.        mViewPager.setAdapter(viewPagerAdapter);//设置适配器  

然后把mViewPager设置给TabLayout即可。贴一下ViewPager适配器代码：

MyViewPagerAdapter.java

[java] view
plaincopyprint?

  1. public class MyViewPagerAdapter extends FragmentPagerAdapter {  
  2.     private final List<Fragment> mFragments = new ArrayList<>();//添加的Fragment的集合  
  3.     private final List<String> mFragmentsTitles = new ArrayList<>();//每个Fragment对应的title的集合  
  4.     public MyViewPagerAdapter(FragmentManager fm) {  
  5.         super(fm);  
  6.     }  
  7.     /** 
  8.      * @param fragment      添加Fragment 
  9.      * @param fragmentTitle Fragment的标题，即TabLayout中对应Tab的标题 
  10.      */  
  11.     public void addFragment(Fragment fragment, String fragmentTitle) {  
  12.         mFragments.add(fragment);  
  13.         mFragmentsTitles.add(fragmentTitle);  
  14.     }  
  15.   
  16.     @Override  
  17.     public Fragment getItem(int position) {  
  18.         //得到对应position的Fragment  
  19.         return mFragments.get(position);  
  20.     }  
  21.   
  22.     @Override  
  23.     public int getCount() {  
  24.         //返回Fragment的数量  
  25.         return mFragments.size();  
  26.     }  
  27.   
  28.     @Override  
  29.     public CharSequence getPageTitle(int position) {  
  30.         //得到对应position的Fragment的title  
  31.         return mFragmentsTitles.get(position);  
  32.     }  
  33. }  

好了，TabLayout就介绍完了。。。效果就是开始那张效果图的效果，可滑动切换。

上面两个控件如果明白怎么用了，那么这个效果就很简单了，我就直接贴代码了。。。

主布局：activity_main.xml

[html] view
plaincopyprint?

  1. <android.support.design.widget.CoordinatorLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     android:id="@+id/coordinator_layout"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent">  
  7.   
  8.     <android.support.design.widget.AppBarLayout  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:fitsSystemWindows="true">  
  12.   
  13.         <android.support.v7.widget.Toolbar  
  14.             android:id="@+id/toolBar"  
  15.             android:layout_width="match_parent"  
  16.             android:layout_height="?attr/actionBarSize"  
  17.             android:background="#30469b"  
  18.             app:layout_scrollFlags="scroll|enterAlways" />  
  19.   
  20.         <android.support.design.widget.TabLayout  
  21.             android:id="@+id/tabLayout"  
  22.             android:layout_width="match_parent"  
  23.             android:layout_height="wrap_content"  
  24.             android:background="#30469b"  
  25.             app:tabGravity="fill"  
  26.             app:tabMode="fixed"  
  27.             app:tabSelectedTextColor="#ff0000"  
  28.             app:tabTextColor="#ffffff" />  
  29.     </android.support.design.widget.AppBarLayout>  
  30.   
  31.     <LinearLayout  
  32.         android:layout_width="match_parent"  
  33.         android:layout_height="match_parent"  
  34.         android:orientation="vertical"  
  35.         android:scrollbars="none"  
  36.         app:layout_behavior="@string/appbar_scrolling_view_behavior">  
  37.         <android.support.v4.view.ViewPager  
  38.             android:id="@+id/viewpager"  
  39.             android:layout_width="match_parent"  
  40.             android:layout_height="match_parent" />  
  41.     </LinearLayout>  
  42.   
  43. </android.support.design.widget.CoordinatorLayout>  

功能实现：MainActivity.java

[java] view
plaincopyprint?

  1. public class MainActivity extends ActionBarActivity {  
  2.     @Override  
  3.     protected void onCreate(Bundle savedInstanceState) {  
  4.         super.onCreate(savedInstanceState);  
  5.         setContentView(R.layout.activity_main);  
  6.   
  7.         Toolbar mToolbar = (Toolbar) findViewById(R.id.toolBar);  
  8.         mToolbar.setTitleTextColor(Color.WHITE);//设置ToolBar的titl颜色  
  9.         setSupportActionBar(mToolbar);  
  10.   
  11.         ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);  
  12.         MyViewPagerAdapter viewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());  
  13.         viewPagerAdapter.addFragment(FragmentOne.newInstance(), "TabOne");//添加Fragment  
  14.         viewPagerAdapter.addFragment(FragmentTwo.newInstance(), "TabTwo");  
  15.         viewPagerAdapter.addFragment(FragmentThree.newInstance(), "TabThree");  
  16.         mViewPager.setAdapter(viewPagerAdapter);//设置适配器  
  17.   
  18.         TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);  
  19.         mTabLayout.addTab(mTabLayout.newTab().setText("TabOne"));//给TabLayout添加Tab  
  20.         mTabLayout.addTab(mTabLayout.newTab().setText("TabTwo"));  
  21.         mTabLayout.addTab(mTabLayout.newTab().setText("TabThree"));  
  22.         mTabLayout.setupWithViewPager(mViewPager);//给TabLayout设置关联ViewPager，如果设置了ViewPager，那么ViewPagerAdapter中的getPageTitle()方法返回的就是Tab上的标题  
  23.     }  
  24. }  

主要就是这两个代码文件！！！

源码地址：http://download.csdn.net/detail/u010687392/8893117

时间： 2024-10-31 16:36:55

Android Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar的相关文章

Android Material Design控件学习（三）——使用TextInputLayout实现酷市场登录效果

前言 前两次,我们学习了 Android Material Design控件学习(一)--TabLayout的用法 Android Material Design控件学习(二)--NavigationView的学习和使用 今天我们继续MD控件的学习和使用.在学习之前,我们先来看一下酷市场的登录效果. 实现这种效果的正是我们今天的主角--TextInputLayout. 学习 不管学习什么,首先看它的官方文档.这是最权威,最高效的学习途径. 文档地址:http://developer.androi

android-Android toolbar的上滑隐藏 与保持在顶端

问题描述 Android toolbar的上滑隐藏 与保持在顶端 toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.inflateMenu(R.menu.menu_main); toolbar.setNavigationIcon(R.drawable.ic_menu); toolbar.setOnMenuItemClickListener(this); <android.support.design.widget.Coordinato

导航-淘宝搜索结果listview向上滑动筛选栏上滑隐藏listview无明显挪动现象

问题描述 淘宝搜索结果listview向上滑动筛选栏上滑隐藏listview无明显挪动现象 就是淘宝这种结果页,当listview向上滑动之后筛选栏和导航栏都会收起,但是listview无明显滑动现象,好似listview滑动就是在筛选栏下边进行滑动一样,求大神告知思路什么的,谢谢. 解决方案 用一个帧布局,帧布局为最底层,listview为第二层,标题栏为第三层 解决方案二: 相对布局就可以解决问题了,帧布局也可以,

Android Material Design控件学习（一）——TabLayout的用法

前言 Google官方在14年Google I/O上推出了全新的设计语言--Material Design.一并推出了一系列实现Material Design效果的控件库--Android Design Support Library.其中,有TabLayout, NavigationView,Floating labels for editing text,Floating Action Button,Snackbar, CoordinatorLayout, CollapsingToolbar

android Material Design详解

原文地址:http://blog.csdn.net/jdsjlzx/article/details/41441083/ 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material Design的译文,相比之前Google在Android Holo风格上平平淡淡的表现不同,Material Design现在是被Google所比较重视的.在推出这门全新设计语言后

Android Material Design之Toolbar与Palette实践

转载请注明出处:http://blog.csdn.net/bbld_/article/details/41439715 [Rocko's bog] 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material Design的译文,相比之前Google在Android Holo风格上平平淡淡的表现不同,Material Design现在是被Google所比较重视

详解Android Material Design自定义动画的编写_Android

新的动画Api,让你在UI控件里能创建触摸反馈,改变View的状态,切换activity的一系列自定义动画 具体有: 响应View的touch事件的触摸反馈动画 隐藏和显示View的循环展示动画 两个Activity间的切换动画 更自然的曲线运动的动画 使用View的状态更改动画,能改变一个或多个View的属性 在View的状态更改时显示状态列表动画 这些new animations Api,已内置在标准Widget中,如Button.在自定义view时也可使用这些api 动画在Material

Android Material Design之Toolbar与Palette

转:http://blog.csdn.net/jdsjlzx/article/details/41441083 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material Design的译文,相比之前Google在Android Holo风格上平平淡淡的表现不同,Material Design现在是被Google所比较重视的.在推出这门全新设计语言后,And

Android Material Design控件学习（二）——NavigationView的学习和使用

前言 上次我们学习了TabLayout的用法,今天我们继续学习MaterialDesign(简称MD)控件--NavigationView. 正如其名,NavigationView,导航View.一般我们用它和DrawerLayout实现抽屉式导航设计,效果如下图. 学习 文档地址:http://developer.android.com/reference/android/support/design/widget/NavigationView.html 通过学习官方文档,我们知道Naviga