博客园云音乐于二零一三年三月2二十三日标准宣布,还有一对像样简单其实依旧有点麻烦的小细节的兑现

CloudReader

一款基于搜狐云音乐UI,使用GankIo及豆瓣api开发的适合谷歌 Material
Desgin阅读类的开源项目。项目选取的是Retrofit + 奥迪Q3xJava +
MVVM-DataBinding架构开发。开发中所遭逢的各类难点已汇总在这里

github地址:CloudReader

已更新至V1.8.2

Android 仿京东、天猫商城 app 的商品详情页的布局架构, 以及成效完结

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

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


自定义 viewgroup+viewdraghelper
仿探探卡片式滑动,完成卡片的松手和紧缩画面以及去除效果

1个理想的干货集中营客户端的成形,集合了干货 api
的绝超过贰分一作用


汉兰达xjava,Retrofit,伊芙ntBus,ButterKnife
的相继出彩开源框架的帮助和益处而产生的事物,自身学三个成就客户端从开头的布署性,调查商讨,都后来的编码,还有一对近乎不难其实还是有点麻烦的小细节的贯彻,整个工艺流程一下来是足以学到很多事物的,和激发起自个儿的过多盘算,那也是自身觉得做那个最注重的地方。所以做这些事物还有蛮有含义的,尤其是一些细节,所对分类的排序如何过度好,点击图片的转场动画,沉浸式状态栏的,和
android5.0
的新控件的运用等等的那个细节都以相近容易其实依然要花点力气的。其它用新的事物练练手也是很主要的。

高仿钉钉和HUAWEI的日历控件


那是3个高仿钉钉和诺基亚的日历控件,援救高速度滑冰动,界面缓存。想要定制化
UI,使用起来格外不难,就如使用 ListView 一样

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


秉承着 谷歌 一直的 “开源精神”,大家决定陆续向 “谷歌开发者 “
微信公众号的订阅者分享: 二零一六 谷歌(Google) 开发者大会 6 个分会场 贰拾1个核心的解说 PPT。供全数中中原人民共和国开发者学习、分享、共同成长,希望您能从中收益:-)

Android 简易悬停抽屉控件 ——
仿果壳网收藏夹


那是一个平底抽屉,类似腾讯网收藏夹。它能够告一段落在中等,随着滑动自然过渡到全屏。

Retrotfit2.1+Material Design+ijkplayer
APP


Retrotfit2.1+Material Design+ijkplayer APP

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


切磋在 ui 布局重构进程中的多少个考虑。

30+ 精致的 APP
运维页欣赏


APP 运维页欣赏

Android
仿博客园详情页达成


Android 仿今日头条详情页实现

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


快传是仿照 茄子快传来实现的, 首若是是通过设备间发送文书。
文件传输在文书发送端恐怕是文本接收端通过自定义协议的 Socket
通讯来兑现。

一步(One
Step)正式开源


由锤子科技(science and technology)开发的 One Step 正式开源。

【Android 开发技术】利用
ViewPager,构建分裂的广告(月度账单)轮播切换效果


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

Android
仿今日头条的开源项目


看样子不少大神纷繁有了祥和的开源项目,于是自身雕刻着也想做2个开源项目来读书下,因为每一趟无聊必刷的
app
正是先天头条,评论大约比内容都非凡,所以自身打算仿新浪来练练手,时期也曾扬弃过,也碰着重重坑,拿出来跟大家分享一下,喜欢的回忆给个
Star,当作是给本人的砥砺和重力吗。

仿乐乎云音乐广播界面


仿天涯论坛云音乐广播界面

TabLayout 和 CoordinatorLayout
相结合的折叠控件


CoordinatorTabLayout 是一个自定义组合控件, 可快速完结 TabLayout 与
CoordinatorLayout 相结合的样式
后续至 CoordinatorLayout, 在该控件下边选拔了 CollapsingToolbarLayout
包罗 TabLayout

决定 RecyclerView Item
停留地点(居中?左对齐?)


在行使 RecyclerView 作为一个横向滑动控件时,有时对滑动后 RecyclerView
中的 Item 停留地点有须求,如愿意 Item 居中等

Android
让你的布局飞起来


Android 让你的布局飞起来

菜单开源库装逼大全


近年在看1个 GanNew
的开源代码,然后发现有个菜单,效果还挺赏心悦目的,没看代码在此之前,笔者还想着是怎么落到实处的,笔者先是想开了共享成分,然后一看代码,发现原来是个开源库。好吧,然后就去摸索有没有更好玩的菜系,就记下一些找到的,未来有须要也能够插足,可能拿来看望代码。讲道理,也是挺好的

Android
图片加载库的卷入实战之路


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

高仿蘑菇街欢迎页


高仿蘑菇街欢迎页

《云阅》三个仿天涯论坛云音乐 UI,使用 Gank.Io 及豆类 Api
开发的开源项目


云阅:一款基于新浪云音乐 UI,使用 Gank.Io 及豆类 api 开发的合乎 谷歌(Google)Material Design 的 Android 开源项目。项目应用的是 MVVM-DataBinding
架构开发,现主要回顾:干货区、电影区和书籍区几个子模块。

怎么优雅的兑现 RecyclerView
二种布局


要优雅就要吻合
开闭原则,单一职责,当增添新的花色时不得不扩充无法修改源代码。每增添一种
view 要新增贰个类来兑现

ViewPager
如何是好到一屏出示多少个页面


ViewPager 达成一屏呈现多个页面包车型地铁效用

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


对于电商App,商品详情无疑是很要紧的三个模块,阅览主流购物App的详情界面,发现多数都是做成了上下两局地,上边突显商品规格音信,下边是H5商品详情,恐怕是嵌套了1个带有H5详情及评论列表的ViewPager界面,本文正是兑现了多少个匹配不相同供给的左右滚动黏滞View控件。Gi…

【Andrid】像微信一样的图片采纳器


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

【Android】像微信同样摄像摄像和旋律


重构 MediaRecorder

史上最牛逼的音乐播放器—仿今日头条云音乐(已开源)


不论下载模块,依然换肤模块,依然炫丽的 UI 界面

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


通信录和都市列表展现时通用的滑动顶部固定的目录列表效果

效果图

  • 有些成效图

cloudreader.png

  • gif演示

cloudreader.gif

Introduction

微博云音乐于2011年11月2七日正式公告,是一款主打发现和享受,带有深切社交基因的网络音乐产品。相信用过的人都明白它给人的感受是极好的,小编看过了多数仿写的案例,基本UI都不够细致,于是决定自个儿入手写贰个,起首也不明白具体它是怎么布局的,后来采取SDK提供的工具uiautomatorviewer日趋分析后再逐月周全的,争取效果同样~

模块分析

干货(gank.io)

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

  • 每天推荐:
    干货集中营推送的每天内容,包罗天天一个妹子图,相关Android、IOS等其他干货。每日第②2:30随后更新,因为双休不创新所以内容缓存三日互联网取不到就取缓存。

  • 福利:
    Glide加载图片,点击查看大图,帮衬双指缩放,一下可查阅列表的装有图片,再也不用各种点击每张图啦。

  • 干货订制:
    能够筛选自身喜爱干货的花色,有方方面面、IOS、App、前端、休息录制和进展能源。

  • 大安卓: 突显安卓的上上下下谍报。辅助下拉刷新方便查看最新的财富。

电影(豆瓣)

API是豆类提供的,因为限制了每一个ip每分钟请求的次数,所以请酌定选择,由此推动的诸多不便请见谅。

  • 影片热映区: 天天更新,展示最新播出的电影热度排行榜。
  • 豆瓣电影Top250: 豆瓣高分电影集锦,让您放心找好片澳门娱乐网上平台,~

书籍(豆瓣)

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

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

抽屉界面

一心仿博客园云音乐抽屉界面,包含广大细节如透明标题栏,背景发光度,水波纹颜色等。

  • 项目主页:体现类型介绍新闻,及内容表明,能够大快朵颐给你的好友哦。
  • 扫码下载:扫码即可下载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做的很精妙,就拿三个ToolBar为例,下面的每一个按钮的点击操作都有个别的意义。那给了用户二个很好的报告,就是之类的机能:

toolbar_click.gif

上航海用教室是在android
5.1系统下的功用图。在6.0上搜索的点击效果有稍许改变,其余大旨相仿;5.0以下点击则都显现出一般选取器的效用。

可是做到以上的效果并不易于,需求你对ToolBar有尖锐的精通;不仅如此,水波纹的点击效果在不相同的核心下是有差其他表现。下边一起来研商怎么样达先生到以上的效果。

关于ToolBar的布局

探望上海教室大家掌握到三个ToolBar上有三种点击效果..

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