菜单

Io及豆瓣Api开发的开源项目

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

CloudReader

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

github地址:CloudReader

已更新至V1.8.2

效果图

cloudreader.png

cloudreader.gif

Introduction

天涯论坛云音乐于二零一三年7月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"

2017赌博网站开户送金,不过设置后你会发现具有点击的水彩都是一致的,假如你使用主旨:

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地图