Android Material Design系列之CoordinatorLayout,CollapsingToolbarLayout等

这篇文章其实我一直在想,是写还是不写,因为关于讲 CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,Toolbar,TabLayout 等这些控件的使用,以前写过一篇,那就是《通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout 》,一直关注和看公众号的关注者应该看到过,上一篇的推送也特别讲了 CoordinatorLayout 的其他用法,看过的人都说还能这么用啊?哈哈……这次写这篇是对我上一篇《通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout 》遗留问题的加强和修改。

这次关于 CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,Toolbar,TabLayout 等这些控件的用法我就不讲了,不懂的或者不清楚的就去看《通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout 》这篇文章,因为这次我们主讲怎么把上次大家给我提问的问题进行修改和加强,优化等。

问题

上次关于仿稀土掘金的文章发出后,我看到有人在微信后台跟我留言,也有人在github上给我提问题,大约问的最多的有三个问题。

  • 原图是沉浸状态栏,你的这个模仿的效果图没有做到。
  • 原图加载毛玻璃的效果比较快,你的这个打开app白屏好几秒。
  • 原图fragment中有列表,你的没有,为什么我放上ListView之后,标题栏不能折叠等等

现在我们就从以上三个问题,进行修改和加强,优化,在讲之前,先看效果图对比,如果感觉好,你们再继续往下看。

稀土掘金原图

之前的模仿效果图

增强,修改,优化后的效果图

解决方法

第一个问题

大致的方法过程就是如下:

  • 配置window的各项参数,使状态栏透明
    /**
     * 使状态栏透明
     */
    @TargetApi(Build.VERSION_CODES.KITKAT)
    private static void transparentStatusBar(Activity activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
        } else {
            activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }
    }
  • 设置根布局的参数
    /**
     * 设置根布局参数
     */
    private static void setRootView(Activity activity) {
        ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.
        findViewById(android.R.id.content)).getChildAt(0);
        rootView.setFitsSystemWindows(true);
        rootView.setClipToPadding(true);
    }
  • 添加半透明矩形条
    /**
     * 添加半透明矩形条
     *
     * @param activity       需要设置的 activity
     * @param statusBarAlpha 透明值
     */
    private static void addTranslucentView(Activity activity, int statusBarAlpha) {
        ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
        // 移除半透明矩形,以免叠加
        if (contentView.getChildCount() > 1) {
            contentView.getChildAt(1).setBackgroundColor(Color.argb(statusBarAlpha, 0, 0, 0));
        } else {
            contentView.addView(createTranslucentStatusBarView(activity, statusBarAlpha));
        }
    }

大致的步骤就是这样,我这里用的是别人封装好的,github地址是:https://github.com/laobie/StatusBarUtil 大家可以去参考使用。

第二个问题

以前的毛玻璃效果,是我从网上找的一个毛玻璃算法,然后搞出来的,确实很慢,然后我在网上找更快的加载的速度的算法,找来找去,网上都是那几种,最快的也得白屏四秒,最后终于搞定了一个快的,真的是脑子不灵活了,光想着毛玻璃了,不是glide也支持毛玻璃,支持模糊效果吗?一用它确实快。就是这么解决的。怎么使用的,我相信用过glide的都会吧,如果你没用过,就去下载源码吧,里面写的非常简单。

第三个问题

CoordinatorLayout协同布局在一般只结合RecyclerView和NestedScrollView使用,所以你用ListView没有效果,如果你硬要用ListView那就比较麻烦了,倒不是做不到。你去分析源码可以知道RecyclerView和NestedScrollView它们都实现了一个接口NestedScrollingChild,所以我们可以自定义ListView,实现NestedScrollingChild接口就好。你也可以使用listView.setNestedScrollingEnabled(true)也行,也能做到,但是貌似这两种方法只能支持在android5.0以上的手机才能用,所以还是建议大家使用RecyclerView就没那么多事了。

这就是Material Design系列第六篇之《Android Material Design系列之CoordinatorLayout,CollapsingToolbarLayout等》。

这个系列的讲解和实例都会整理在一个demo里,demo的github地址:https://github.com/loonggg/MaterialDesignDemo 去star吧,我会慢慢完善的。

仿稀土掘金效果的demo也放到上边的那个综合demo里了,当然单独的demo效果也修改了,地址是:https://github.com/loonggg/CoordinatorLayoutDemo

MaterialDesign系列文章推荐:
Android Material Design系列之RecyclerView和CardView(可点击)
Android Material Design系列之Toolbar(可点击)
Android Material Design系列之Navigation Drawer(可点击)
Android Material Design系列之FloatingActionButton和Snackbar(可点击)
Android Material Design系列之Palette(可点击)

扩展篇(可点击):
通过来模仿稀土掘金个人页面的布局来学习使用 CoordinatorLayout
CoordinatorLayout的使用如此简单

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,496评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,407评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,632评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,180评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,198评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,165评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,052评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,910评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,324评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,424评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,017评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2 353

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,075评论 25 707
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,429评论 2 45
  • 晚上散步去小区外围散步,在这一片居住了十一年了,与十年前相比,这里完全变了模样,高楼林立,马路宽阔,南河道两边绿树...
    马严阅读 247评论 0 1
  • 很长时间,很多人都不理解Grace为什么要去上班,因为她的先生的家境足以让她下半辈子都毫无忧虑。 她生完孩子之后,...
    修女爱古筝阅读 196评论 0 0
  • 我最疼爱的人 ,求你们慢点老去。 人活世间,有太多的无奈,太多的牵绊,太多的挂念。如果可以,不,是一定要,请求时光...
    Tan小妮同学阅读 121评论 0 0