许多程序员有这样的疑问:现有的知识能满足工作需要了,为什么还要费劲去学习Material Design? 那么我可以告诉你,Material Design大大节约了UI上的开发时间,而学会她(满足日常使用)只需花一点点功夫。
好了,让我们集中注意力开始学习吧~
有这样一个需求:
传统解决方案主要需要解决这些问题: 1.头部图片与标题栏的伸缩协调; 2.标题栏与状态栏的沉浸式协调及版本适配; 3.滚动视图的事件冲突。
别看只有三个主要问题,但每个问题都够你写一大堆的逻辑代码了。 美团实现了比这简单的功能。
美团使用传统方案部分实现
美团的这个页面是一个单独的Activity,无需解决Fragment标题栏与沉浸式的问题。然而美团并没有实现沉浸式,多次拖拉还会出现滑不动的情况。不过,功能是实现了,也还算流畅吧,那么还有更好的解决方案吗?
话不多说,献上Demo: MaterialShow。 使用Material控件可以非常优雅地消灭各种问题,几乎不需要写任何逻辑代码。
如丝般顺滑,性能杠杠的~往下继续查看要点解读。
使用Martial Design优雅实现
// 保存ViewPager中Fragment的状态
mViewPager.setOffscreenPageLimit(mFragments.size());
// 在Fragment中显示标题栏,并为该标题栏添加菜单。
mToolbar.inflateMenu(R.menu.main);
mToolbar.setOnMenuItemClickListener(this);
// 快速绑定已有数据的TabLayout与ViewPager。
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.addOnTabSelectedListener(this);
// Fragment中ViewPager嵌套Fragment,需要注意传入的FragmentMangager(),不然子Fragment可能无法显示。
mViewPager.setAdapter(new FragmentStatePagerAdapter(getChildFragmentManager()...
// 一行代码解决RecyclerView等视图的滚动冲突,具体请看[源码](https://github.com/XunMengWinter/MaterialShow/tree/master) 。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
// 为Fragment中的头部视图(含图片)实现沉浸式。
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="lollipop">true</item>
<item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent </item>
</style>
// 为该Fragment所在的Activity设定该主题,会带来一些输入框问题,但是由于AppBar是在Fragment里面,如果在Activity里面的话直接设定为上面的主题就可以实现头部图片沉浸式了。
<style name="AppTheme.NoActionBar.Immerse">
<item name="android:windowTranslucentStatus" tools:targetApi="kitkat">true</item>
</style>
// 最简单的沉浸式�版本适配,请看源码。
// 为ToolBar设置MarginTop.
android:layout_marginTop="@dimen/height_status_bar"
//在 dimen.xml 文件中添加
<dimen name="height_status_bar">0dp</dimen>
//在 dimen.xml(v19) 文件中添加
<dimen name="height_status_bar">22dp</dimen>
// p.s 这样一来安卓4.4以上toolbar就距离顶部22dp了,而比4.4低的版本是没有沉浸式这一概念的,所以设为0dp就好。
再来喵一眼,顺便点个喜欢关注什么的~~
Material Design各个控件�自动协调