菜单

《云阅》一个仿网易云音乐UI,使用Gank.Io及豆瓣Api开发之开源项目

2018年9月12日 - 2017赌博网站开户送金

CloudReader

一致慢基于网易云音乐UI,使用GankIo及豆瓣api开发的入Google Material
Desgin阅读类的开源项目。项目用的凡Retrofit + RxJava +
MVVM-DataBinding架构开发。开发中所遇到的各种问题早就汇总在这里。

github地址:CloudReader

已经更新到V1.8.2

效果图

cloudreader.png

cloudreader.gif

Introduction

网易云音乐为2013年4月23日业内发表,是同缓主打发现同分享,带有浓厚社交基因的网络音乐产品。相信用了之人且知晓它吃人之体验是极好的,我看罢了多数仿写的案例,基本UI都不敷细致,于是决定好动手写一个,起初也未明了具体它是怎布局之,后来应用SDK提供的工具uiautomatorviewer慢慢分析后再慢慢完善之,争取效果等同~

模块分析

干货(gank.io)

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

电影(豆瓣)

API是豆类提供的,因为限了每个ip每分钟要的次数,所以告酌定采用,由此带动的不便请见谅。

书籍(豆瓣)

采取的是豆类的搜索API。更多订制内容由岁月由首先本还非添加,第二版会添加。

抽屉界面

全仿网易云音乐抽屉界面,包括多细节而透明标题栏,背景透明度,水波纹颜色相当。

What can be learned about this project

那么,从以档被您可知模仿到如何知识也?

细节解析 – 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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图