《云阅》八个仿腾讯网云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目

CloudReader

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

github地址:CloudReader

已履新至V1.8.2

效果图

  • 有个别效益图

cloudreader.png

  • gif演示

cloudreader.gif

Introduction

乐乎云音乐于二〇一二年3月230日标准发布,是一款主打发现和享受,带有深远社交基因的互连网音乐产品。相信用过的人都清楚它给人的体验是极好的,作者看过了多数仿写的案例,基本UI都不够细致,于是决定自身出手写多个,起头也不亮堂具体它是怎么布局的,后来利用SDK提供的工具uiautomatorviewer渐渐分析后再渐渐完善的,争取效果一样~

模块分析

干货(gank.io)

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

  • 每天推荐:
    干货集中营推送的天天内容,蕴含每日2个妹子图,相关Android、IOS等其余干货。每日第22:30自此更新,因为双休不更新所以内容缓存二十四日网络取不到就取缓存。

  • 福利:
    Glide加载图片,点击查看大图,匡助双指缩放,一下可查看列表的兼具图片,再也不用各个点击每张图啦。

  • 干货订制:
    可以筛选自身喜好干货的类型,有整套、IOS、App、前端、休息摄像和开展能源。

  • 大安卓: 显示安卓的百分百信息。支持下拉刷新方便查看最新的能源。

电影(豆瓣)

API是豆类提供的,因为限制了种种ip每分钟请求的次数,所以请酌定接纳,因而牵动的不便请见谅。

  • 影片热播区: 每一天更新,浮现最新播出的电影热度排名榜。
  • 豆类电影Top250: 豆瓣高分电影集锦,让您放心找好片~

书籍(豆瓣)

使用的是豆瓣的搜索API。更加多订制内容由于时间原因首先版还未添加,第贰版会添加。

  • 综合: 检索豆瓣综合类的图书并出示。
  • 文学: 检索豆瓣管工学类的书本并显示。
  • 生活: 检索豆瓣生活类的书本并突显。

抽屉界面

一心仿和讯云音乐抽屉界面,包涵广大细节如透明标题栏,背景折射率,水波纹颜色等。

  • 项目主页:体现类型介绍音信,及内容表明,可以享受给您的好友哦。
  • 扫码下载:扫码即可下载App,辅助你火速试用~
  • 标题反映:大规模难点归纳,反馈地点,联系形式都在那里哦!
  • 有关云阅:创新日志在那边可知,主人是运用工作外时间做的,周期较长,满足的伴儿给个Star吧,那将是本人继续迭代的引力,感激~

What can be learned about this project

那就是说,从本项目中你能学到哪些文化呢?

  • 一 、干货集中营内容与豆瓣电影书籍内容。
  • 二 、高仿乐乎云音乐歌单详情页。
  • 3、NavigationView搭配DrawerLayout的切实选用。
  • 肆 、MvvM-DataBing的项目利用。
  • 伍 、冠道xBus代替伊夫ntBus举行零部件之间通信。
  • 6、ToolBarTabLayout的行使姿势。
  • 7、Glide加载监听,获取缓存,圆角图形,高斯模糊。
  • ⑧ 、水波纹点击效果详细使用与适配。
  • 9、RecyclerView下拉刷新上拉加载。
  • 10、基于DataBindingViewHolder
  • 11、基于DataBindingBaseActivityBaseFragment
  • 12、Fragment懒加载情势。
  • 1③ 、透明状态栏使用与版本适配。
  • 14、SwipeRefreshLayout结合RecyclerView下拉刷新上拉加载。
  • 15、CoordinatorLayout + Behavior一路平安标题栏渐变。
  • 16、NestedScrollView嵌套RecyclerView的使用。

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

仔细商量的人通晓,乐乎云音乐的UI做的很精致,就拿2个ToolBar为例,下面的各个按钮的点击操作都有分其他功能。那给了用户3个很好的举报,就是之类的成效:

toolbar_click.gif

上图是在android
5.1系统下的成效图。在6.0上探寻的点击效果有多少改变,其余基本类似;5.0以下点击则都显现出一般选取器的功用。

然而做到以上的意义并不便于,需求你对ToolBar有深深的打听;不仅如此,水波纹的点击效果在区其他主题下是有两样的展现。上面一起来探究怎样达(英文名:hé dá)到以上的功用。

关于ToolBar的布局

看样子上图大家询问到三个ToolBar上有二种点击效果..

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

现总括出五个难点:壹 、ToolBar上按钮的装置;二 、不一样按钮点击的水波纹效果

对于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文档,或你也能够一贯查看源代码。

DownLoad

敏捷跳转

download.png

宝贵意见

比方有任何难题,请到github的issue处写上您不领会的地点,也可以通过上边提供的不二法门挂钩笔者,小编会立马给予辅助。此外常见的题材已总括在这里

Thanks

Statement

感谢乐乎云音乐App提供参考,附上《今日头条云音乐Android
3.0视觉设计规范文档》
。本身是天涯论坛云音乐的观者,使用了中间的有个别材料,并非抨击,如结合侵权请登时文告本人修改或删除。大多数数目来源于干货集中营和豆瓣APIV2.0,一切数据解释权都归代码家和豆类全体。

End

只要你觉得不错,对您有救助,可以资助分享给你更加多的爱侣,那是给我们最大的引力与辅助,同时期待您多多fork,star,follow,小编将进献越多的开源项目O(∩_∩)O~。开源使生活更美好!

About me

发表评论

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