一个大好的干货集中营客户端的变更,腾讯网云音乐于二〇一三年三月23日业内发表

CloudReader

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

github地址:CloudReader

已履新至V1.8.2

Android 仿京东、天猫商城 app 的商品详情页的布局架构, 以及作用已毕

仿京东、Tmall app 的商品详情页

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


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

一个一语双关的干货集中营客户端的浮动,集合了干货 api
的绝一大半功能


Rxjava,Retrofit,伊夫(Eve)ntBus,ButterKnife
的相继出彩开源框架的独到之处而暴发的事物,自己学一个落成客户端从起先的统筹,调研,都后来的编码,还有部分好像简单其实依然有点麻烦的小细节的落到实处,整个工艺流程一下去是可以学到很多事物的,和激发起自己的诸多思索,那也是自个儿觉得做这几个最重大的地方。所以做这一个东西还有蛮有意义的,尤其是部分细节,所对分类的排序如何过度好,点击图片的转场动画,沉浸式状态栏的,和
android5.0
的新控件的选取等等的这个细节都是看似不难其实照旧要花点力气的。其它用新的东西练练手也是很要紧的。

高仿钉钉和HTC的日历控件


那是一个高仿钉钉和中兴的日历控件,帮忙快速滑动,界面缓存。想要定制化
UI,使用起来相当简单,就好像使用 ListView 一样

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


接纳着 谷歌 一向的 “开源精神”,大家决定陆续向 “谷歌(谷歌)开发者 “
微信公众号的订阅者分享: 2016 谷歌 开发者大会 6 个分会场 28
个宗旨的演说 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
仿新浪的开源项目


看看众多大神纷纭有了和睦的开源项目,于是自己雕刻着也想做一个开源项目来学学下,因为每一次无聊必刷的
app
就是今日头条,评论几乎比内容都完美,所以我打算仿乐乎来练练手,时期也曾放弃过,也赶上不少坑,拿出去跟我们享用一下,喜欢的记得给个
Star,当作是给自身的鼓励和引力吧。

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


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

TabLayout 和 CoordinatorLayout
相结合的折叠控件


CoordinatorTabLayout 是一个自定义组合控件, 可飞快完毕 TabLayout 与
CoordinatorLayout 相结合的样式
接二连三至 CoordinatorLayout, 在该控件上面采纳了 CollapsingToolbarLayout
包蕴 TabLayout

支配 RecyclerView Item
停留地方(居中?左对齐?)


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

Android
让你的布局飞起来


Android 让你的布局飞起来

食谱开源库装逼大全


近年在看一个 GanNew
的开源代码,然后发现有个菜单,效果还挺雅观的,没看代码以前,我还想着是怎么落实的,我先是想开了共享元素,然后一看代码,发现原来是个开源库。好呢,然后就去寻觅有没有更有意思的菜系,就记下一些找到的,将来有亟待也可以加入,或者拿来探望代码。讲道理,也是挺好的

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


图形加载是 Android
开发中最最基础的效用,为了降低开发周期和难度,我们日常会接纳一些图纸加载的开源库

高仿蘑菇街欢迎页


高仿蘑菇街欢迎页

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


云阅:一款基于今日头条云音乐 UI,使用 Gank.Io 及豆类 api 开发的合乎 GoogleMaterial Design 的 Android 开源项目。项目应用的是 MVVM-DataBinding
架构开发,现主要包蕴:干货区、电影区和书籍区三个子模块。

怎么着优雅的完毕 RecyclerView
多种搭架子


要优雅就要顺应
开闭原则,单一任务,当增加新的门类时不得不增加不可能修改源代码。每扩展一种
view 要新增一个类来兑现

ViewPager
怎样达成一屏出示两个页面


ViewPager 落成一屏展现几个页面的机能

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


对于电商App,商品详情无疑是很关键的一个模块,观看主流购物App的详情界面,发现多数都是做成了内外两有些,上边突显商品规格音讯,上边是H5商品详情,或者是嵌套了一个饱含H5详情及评论列表的ViewPager界面,本文就是落实了一个匹配差距需要的前后滚动黏滞View控件。Gi…

【Andrid】像微信同样的图纸选拔器


【Andrid】像微信一模一样的图样拔取器

【Android】像微信一样录制视频和旋律


重构 MediaRecorder

史上最牛逼的音乐播放器—仿天涯论坛云音乐(已开源)


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

报纸公布录顶部固定的目录效果


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

效果图

  • 有的功能图

cloudreader.png

  • gif演示

cloudreader.gif

Introduction

博客园云音乐于二零一三年一月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代替伊芙ntBus进行零部件之间通信。
  • 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

Statement

感谢今日头条云音乐App提供参考,附上《乐乎云音乐Android
3.0视觉设计规范文档》
。本人是博客园云音乐的粉丝,使用了其中的有些材料,并非抨击,如构成侵权请登时通告我修改或删除。大多数数额出自于干货集中营和豆瓣APIV2.0,一切数据解释权都归代码家和豆子所有。

End

假诺你认为不错,对您有救助,可以援助分享给你更加多的情人,那是给大家最大的引力与协理,同时愿意你多多fork,star,follow,我将贡献越多的开源项目O(∩_∩)O~。开源使生活更美好!

About me

相关文章