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

简介:

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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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 plain copy print ?
  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
相关文章
|
13天前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
30 1
|
3月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
【7月更文挑战第28天】随着移动应用市场的发展,用户对界面设计的要求不断提高。Material Design是由Google推出的设计语言,强调真实感、统一性和创新性,通过模拟纸张和墨水的物理属性创造沉浸式体验。它注重色彩、排版、图标和布局的一致性,确保跨设备的统一视觉风格。Android Studio提供了丰富的Material Design组件库,如按钮、卡片等,易于使用且美观。
96 1
|
5月前
|
XML Android开发 数据格式
[Android]Toolbar
[Android]Toolbar
55 0
|
5月前
|
XML Java Android开发
Android Studio App开发中工具栏Toolbar、溢出菜单OverflowMenu、标签布局TabLayout的讲解及实战(实现京东App的标签导航栏,附源码)
Android Studio App开发中工具栏Toolbar、溢出菜单OverflowMenu、标签布局TabLayout的讲解及实战(实现京东App的标签导航栏,附源码)
548 0
|
Android开发 开发者 UED
Android Design Support Library初探-更新中
Android Design Support Library初探-更新中
92 0
|
XML Java 开发工具
Android5.0新特性-Material Design
Android5.0新特性-Material Design
82 0
|
Android开发 容器
Android实现面包屑效果,支持Fragment联动
Android实现面包屑效果,支持Fragment联动
|
7天前
|
IDE Android开发 iOS开发
探索Android与iOS开发的差异:平台选择对项目成功的影响
【9月更文挑战第27天】在移动应用开发的世界中,Android和iOS是两个主要的操作系统平台。每个系统都有其独特的开发环境、工具和用户群体。本文将深入探讨这两个平台的关键差异点,并分析这些差异如何影响应用的性能、用户体验和最终的市场表现。通过对比分析,我们将揭示选择正确的开发平台对于确保项目成功的重要作用。
|
4天前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
21 7
下一篇
无影云桌面