CloudReader

一款基于和讯云音乐UI,使用GankIo及豆瓣api开发的符合谷歌 Material
Desgin阅读类的开源项目。项目利用的是Retrofit + 猎豹CS6xJava +
MVVM-DataBinding框架结构开发。开发中所碰到的各个题材已汇总在这里

github地址:CloudReader

已更新至V1.8.2

Android 仿京东、Tmall app 的商品详情页的布局架构, 以及效能实现

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

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


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

多个完好无损的干货集中营客户端的成形,集合了干货 api
的大多数作用


景逸SUVxjava,Retrofit,伊芙ntBus,ButterKnife
的一一出彩开源框架的优点而发出的事物,本身学多少个完事客户端从初步的规划,调查钻探,都后来的编码,还有一对类似简单其实照旧有点麻烦的小细节的兑现,整个工艺流程一下去是能够学到很多事物的,和激发起本人的广大商讨,那也是本身觉着做这几个最重点的地点。所以做那一个东西还有蛮有含义的,特别是有个别细节,所对分类的排序怎么样过度好,点击图片的转场动画,沉浸式状态栏的,和
android5.0
的新控件的使用等等的这一个细节都以类似不难其实照旧要花点力气的。别的用新的事物练练手也是很重点的。

高仿钉钉和BlackBerry的日历控件


这是三个高仿钉钉和Samsung的日历控件,帮助神速度滑冰动,界面缓存。想要定制化
UI,使用起来极度简单,就如使用 ListView 一样

Android 开发中的电量和内部存款和储蓄器优化 (Google 开发者大会发言 PPT &
录像)


选取着 谷歌(Google) 平素的 “开源精神”,大家决定陆续向 “谷歌(谷歌(Google))开发者 “
微信公众号的订阅者分享: 二零一四 谷歌 开发者大会 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)正式开源


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

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


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

Android
仿天涯论坛的开源项目


见到不少大神纷纭有了本人的开源项目,于是自个儿斟酌着也想做二个开源项目来读书下,因为每一趟无聊必刷的
app
便是明日头条,评论大概比内容都得天独厚,所以自个儿打算仿博客园来练练手,时期也曾放弃过,也碰着重重坑,拿出去跟大家大饱眼福一下,喜欢的记得给个
Star,当作是给本身的砥砺和重力吗。

仿博客园云音乐广播界面


仿博客园云音乐播放界面

TabLayout 和 CoordinatorLayout
相结合的折叠控件


CoordinatorTabLayout 是1个自定义组合控件, 可高效达成 TabLayout 与
CoordinatorLayout 相结合的样式
后续至 CoordinatorLayout, 在该控件下边采纳了 CollapsingToolbarLayout
包罗 TabLayout

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


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

Android
让您的布局飞起来


Android 让您的布局飞起来

菜单开源库装逼大全


前不久在看1个 GanNew
的开源代码,然后发现有个菜单,效果还挺美观的,没看代码在此以前,笔者还想着是怎么落到实处的,我首先想开了共享成分,然后一看代码,发现原先是个开源库。好啊,然后就去追寻有没有更有趣的食谱,就记录一些找到的,以往有亟待也得以参预,大概拿来探视代码。讲道理,也是挺好的

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


图形加载是 Android
开发中最最基础的成效,为了下落开发周期和难度,大家日常会选取一些图纸加载的开源库

高仿蘑菇街欢迎页


高仿蘑菇街欢迎页

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


云阅:一款基于微博云音乐 UI,使用 Gank.Io 及豆类 api 开发的合乎 GoogleMaterial Design 的 Android 开源项目。项目应用的是 MVVM-DataBinding
架构开发,现首要总结:干货区、电影区和书籍区多少个子模块。

何以优雅的兑现 RecyclerView
二种布局


要优雅就要顺应
开闭原则,单一任务,当增添新的品种时只可以扩充无法修改源代码。每增添一种
view 要新增2个类来落到实处

ViewPager
咋办到一屏来得七个页面


ViewPager 完结一屏显示三个页面的成效

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


对此电商App,商品详情无疑是很首要的一个模块,观看主流购物App的详情界面,发现一大半都以做成了左右两有的,上边展现商品规格音讯,上边是H5商品详情,只怕是嵌套了三个含有H5详情及评论列表的ViewPager界面,本文便是实现了2个合作差别须求的上下滚动黏滞View控件。Gi…

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


【Andrid】像微信一模一样的图样采用器

【Android】像微信一模一样录制录制和节奏


重构 MediaRecorder

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


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

杂志发布录顶部固定的目录效果


通信录和城市列表凸显时通用的滑行顶部固定的目录列表效果

效果图

  • 有的作用图

cloudreader.png

  • gif演示

cloudreader.gif

Introduction

博客园云音乐于二〇一二年5月2三二十二日专业宣布,是一款主打发现和享受,带有浓密社交基因的网络音乐产品。相信用过的人都知情它给人的体会是极好的,作者看过了绝大多数仿写的案例,基本UI都不够细致,于是决定自身入手写三个,先导也不清楚具体它是怎么布局的,后来选用SDK提供的工具uiautomatorviewer渐渐分析后再逐步周到的,争取效果一样~

模块分析

干货(gank.io)

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

  • 每日推荐:
    干货集中营推送的每一日内容,包罗每日1个堂姐图,相关Android、IOS等其余干货。每一天第叁2:30事后更新,因为双休不更新所以内容缓存四日网络取不到就取缓存。

  • 福利:
    Glide加载图片,点击查看大图,支持双指缩放,一下可查阅列表的有所图片,再也不用每一个点击每张图啦。

  • 干货订制:
    能够筛选自身喜爱干货的品类,有整整、IOS、App、前端、休息录制和实行财富。

  • 大安卓: 展现安卓的全方位新闻。援助下拉刷新方便查看最新的财富。

电影(豆瓣)

API是豆瓣提供的,因为限制了种种ip每分钟请求的次数,所以请酌定选拔,因此推动的困顿请见谅。

  • 影视热播区: 天天更新,体现最新播出的影片热度排名榜。
  • 豆子电影Top250: 豆瓣高分电影集锦,让您放心找好片~

书籍(豆瓣)

选拔的是豆瓣的搜索API。愈来愈多订制内容由于时日原因首先版还未添加,第2版会加上。

  • 综合: 检索豆瓣综合类的书本并体现。
  • 文学: 检索豆瓣文学类的书籍并呈现。
  • 生活: 检索豆瓣生活类的书籍并呈现。

抽屉界面

完全仿今日头条云音乐抽屉界面,包含过多细节如透明标题栏,背景发光度,水波纹颜色等。

  • 品种主页:呈现类型介绍消息,及内容表明,能够享受给您的好友哦。
  • 扫码下载:扫码即可下载App,帮衬您快捷试用~
  • 题材呈报:常见难题汇总,反馈地点,联系形式都在此间哦!
  • 至于云阅:革新日志在此间可知,主人是运用工作外时间做的,周期较长,满足的小伙伴给个Star吧,那将是本人继续迭代的重力,谢谢~

What can be learned about this project

那正是说,从本项目中你能学到哪些知识呢?

  • 一 、干货集中营内容与豆瓣电影书籍内容。
  • ② 、高仿天涯论坛云音乐歌单详情页。
  • 3、NavigationView搭配DrawerLayout的现实性应用。
  • 四 、MvvM-DataBing的档次选择。
  • ⑤ 、LANDxBus代替伊芙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为例,上边的各种按钮的点击操作都有各自的作用。那给了用户3个很好的举报,正是之类的效应:

toolbar_click.gif

上海体育地方是在android
5.1种类下的机能图。在6.0上寻找的点击效果有稍许改变,其余宗旨接近;5.0以下点击则都显现出一般选取器的功用。

只是做到以上的效用并不便于,须求你对ToolBar有深深的问询;不仅如此,水波纹的点击效果在区其他焦点下是有两样的表现。下边一起来谈谈怎么着达先生到以上的效益。

关于ToolBar的布局

见状上图我们领悟到3个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

相关文章