Material Design初露锋芒之复杂视图轻松实现

2016-06-30 本文已影响1823人 DreamWinter

为什么一定要学习Material Design？

许多程序员有这样的疑问：现有的知识能满足工作需要了，为什么还要费劲去学习Material Design？
那么我可以告诉你，Material Design大大节约了UI上的开发时间，而学会她(满足日常使用)只需花一点点功夫。

好了，让我们集中注意力开始学习吧～

本文要点

保持ViewPager中Fragment的状态。
快速绑定已有数据的TabLayout与ViewPager。
在Fragment中显示标题栏，并为该标题栏添加菜单。
Fragment嵌套Fragment。
一行代码解决RecyclerView等视图的滚动冲突。
为Fragment中的头部视图(含图片)实现沉浸式。
最简单的沉浸式�版本适配。

一个奇怪的需求

有这样一个需求：

MainActivity里有一个ViewPager，ViewPager里面有三个Fragment，各个Fragment标题栏是不一样。
第一个Fragment需要有一个带菜单的沉浸式头部视图(带图片)以及一个ViewPager，该ViewPager包含两个子Fragment。
子Fragment内包含带下拉刷新的RecyclerView，该RecyclerView滑动的时候，父Fragment里的沉浸式头部也要跟着收起或拉伸。

传统解决方案

传统解决方案主要需要解决这些问题：
1.头部图片与标题栏的伸缩协调；
2.标题栏与状态栏的沉浸式协调及版本适配；
3.滚动视图的事件冲突。

别看只有三个主要问题，但每个问题都够你写一大堆的逻辑代码了。
美团实现了比这简单的功能。

美团使用传统方案部分实现

美团的这个页面是一个单独的Activity，无需解决Fragment标题栏与沉浸式的问题。然而美团并没有实现沉浸式，多次拖拉还会出现滑不动的情况。不过，功能是实现了，也还算流畅吧，那么还有更好的解决方案吗？

使用Material控件完美解决

话不多说，献上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各个控件�自动协调