Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
ok,今天继续更新Material Design系列!!!
废话不说,先看看效果图吧:
好了,现在来讲讲上图是怎么实现的吧!讲之前先讲讲几个控件:
- CoordinatorLayout
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/coordinator_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#30469b" app:layout_scrollFlags="scroll|enterAlways" /> <android.support.design.widget.TabLayout ...... /> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:scrollbars="none" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <!-- content view .....--> </LinearLayout> </android.support.design.widget.CoordinatorLayout>
scroll:
所有想滚动出屏幕的view都需要设置这个flag, 没有设置这个flag的view将被固定在屏幕顶部。
enterAlways:这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。
enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
exitUntilCollapsed:滚动退出屏幕,最后折叠在顶端。
【注意】:
设置了layout_scrollFlags标志的View必须在没有设置的View的之前定义,这样可以确保设置过的View都从上面移出, 只留下那些固定的View在下面。
- TabLayout
- (Tab的宽度平均分配),也实现了可滚动的选项卡 - (Tab宽度不固定,同时可以横向滚动),还实现了所有Tab居中显示。它还有一个重要作用就是结合ViewPager来实现多个Tab之间的切换。
- 固定的Tab,根据TabLayout的宽度适配
- 固定的Tab,在TabLayout中居中显示
- 可滑动的Tab
<android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#30469b" app:tabGravity="fill" app:tabMode="fixed" app:tabSelectedTextColor="#ff0000" app:tabTextColor="#ffffff" />
上面有几个参数我来详细介绍下吧,其实就是通过改变这几个参数来改变TabLayout显示效果的:
- tabGravity —Tab的重心,有填充和居中两个值,为别为fill和center。
- tabMode —Tab的模式,有固定和滚动两个模式,分别为 fixed 和 scrollable。
- tabTextColor —设置默认状态下Tab上字体的颜色。
- tabSelectedTextColor —设置选中状态下Tab上字体的颜色。
TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout); mTabLayout.addTab(mTabLayout.newTab().setText("TabOne"));//给TabLayout添加Tab mTabLayout.addTab(mTabLayout.newTab().setText("TabTwo")); mTabLayout.addTab(mTabLayout.newTab().setText("TabThree")); mTabLayout.setupWithViewPager(mViewPager);//给TabLayout设置关联ViewPager,如果设置了ViewPager,那么ViewPagerAdapter中的getPageTitle()方法返回的就是Tab上的标题
ViewPager设置代码:
ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager); MyViewPagerAdapter viewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager()); viewPagerAdapter.addFragment(FragmentOne.newInstance(), "TabOne");//添加Fragment viewPagerAdapter.addFragment(FragmentTwo.newInstance(), "TabTwo"); viewPagerAdapter.addFragment(FragmentThree.newInstance(), "TabThree"); mViewPager.setAdapter(viewPagerAdapter);//设置适配器
然后把mViewPager设置给TabLayout即可。贴一下ViewPager适配器代码:
public class MyViewPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragments = new ArrayList<>();//添加的Fragment的集合 private final List<String> mFragmentsTitles = new ArrayList<>();//每个Fragment对应的title的集合 public MyViewPagerAdapter(FragmentManager fm) { super(fm); } /** * @param fragment 添加Fragment * @param fragmentTitle Fragment的标题,即TabLayout中对应Tab的标题 */ public void addFragment(Fragment fragment, String fragmentTitle) { mFragments.add(fragment); mFragmentsTitles.add(fragmentTitle); } @Override public Fragment getItem(int position) { //得到对应position的Fragment return mFragments.get(position); } @Override public int getCount() { //返回Fragment的数量 return mFragments.size(); } @Override public CharSequence getPageTitle(int position) { //得到对应position的Fragment的title return mFragmentsTitles.get(position); } }
好了,TabLayout就介绍完了。。。效果就是开始那张效果图的效果,可滑动切换。
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/coordinator_layout" 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:fitsSystemWindows="true"> <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="#30469b" app:layout_scrollFlags="scroll|enterAlways" /> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#30469b" app:tabGravity="fill" app:tabMode="fixed" app:tabSelectedTextColor="#ff0000" app:tabTextColor="#ffffff" /> </android.support.design.widget.AppBarLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:scrollbars="none" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> </android.support.design.widget.CoordinatorLayout>
功能实现:MainActivity.java
public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar mToolbar = (Toolbar) findViewById(R.id.toolBar); mToolbar.setTitleTextColor(Color.WHITE);//设置ToolBar的titl颜色 setSupportActionBar(mToolbar); ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager); MyViewPagerAdapter viewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager()); viewPagerAdapter.addFragment(FragmentOne.newInstance(), "TabOne");//添加Fragment viewPagerAdapter.addFragment(FragmentTwo.newInstance(), "TabTwo"); viewPagerAdapter.addFragment(FragmentThree.newInstance(), "TabThree"); mViewPager.setAdapter(viewPagerAdapter);//设置适配器 TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout); mTabLayout.addTab(mTabLayout.newTab().setText("TabOne"));//给TabLayout添加Tab mTabLayout.addTab(mTabLayout.newTab().setText("TabTwo")); mTabLayout.addTab(mTabLayout.newTab().setText("TabThree")); mTabLayout.setupWithViewPager(mViewPager);//给TabLayout设置关联ViewPager,如果设置了ViewPager,那么ViewPagerAdapter中的getPageTitle()方法返回的就是Tab上的标题 } }
主要就是这两个代码文件!!!
Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar的更多相关文章
- Android Material Design:基于CoordinatorLayout实现向上滚动导航条ToolBar滚出、向下滚动导航条滚出
activity_main.xml: <android.support.design.widget.CoordinatorLayout xmlns:android="http://sc ...
- uwp - 上滑隐藏导航栏下滑显示
原文:uwp - 上滑隐藏导航栏下滑显示 好久没写博客了,因为忙着工作.昨天周末填坑需要做一个上滑列表数据时隐藏导航栏下滑时显示的效果,下面分享一下我的做法,希望能给你带来帮助. 思路是通过判断滚动条 ...
- Material Design 组件之 AppBarLayout
AppBarLayout 是一个垂直方向的 LinearLayout,它实现了许多符合 Material Design 设计规范的状态栏应该具有的功能,比如滚动手势. AppBarLayout 一般直 ...
- Android Material Design(一)史上最全的材料设计控件大全
主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout.SwitchCompat.SnackBar.FloatingActi ...
- Android 浮动按钮+上滑隐藏按钮+下滑显示按钮
1.效果演示 1.1.关注这个红色的浮动按钮 . 可以看到,上滑的时候浮动按钮消失,因为用户迫切想知道下面的东西,而不是回到顶部. 当下滑的时候,用户想回到原来的位置,就可以点击浮动按钮,快速回到顶部 ...
- iOS 上滑隐藏导航,下滑显示导航,仿斗鱼导航效果
UItableView或 UIcollectionView 都是继承UIScrollView 滑动的时候,判断是上滑还是下滑 使用 UIScrollView 的代理方法 func scrollView ...
- RecyclerView上拉隐藏Toolbar,下拉显示
RecyclerView下拉隐藏Toolbar,上拉显示效果图 先说个事:最近我准备做个开源的博客园android客户端!符合Google最新的material design设计风格的!不知道有没有小 ...
- NestedScrollView嵌套RecycleView 滑动 实现上滑隐藏 下滑显示头部效果
废了好大的劲才弄好的,记下来 方便以后查看 public class MainActivity extends AppCompatActivity { private RecyclerView mRe ...
- iOS---实现简书和知乎的上滑隐藏导航栏下拉显示导航栏效果
因为自己用简书和知乎比较多,所以对其导航栏的效果比较好奇,自己私下里找资料实现了一下.这个效果的关键点在于下方可供滑动的内容的便宜距离inset的改变,以及滑动的scrollview代理的执行,废话不 ...
随机推荐
- JFinal中使用QuartzPlugin报ClassCastException解决方法
JDK1.8中泛型反射修改对旧版本的影响 本文地址:http://blog.csdn.net/sushengmiyan 本文作者:苏生米沿 问题复现环境: JDK1.8 JFinal1.9 quart ...
- Git之(三)辅助命令
熟悉了Git的基本操作之后,再来研究一下Git为我们提供的基础设施服务.正如一个程序员,只会写代码是远远不够的,还得知道怎么吃饭,怎么睡觉,怎么谈恋爱,怎么耍流氓--会了这些才能写出更好的代码,这就是 ...
- Xcode 中的断言
转自:http://weibo.com/p/100808885591f113cdedc3301794e5e7d7e9f0/home?from=page_100808&mod=TAB#_rnd1 ...
- Xcode无法安装基于ruby的插件问题的解决
Xcode有时需要安装一些第三方插件,很多插件是基于ruby的,确切的说是基于ruby gem的! 但是在国内有一个很尴尬的情况,就是官方的gems网站:https://rubygems.org 的安 ...
- 探究java接口中的变量与方法
关于变量 java接口里的变量都是默认 pubic static final的 为啥? public 接口得能被所有对象调用 static 这个变量是属于接口本身,而不是实现了接口的对象的 具体来说 ...
- 自动滚动的TextView
自动滚动的TextView 效果图 XML文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andr ...
- Swift函数柯里化(Currying)简谈
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 下面简单说说Swift语言中的函数柯里化.简单的说就是把接收多 ...
- python地理数据处理库geopy
http://blog.csdn.net/pipisorry/article/details/52205266 python地理位置处理 python地理编码地址以及用来处理经纬度的库 GeoDjan ...
- JDBC编程-事务编程(四)
事务的概念 事务的概念在我看来是指的是一组sql序列,这个序列是一块执行的单位,要么全部执行,要不全部执行,这样可以很好的对数据库进行并发控制. 因为数据库是多个用户都可以同时操作的,如果多个用户同时 ...
- 插件开发之360 DroidPlugin源码分析(五)Service预注册占坑
请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52264977 在了解系统的activity,service,broa ...