一款基于新浪云音乐UI,三个精美的干货集中营客户端的转移

CloudReader

一款基于乐乎云音乐UI,使用GankIo及豆瓣api开发的适合谷歌(Google) Material
Desgin阅读类的开源项目。项目接纳的是Retrofit + HavalxJava +
MVVM-DataBinding架构开发。开发中所遭逢的各个难点已汇总在这里

github地址:CloudReader

已更新至V1.8.2

Android 仿京东、Taobao app 的商品详情页的布局架构, 以及功效已毕

仿京东、天猫商城 app 的商品详情页

自定义 viewgroup+viewdraghelper
仿探探卡片式滑动


自定义 viewgroup+viewdraghelper
仿探探卡片式滑动,已毕卡片的推广和裁减画面以及去除效果

贰个良好的干货集中营客户端的变迁,集合了干货 api
的大部分效用


RAV4xjava,Retrofit,伊夫ntBus,ButterKnife
的一一出彩开源框架的长处而发出的事物,自身学1个到位客户端从上马的安顿性,调研,都后来的编码,还有一些近似简单其实依旧有点麻烦的小细节的贯彻,整个流程一下去是足以学到很多东西的,和激发起本人的很多构思,那也是本身以为做那几个最根本的地点。所以做那几个事物还有蛮有意义的,尤其是一些细节,所对分类的排序如何过度好,点击图片的转场动画,沉浸式状态栏的,和
android5.0
的新控件的利用等等的这几个细节都是相仿简单其实如故要花点力气的。别的用新的事物练练手也是很要紧的。

高仿钉钉和中兴的日历控件


那是一个高仿钉钉和金立的日历控件,辅助高速滑动,界面缓存。想要定制化
UI,使用起来非凡不难,就像是使用 ListView 一样

Android 开发中的电量和内存优化 (谷歌 开发者大会演讲 PPT &
摄像)


拔取着 谷歌(Google) 一直的 “开源精神”,大家决定陆续向 “谷歌(谷歌(Google))开发者 “
微信公众号的订阅者分享: 2015 谷歌 开发者大会 6 个分会场 三十多个宗旨的解说 PPT。供全部中国开发者学习、分享、共同成长,希望你能从中收益:-)

Android 简易悬停抽屉控件 ——
仿微博收藏夹


那是二个平底抽屉,类似搜狐收藏夹。它可以告一段落在中等,随着滑动自然过渡到全屏。

Retrotfit2.1+Material Design+ijkplayer
APP


Retrotfit2.1+Material Design+ijkplayer APP

蛋疼:UI
布局重构的多少个思想


座谈在 ui 布局重构进度中的多少个思维。

30+ 精致的 APP
运维页欣赏


APP 运维页欣赏

Android
仿博客园详情页达成


Android 仿新浪详情页落成

仿茄子快传的一款文件传输应用


快传是模拟 茄子快传来完结的, 紧假设是通过配备间发送文书。
文件传输在文书发送端大概是文件接收端通过自定义协议的 Socket
通讯来兑现。

一步(One
Step)正式开源


由锤子科学和技术开发的 One Step 正式开源。

【Android 开发技术】利用
ViewPager,打造差其他广告(月度账单)轮播切换效果


【Android 开发技术】利用
ViewPager,营造不均等的广告(月度账单)轮播切换效果

Android
仿微博的开源项目


见状许多大神纷纭有了协调的开源项目,于是自身研讨着也想做2个开源项目来上学下,因为老是无聊必刷的
app
就是新浪,评论大约比内容都了不起,所以笔者打算仿腾讯网来练练手,时期也曾扬弃过,也遇上不少坑,拿出去跟我们分享一下,喜欢的记得给个
Star,当作是给自家的鞭策和动力吧。

仿新浪云音乐播放界面


仿今日头条云音乐播放界面

TabLayout 和 CoordinatorLayout
相结合的折叠控件


CoordinatorTabLayout 是2个自定义组合控件, 可赶快达成 TabLayout 与
CoordinatorLayout 相结合的体制
接轨至 CoordinatorLayout, 在该控件下边选用了 CollapsingToolbarLayout
包罗 TabLayout

控制 RecyclerView Item
停留地点(居中?左对齐?)


在动用 RecyclerView 作为2个横向滑动控件时,有时对滑动后 RecyclerView
中的 Item 停留地点有须要,如梦想 Item 居中等

Android
让你的布局飞起来


Android 让你的布局飞起来

食谱开源库装逼大全


目前在看二个 GanNew
的开源代码,然后发现有个菜单,效果还挺赏心悦目的,没看代码从前,作者还想着是怎么落到实处的,作者第③想开了共享成分,然后一看代码,发现原来是个开源库。好吧,然后就去探寻有没有更有趣的食谱,就记下一些找到的,将来有必要也能够投入,只怕拿来探望代码。讲道理,也是挺好的

Android
图片加载库的包裹实战之路


图片加载是 Android
开发中最最基础的作用,为了下落开发周期和难度,我们平常会选取一些图片加载的开源库

高仿蘑菇街欢迎页


高仿蘑菇街欢迎页

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


云阅:一款基于博客园云音乐 UI,使用 Gank.Io 及豆类 api 开发的合乎 谷歌Material Design 的 Android 开源项目。项目应用的是 MVVM-DataBinding
架构开发,现重大不外乎:干货区、电影区和书籍区三个子模块。

何以优雅的兑现 RecyclerView
各类搭架子


要优雅就要符合
开闭原则,单一义务,当扩大新的门类时不得不伸张无法修改源代码。每扩张一种
view 要新增多少个类来落到实处

ViewPager
怎么样形成一屏显得多个页面


ViewPager 达成一屏突显多少个页面的效果

仿Taobao、京东拖拽商品详情(可嵌套ViewPager、ListView、WebView、FragmentTabhost)


对于电商App,商品详情无疑是很重大的三个模块,观看主流购物App的详情界面,发现一大半都以做成了前后两部分,上边显示商品规格音信,上面是H5商品详情,或然是嵌套了2个暗含H5详情及评论列表的ViewPager界面,本文就是落实了二个郎才女貌差异需要的光景滚动黏滞View控件。Gi…

【Andrid】像微信一样的图形选用器


【Andrid】像微信同样的图片选用器

【Android】像微信一模一样录像视频和音频


重构 MediaRecorder

史上最牛逼的音乐播放器—仿搜狐云音乐(已开源)


随便下载模块,如故换肤模块,还是炫丽的 UI 界面

广播发布录顶部固定的目录效果


通讯录和城市列表展现时通用的滑行顶部固定的目录列表效果

效果图

  • 一部分功力图

cloudreader.png

  • gif演示

cloudreader.gif

Introduction

新浪云音乐于二〇一三年一月2二日正规发表,是一款主打发现和享受,带有深刻社交基因的互连网音乐产品。相信用过的人都知道它给人的心得是极好的,作者看过了多数仿写的案例,基本UI都不够细致,于是决定本人入手写三个,起先也不晓得具体它是怎么布局的,后来采用SDK提供的工具uiautomatorviewer日益分析后再逐渐周详的,争取效果等同~

模块分析

干货(gank.io)

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

  • 每天推荐:
    干货集中营推送的每一日内容,包涵每一日1个三妹图,相关Android、IOS等其余干货。每一天第贰2:30之后更新,因为双休不更新所以内容缓存3十二日互连网取不到就取缓存。

  • 福利:
    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做的很精美,就拿1个ToolBar为例,上边的每种按钮的点击操作都有各自的成效。那给了用户一个很好的上报,就是之类的听从:

toolbar_click.gif

上图是在android
5.1系统下的效益图。在6.0上搜寻的点击效果有微微改变,其余主题相仿;5.0以下点击则都表现出一般拔取器的机能。

唯独做到以上的效率并不便于,必要您对ToolBar有深入的摸底;不仅如此,水波纹的点击效果在差其余核心下是有例外的展现。下边一起来谈谈怎么样达先生到以上的成效。

关于ToolBar的布局

观看上图我们询问到1个ToolBar上有两种点击效果..

那就有点窘迫了..不急,大家逐步来分析。利用SDK下的工具uiautomatorviewer可得知:左边的菜单按钮是ToolBar内部包裹的2个Fragment,其中是二个ImageView和二个小红点;然后中间是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

相关文章