一个妙不可言的干货集中营客户端的成形,一款基于今日头条云音乐UI

CloudReader

一款基于博客园云音乐UI,使用GankIo及豆瓣api开发的适合谷歌(Google) Material
Desgin阅读类的开源项目。项目选择的是Retrofit + RxJava +
MVVM-DataBinding架构开发。开发中所碰到的种种难题已汇总在这里

github地址:CloudReader

已更新至V1.8.2

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

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

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


自定义 viewgroup+viewdraghelper
仿探探卡片式滑动,完成卡片的加大和裁减画面以及去除效果

一个理想的干货集中营客户端的生成,集合了干货 api
的半数以上效应


Rxjava,Retrofit,伊夫ntBus,ButterKnife
的一一出彩开源框架的长处而发出的事物,自己学一个做到客户端从上马的布署性,调研,都后来的编码,还有一些近似不难其实照旧有点麻烦的小细节的兑现,整个工艺流程一下去是可以学到很多事物的,和激发起自己的重重思索,那也是自身认为做这几个最重点的地方。所以做这一个东西还有蛮有含义的,越发是一对细节,所对分类的排序怎样过度好,点击图片的转场动画,沉浸式状态栏的,和
android5.0
的新控件的使用等等的这几个细节都是近乎不难其实仍旧要花点力气的。其余用新的东西练练手也是很紧要的。

高仿钉钉和OPPO的日历控件


那是一个高仿钉钉和索尼爱立信的日历控件,协理高效滑动,界面缓存。想要定制化
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)正式开源


由锤子科技(science and technology)开发的 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 完毕一屏彰显三个页面的意义

仿天猫、京东拖拽商品详情(可嵌套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

相关文章