2018年全年资料大全《云阅》一个仿网易云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目

CloudReader

同等缓慢基于网易云音乐UI,使用GankIo及豆瓣api开发的入Google Material
Desgin阅读类的开源项目。项目采取的是Retrofit + RxJava +
MVVM-DataBinding架构开发。开发被所遇到的各种问题早就汇总在这里。

github地址:CloudReader

曾更新到V1.8.2

效果图

  • 有意义图

cloudreader.png

  • gif演示

cloudreader.gif

Introduction

网易云音乐给2013年4月23日正式发布,是相同慢主打发现跟享用,带有浓厚社交基因的纱音乐产品。相信用了之口还亮它吃丁之体会是绝好的,我看了了大部分仿写的案例,基本UI都未足够细致,于是决定自己下手写一个,起初为未晓具体它是怎布局的,后来使SDK提供的家伙uiautomatorviewer逐渐分析后重新慢慢完善之,争取效果一样~

模块分析

干货(gank.io)

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

  • 每天推荐:
    干货集中营推送的每日内容,包括每天一个妹妹图,相关Android、IOS等任何干货。每天第12:30下更新,因为双休不更新所以情缓存三龙网络取不交就获得缓存。

  • 福利:
    Glide加载图片,点击查阅大图,支持双指缩放,一下但查列表的拥有图片,再为无用逐个点击每张图啦。

  • 干货订制:
    可以筛选好好干货的品种,有一切、IOS、App、前端、休息视频以及开展资源。

  • 大安卓: 显示安卓底百分之百新闻。支持下拉刷新方便查看时的资源。

电影(豆瓣)

API是豆瓣提供的,因为限了每个ip每分钟要的次数,所以恳请酌定采用,由此带来的困顿请见谅。

  • 电影热映区: 每日更新,展示时播出的影视热度排行榜。
  • 豆类电影Top250: 豆瓣大划分电影集锦,让您放心找好片~

书籍(豆瓣)

以的是豆类的搜索API。更多订制内容由时日原因首先本子还不添加,第二本子会加上。

  • 综合: 检索豆瓣综合类的图书并展示。
  • 文学: 检索豆瓣文学类的书籍并出示。
  • 生活: 检索豆瓣生活类的书本并展示。

抽屉界面

全然仿网易云音乐抽屉界面,包括多细节而透明标题栏,背景透明度,水波纹颜色相当。

  • 类型主页:显类型介绍信息,及内容说明,可以大快朵颐给您的好友哦。
  • 扫码下载:扫码即可下载App,帮助你快试用~
  • 题目反馈:常见问题汇总,反馈地方,联系方式都于此间哦!
  • 有关云阅:更新日志在这里可见,主人是使用工作他时开的,周期比较丰富,满意的伴儿给个Star吧,这将是自我累迭代的动力,谢谢~

What can be learned about this project

那,从本项目中而能够效仿到什么文化也?

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

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

有心人研究的人口懂得,网易云音乐之UI做的深精致,就以一个ToolBar也条例,上面的每个按钮的点击操作都起分别的效应。这让了用户一个格外好之报告,就是之类的意义:

toolbar_click.gif

达到图是在android
5.1系下之效用图。在6.0达找的点击效果有微改变,其他中心接近;5.0盖生点击则还见来一般选择器的职能。

而是就以上的效能并无爱,需要您对ToolBar发生尖锐之问询;不仅如此,水波纹的点击效果在不同的主题下是发出两样之变现。下面一起来讨论如何达到以上之效应。

关于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文档,或你呢得以一直查看源代码。

DownLoad

敏捷跳转

download.png

宝贵意见

如若发生其他问题,请到github的issue处形容上而莫亮堂的地方,也堪透过下提供的方式沟通我,我会立马给予帮助。另外常见的题材已经总结在这里。

Thanks

  • 图表参考:iconfont、UI工程师Sandawang暨2018年全年资料大全网易云音乐App。

  • 参照项目:ImitateNetEasyCloud、banya;主要数据来自:Gank.Io、豆瓣Api。

  • 动用到的开源库:glide、bottomsheet、nineoldandroids、rxandroid等等。

  • 感谢代码家、张鸿洋、drakeet、yang747046912、GiitSmile、forezp抵很多开发者贡献的开源项目,让自己从中学到了众多!

Statement

感谢网易云音乐App提供参考,附上《网易云音乐Android
3.0视觉设计规范文档》。本人是网易云音乐的粉丝,使用了内部的一对材料,并非抨击,如整合侵权请即通报本人修改或者去。大部分数额来于干货集中营和豆瓣APIV2.0,一切数据解释权都归代码家和豆子所有。

End

假若你道对,对君生帮衬,可以扶持分享给你还多之对象,这是于我们最好深的动力和支持,同时希望您多多fork,star,follow,我以献更多的开源项目O(∩_∩)O~。开源而生活更美好!

About me

  • CSDN:Jingbin_
  • Blog:http://jingbin.me
  • Email:jingbin127@163.com
  • GitHub:https://github.com/youlookwhat

发表评论

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