《云阅》一个仿知乎云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目

作文是基本技能

编著是一个人应该控制的基本技能,不过被许多培训师和书本神话后,写作反而变成了“少数人”才能领会的技巧。

瞩目,我这里谈的写作能力,是指“能把业务说知道的力量”。并不是指“工学”,尽管,很多个人经常将双方如出一辙。

靠文字去传播经验和文化,这种写作不是远比无病呻吟更有能力吗?

Introduction

知乎云音乐于二〇一三年8月23日标准发布,是一款主打发现和享受,带有长远社交基因的网络音乐产品。相信用过的人都通晓它给人的经验是极好的,我看过了多数仿写的案例,基本UI都不够细致,于是决定自己出手写一个,发轫也不清楚具体它是怎么布局的,后来接纳SDK提供的工具uiautomatorviewer日趋分析后再渐渐周到的,争取效果一样~

在群众号写了1年的篇章后,我发现一个时常被人误会的本质:

抽屉界面

一心仿新浪云音乐抽屉界面,包括不少细节如透明标题栏,背景透明度,水波纹颜色等。

  • 类型主页:展现类型介绍音讯,及内容表明,可以享用给您的好友哦。
  • 扫码下载:扫码即可下载App,协助你急忙试用~
  • 题材上报:周边问题汇总,反馈地点,联系格局都在此地哦!
  • 有关云阅:更新日志在这边可见,主人是利用工作外时间做的,周期较长,满足的伴儿给个Star吧,这将是本人继续迭代的重力,谢谢~

至于写作的多少个误区#

CloudReader

一款基于乐乎云音乐UI,使用GankIo及豆瓣api开发的符合谷歌 Material
Desgin阅读类的开源项目。项目利用的是Retrofit + RxJava +
MVVM-DataBinding架构开发。开发中所际遇的各类题材已汇总在这里

github地址:CloudReader

已更新至V1.8.2

譬如说便秘.png

细节解析 – ToolBar 上的按钮点击效果

精心研讨的人知晓,乐乎云音乐的UI做的很精美,就拿一个ToolBar为例,上面的每个按钮的点击操作都有各自的功效。这给了用户一个很好的反映,就是之类的效能:

toolbar_click.gif

上图是在android
5.1体系下的功力图。在6.0上探寻的点击效果有稍许改变,其他基本接近;5.0以下点击则都显现出一般选拔器的功用。

唯独做到以上的效益并不易于,需要您对ToolBar有尖锐的刺探;不仅如此,水波纹的点击效果在不同的大旨下是有例外的变现。下边一起来谈谈怎么着达到以上的效率。

毋庸置疑,习惯的最先,确实是内需强大的定性去维持,因为这么些作为情势是您后边所没有的,如同婴孩需要怀胎十一月。

About me

  1. 暗示
  2. 不以为奇行为
  3. 奖励

干货(gank.io)

API使用的是动听(轮播图)和代码家的Gank.Io。

  • 每一日推荐:
    干货集中营推送的每一日内容,包括每一天一个妹子图,相关Android、IOS等其余干货。天天第12:30过后更新,因为双休不改进所以内容缓存三天网络取不到就取缓存。

  • 福利:
    Glide加载图片,点击查看大图,补助双指缩放,一下可查阅列表的富有图片,再也不用逐个点击每张图啦。

  • 干货订制:
    可以筛选自己喜欢干货的类型,有百分之百、IOS、App、前端、休息视频和拓展资源。

  • 大安卓: 突显安卓的全部信息。援助下拉刷新方便查看最新的资源。

等婴孩生活自理之后,需要你担心的事体会日趋缩短。

书籍(豆瓣)

拔取的是豆瓣的搜索API。更多订制内容由于岁月原因首先版还未添加,第二版会加上。

  • 综合: 检索豆瓣综合类的图书并展现。
  • 文学: 检索豆瓣管文学类的书本并体现。
  • 生活: 检索豆瓣生活类的书籍并呈现。

书中关系,那几个清爽味道本身并没有卫生功用,它最大的效用就是让让你认为温馨从刷牙里得到了利益

Thanks

率先,当咱们刚起床时,嘴里会倍感新鲜,不痛快:也许是今儿清晨遗留在嘴里的食物残渣,也许是因为上火嘴里有异味等等,正是那么些欠好受的觉得在指示着大家,似乎自己还有一件工作还没做到。

What can be learned about this project

这就是说,从本项目中你能学到哪些知识呢?

  • 1、干货集中营内容与豆瓣电影书籍内容。
  • 2、高仿新浪云音乐歌单详情页。
  • 3、NavigationView搭配DrawerLayout的切实可行运用。
  • 4、MvvM-DataBing的系列利用。
  • 5、RxBus代替伊夫ntBus举办零部件之间通讯。
  • 6、ToolBarTabLayout的施用姿势。
  • 7、Glide加载监听,获取缓存,圆角图形,高斯模糊。
  • 8、水波纹点击效果详细使用与适配。
  • 9、RecyclerView下拉刷新上拉加载。
  • 10、基于DataBindingViewHolder
  • 11、基于DataBindingBaseActivityBaseFragment
  • 12、Fragment懒加载情势。
  • 13、透明状态栏使用与版本适配。
  • 14、SwipeRefreshLayout结合RecyclerView下拉刷新上拉加载。
  • 15、CoordinatorLayout + Behavior落实标题栏渐变。
  • 16、NestedScrollView嵌套RecyclerView的使用。

每一日的刷牙是最好的例证

电影(豆瓣)

API是豆类提供的,因为限制了各类ip每分钟请求的次数,所以请酌定拔取,由此带动的紧巴巴请见谅。

  • 录像热映区: 天天更新,呈现最新播出的影片热度排名榜。
  • 豆子电影Top250: 豆瓣高分电影集锦,让您放心找好片~

紧缺耐心

学习技术的过程是内外起伏的曲线,而不是直线。

这就意味着,即便你很用力去写,但有点时日,你却感觉到温馨的水准没有在上升,反而是下跌。

正如李笑来老师在《把时光的爱侣》里说的这样,要有耐心

DownLoad

快捷跳转

download.png

跟着,我们开首每一日通常动作,就是刷牙,希望用洗刷去除异味。

关于ToolBar的布局

见状上图大家了然到一个ToolBar上有二种点击效果..

那就有点窘迫了..不急,我们逐渐来分析。利用SDK下的工具uiautomatorviewer可得知:左边的菜单按钮是ToolBar内部包裹的一个Fragment,其中是一个ImageView和一个小红点;然后中间是HorizontalScrollView,其中是五个ImageView;左侧的搜索键则是经过设置Menu菜单而来,这样会有长按弹出“搜索”二字的提示。

现统计出六个问题:1、ToolBar上按钮的设置;2、不同按钮点击的水波纹效果

对于1: ToolBar上按钮的装置

稍加研商了ToolBar的使用后获悉,可以从来在其里面包裹Imageview外,还足以由此菜单文件设置:

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

其中,main.xml内容如下:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/actionbar_search"// 显示图标
        android:orderInCategory="100"// 菜单显示优先级
        android:title="@string/actionbar_search"// Toast文字“搜索”
        app:showAsAction="always" />// 总是显示,其中还有"never"点击后弹出显示;``ifRoom``根据空间判断是否显示
</menu>

下一场再找到菜单相应的id处理点击事件:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_search:
//                Toast.makeText(this, "打开搜索页面", Toast.LENGTH_SHORT).show();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
 }

如此就完了了双方点击效果不同的拍卖。

对于2:今非昔比按钮点击的水波纹效果

此地不是选择ripple性能了,而是接纳系统自带的点击水波纹采取器,给要发生点击效果的控件设置:

android:background="?attr/selectableItemBackgroundBorderless"

唯独设置后你会发觉装有点击的颜色都是平等的,倘诺你采用主旨:

theme="@style/Theme.AppCompat.Light.NoActionBar"

点击效果就会整整是黑灰的,就是当中多少个按钮的那种效果,即便想要点击效果是反动的话,需要设置主旨:

theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

文学,知道这么后我们给不同的布局设置不同的主旨就迎刃而解了这些题材。最后布局文件:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorTheme"
        app:contentInsetStart="0.0dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <FrameLayout
            android:id="@+id/ll_title_menu"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="?attr/selectableItemBackgroundBorderless"
            android:paddingLeft="15dp"
            android:paddingRight="15dp">

            <ImageView
                android:id="@+id/iv_title_menu"
                android:layout_width="23dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:src="@drawable/titlebar_menu" />
        </FrameLayout>

        <HorizontalScrollView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="?attr/selectableItemBackgroundBorderless"
                app:theme="@style/Theme.AppCompat.Light.NoActionBar">

                <ImageView
                    android:id="@+id/iv_title_gank"
                    android:layout_width="55dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:src="@drawable/titlebar_disco" />

                <ImageView
                    android:id="@+id/iv_title_one"
                    android:layout_width="55dp"
                    android:layout_height="match_parent"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:src="@drawable/titlebar_music" />

                <ImageView
                    android:id="@+id/iv_title_dou"
                    android:layout_width="55dp"
                    android:layout_height="match_parent"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:src="@drawable/titlebar_friends" />

            </LinearLayout>

        </HorizontalScrollView>

 </android.support.v7.widget.Toolbar>

如此就收获了俺们想要的效劳~
更多细节优化我会逐步整理在Wiki文档,或你也可以间接查看源代码。

那么问题是,咋样才能在事情开头阶段就让大家养成一个习惯吗?

宝贵意见

假定有另外问题,请到github的issue处写上您不知情的地点,也得以透过上面提供的措施交换我,我会立马给予援助。其它常见的题材已总结在这里

咬牙做一件事其实很粗略。

效果图

  • 局部职能图

cloudreader.png

  • gif演示

cloudreader.gif

进一步舒适放松的心态
奖励自己吃一个高个子堡,喝一杯可乐
看一场真人秀
……

Statement

感谢和讯云音乐App提供参考,附上《新浪云音乐Android
3.0视觉设计规范文档》
。本人是果壳网云音乐的粉丝,使用了其中的部分资料,并非抨击,如整合侵权请立时通报自己修改或删除。大部分数量来自于干货集中营和豆瓣APIV2.0,一切数据解释权都归代码家和豆子所有。

一言九鼎来了,为何我们选拔的牙膏都在强调着,自己带有的成分是薄荷清香、冰爽…等等一些刺激性味道?

End

假诺您觉得不错,对你有扶持,可以帮助分享给您更多的爱侣,这是给我们最大的重力与匡助,同时愿意你多多fork,star,follow,我将贡献更多的开源项目O(∩_∩)O~。开源使生活更美好!

通晓习惯养成步骤之后,让我们回到如何作育自己习作习惯这件事上。

模块分析

《习惯的力量》里面涉及习惯的培训需要三步骤

养成习惯,重大是您要给自己的名堂做出反馈

高估事情初叶的费力

也许是读书时作文课自己拿过很不好的分数,也许是担心写作是否会显露自己不为人知的一头,又或者是心惊胆战自己写出来的事物根本未曾人看…很五个人都会拒绝我说服他们应当写点东西的指出。

但,相信自己,当你真正去做的时候,会发觉,原来写作并没有设想中那么困难,在此以前在脑公里描写的画面全都是友好的估计。

行文本质是自己思想情势和心境的外显。

当你把事情想精晓的时候,你很难会遭到写不出来的困境。

定的目的太高

本人知道,当大家想做出一些改观的时候,巴不得立马就看看效益。

于是乎,大家日常会满怀雄心壮志去写,可是,在这种境况,你又频繁写不佳。

专程是您首先次尝试写作品时候。

比如想写出孙女雅观缠绕在投机心中,你当然想写出

最是那一投降的平易近人,恰似水仙花不胜凉风的羞涩。

结果写出来却是

想来想去,还只是想睡你。

企望定太高,很容易造成落差,造成挫败感。

釜底抽薪这么些问题,方法也是很粗略,只是需要一个真相:没有人一伊始就能写好作品。

当你接受自己的不圆满,接受自己写出来的事物根本无助的时候,你会惊喜发现,原本自己眼前只会发展

习惯也一致,开展一段时间,就会变成自然则然的事情。

总结

事实上,坚持不渝一件很简单。

  1. 将对象拆分,先定一个小目的,比如我当年先写50篇著作看看,接着将那么些目标拆分,换算成一星期日篇,或者一周两篇,要让对象划分到可以明天就举行操作。

  2. 要有暗示,用某种东西指示自己。例如我会规定周末仍然放假就要写东西,所以每当周末的时候,这么些日子段就会形成一个提拔工具。

  3. 要有奖励。就像打游戏,每回通关的时候,都会有的得以看得见的褒奖:经验条猛涨、豪华装备、充满豪情的音乐…这一个是当做一个反馈机制所存在,让玩家觉得以前的鼎力不曾白费。而养成一个熟视无睹也需要这样,你每完成一个阶段性目标,能够奖励一下团结,经常尚无去做,却又恨不得做的工作。比如吃个雪糕、看个电视机等。

与其说,现在就开头写点东西试试?

究竟,连本人都足以了…

席卷平日我们洗澡时用沐浴露的泡沫,这么些泡沫本身也并不持有清洁效果,只是让您以为洗澡用沐浴露这件事,真的可行

在我们体会当中,会默认坚持不渝同等强大的恒心。

t0103c2b078c6734c26.jpg

full.jpg

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图