Another sliding menu base on DrawerLayout

Overview

FantasySlide

DOWNLOAD API Android Arsenal

一个 DrawerLayout 的扩展,具有帅气的动画与创新的交互。一次手势完成滑出侧边栏与选择菜单。欢迎下载 demo 体验。

https://raw.githubusercontent.com/mzule/FantasySlide/master/demo.apk

效果

使用方法

添加依赖

compile 'com.github.mzule.fantasyslide:library:1.0.5'

调用

调用方法基本与 DrawerLayout 一致. 本项目支持左右 (start left end right) 侧边栏同时定义。

<com.github.mzule.fantasyslide.FantasyDrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/fake" />

    <com.github.mzule.fantasyslide.SideBar
        android:id="@+id/leftSideBar"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        app:maxTranslationX="66dp">
        
        <!-- 这里是 SideBar 的子视图-->
        
    </com.github.mzule.fantasyslide.SideBar>
    <!-- 如果需要的话,可以添加右侧边栏-->
</com.github.mzule.fantasyslide.FantasyDrawerLayout>
  1. 最外层的 FantasyDrawerLayout 的使用与官方的 DrawerLayout 完全一致。
  2. SideBar 用来包装每一个菜单项,SideBar 本质上可以当做一个 vertical 的 LinearLayout 来使用。
  3. 效果图上的文字变色是表示该菜单处于 hover 状态, hover 状态默认会设定 view 的 pressed 状态为 true。可以通过 Listener 来改写, 下文会有详细说明。
  4. 详细参考 https://github.com/mzule/FantasySlide/blob/master/app/src/main/res/layout/activity_main.xml

进阶

maxTranslationX

通过设置 maxTranslationX 可以设置菜单项动画的最大位移。仅有在采用默认 Transformer 时才有效。

<com.github.mzule.fantasyslide.SideBar
	...
    app:maxTranslationX="88dp">

一般情况下,左边的侧边栏 maxTranslationX 为正数,右边的侧边栏 maxTranslationX 为负数。

Listener

支持设置 Listener 来监听侧边栏菜单的状态。

SideBar leftSideBar = (SideBar) findViewById(R.id.leftSideBar);
leftSideBar.setFantasyListener(new SimpleFantasyListener() {
    @Override
    public boolean onHover(@Nullable View view) {
    	return false;
    }

    @Override
    public boolean onSelect(View view) {
        return false;
    }

    @Override
    public void onCancel() {
    }
});
  1. Hover 是指上面效果图中,高亮的状态,此时手指仍在屏幕上 move. 默认的 hover 处理逻辑是设置 view 的 pressed 状态为 true. 重写 onHover(View) 方法返回 true 可以改写默认逻辑。
  2. Select 是指 hover 状态时手指离开屏幕,触发 select 状态。默认的处理逻辑是调用 view 的 onClick 事件。重写 onSelect(View) 方法返回 true 可以改写默认逻辑。
  3. Cancel 是指手指离开屏幕时,没有任何 view 触发 select 状态,则为 cancel,无默认处理逻辑。

Transformer

项目设计了一个 Transformer 接口,供调用者自定义菜单项的动画效果。使用方法类似于 ViewPager 的 PageTransformer.

class DefaultTransformer implements Transformer {
    private float maxTranslationX;

    DefaultTransformer(float maxTranslationX) {
        this.maxTranslationX = maxTranslationX;
    }

    @Override
    public void apply(ViewGroup sideBar, View itemView, float touchY, float slideOffset, boolean isLeft) {
        float translationX;
        int centerY = itemView.getTop() + itemView.getHeight() / 2;
        float distance = Math.abs(touchY - centerY);
        float scale = distance / sideBar.getHeight() * 3; // 距离中心点距离与 sideBar 的 1/3 对比
        if (isLeft) {
            translationX = Math.max(0, maxTranslationX - scale * maxTranslationX);
        } else {
            translationX = Math.min(0, maxTranslationX - scale * maxTranslationX);
        }
        itemView.setTranslationX(translationX * slideOffset);
    }
}

感谢

动画效果参考自 dribbble. https://dribbble.com/shots/2269140-Force-Touch-Slide-Menu 在此感谢。

另外,demo 里面 MainActivity 的右边栏实现了类似原作的菜单动画效果。具体可以参考相关代码。

许可

Apache License 2.0

联系我

任何相关问题都可以通过以下方式联系我。

  1. 提 issue
  2. 新浪微博 http://weibo.com/mzule
  3. 个人博客 https://mzule.github.io/
  4. 邮件 "mzule".concat("4j").concat("@").concat("gmail.com")
Issues
  • 代码问题咨询

    代码问题咨询

    在SideBar类中,有一个全局变量opened, 在SetTouch方法中, 有如下代码opened = percent == 1; 其中percent是这个方法的参数,剩下的代码就没有更改过这个变量的状态值了,只是用来进行一些判断,逻辑操作,所以,看了半天代码,也没有发现这个变量是用来做什么的,麻烦解释一下,谢谢。

    opened by erhutime 3
  • Can't easily tell which index was touched in SimpleFantasyListener.onHover(View view)

    Can't easily tell which index was touched in SimpleFantasyListener.onHover(View view)

    Could you add an index to the method please? I would very much appreciate it :)

    For now I'm just using view tags to manipulate the views by index

    opened by ghost 3
  • How to use in CoordinatorLayout

    How to use in CoordinatorLayout

    How to use this library in CoordiantorLayout?

    opened by tellfa 2
  • 用户体验感觉很糟糕

    用户体验感觉很糟糕

    效果做的非常好,我是来拜读的,然后觉得有以下三个问题:

    1、两侧侧滑用手滑动出来的概率就50%吧,很不顺 2、通过侧滑拉出来的菜单,松手会自动关闭,这与用户一般使用习惯很不符合,最糟糕的是,松手后,由于你没有处理触摸事件,导致手指水平方向的菜单项会触发点击效果,然后莫名的进入了其他页面,PS:简言之:“我只是想滑动打开菜单,为什么怎么进入了其他页面?” 3、右侧也是滑动拉出后,手指必须一直按着,但是大多数人都是右手操作,如果右手大拇指一直按着屏幕,那么右侧菜单项偏下的位置就回被手挡着。

    以上是我的使用体验。 也可能是我的操作习惯适应不了这个设计。 @mzule

    opened by Hitomis 1
  • hi

    hi

    opened by Blizzard-liu 1
  • 侧滑操作

    侧滑操作

    当呼出侧滑菜单点击选项时,不只是在菜单上可以操作选项,在住内容区也能选择菜单选项(请问如何在住内容区点击隐藏侧滑菜单,谢谢)

    opened by FSY-Specter 1
  • Error:(49, 1) A problem occurred evaluating project ':library'. > Could not read script 'https://raw.githubusercontent.com/nuuneoi/JCenter/master/installv1.gradle'.    > raw.githubusercontent.com

    Error:(49, 1) A problem occurred evaluating project ':library'. > Could not read script 'https://raw.githubusercontent.com/nuuneoi/JCenter/master/installv1.gradle'. > raw.githubusercontent.com

    I am importing this library manually in my project (not using the gradle dependency). I keep getting this error after some period of time. Actually whenever I get this error I clean my project and then the problem vanishes but again after some time it occurs. So I was searching for the permanent fix of this problem.

    My library build.gradle file is:

    apply plugin: 'com.android.library'

    ext { bintrayRepo = 'maven' bintrayName = 'fantasy-slide'

    publishedGroupId = 'com.github.ms.fantasyslide'
    libraryName = 'FantasySlide'
    artifact = 'library'
    
    libraryDescription = 'FantasySlide'
    
    siteUrl = 'https://github.com/ms/FantasySlide/'
    gitUrl = 'https://github.com/ms/FantasySlide.git'
    
    libraryVersion = '1.0.4'
    
    developerId = 'ms'
    developerName = 'Cao Dongping'
    developerEmail = '[email protected]'
    
    licenseName = 'The Apache Software License, Version 2.0'
    licenseUrl = 'http://www.apache.org/licenses/LICENSE-2.0.txt'
    allLicenses = ["Apache-2.0"]
    

    }

    android { compileSdkVersion 23 buildToolsVersion "23.0.0"

    defaultConfig {
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    

    }

    dependencies { compile 'com.android.support:appcompat-v7:23.2.0' }

    apply from: 'https://raw.githubusercontent.com/nuuneoi/JCenter/master/installv1.gradle' apply from: 'https://raw.githubusercontent.com/nuuneoi/JCenter/master/bintrayv1.gradle'

    The error I get is:

    Error:(49, 1) A problem occurred evaluating project ':library'.

    Could not read script 'https://raw.githubusercontent.com/nuuneoi/JCenter/master/installv1.gradle'. raw.githubusercontent.com

    opened by amit-upadhyay-IT 1
  • IllegalStateException: unsupported gravity

    IllegalStateException: unsupported gravity

    sidebar.xml

    <com.github.mzule.fantasyslide.SideBar xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sidebar"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        android:gravity="center_vertical"
        android:orientation="vertical"
        app:maxTranslationX="66dp">
    
        <TextView
            android:text="@string/drawer_activity_maps"
            android:textAppearance="@style/mediumTextAppearanceInverted"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:drawableLeft="@drawable/ic_public"
            android:drawablePadding="6dp"
            android:layout_marginTop="@dimen/drawer_item_margin"
            android:layout_marginBottom="@dimen/drawer_item_margin"
            android:tag="0"/>
        .....
    

    activity.xml

    <include layout="@layout/drawer_layout"
                 android:layout_height="match_parent"
                 android:layout_width="200dp"/>
    

    I looked through FantasyDrawerLayout.java and I see that:

    if (GravityUtil.isLeft(sideBarWithBg)) {
                    leftSideBar = sideBarWithBg;
                } else if (GravityUtil.isRight(sideBarWithBg)) {
                    rightSideBar = sideBarWithBg;
                } else {
                    throw new IllegalStateException("unsupported gravity");
                }
    

    The exception goes away when I replace the include tag with the actual sidebar xml. Any support for include tags in the future? Thanks

    opened by ghost 1
  • RTL support

    RTL support

    hi, thank you fr maintaining this widget this is very interesting drawer. but in RTL layouts when user opens the drawer, the frame (what is on the page), moves backward not forward. and it should get back.

    opened by abilogos 0
  • FantasySlide For IOS Swift

    FantasySlide For IOS Swift

    Dear Admin, Can you please provide same for IOS swift app. We are in need of this kind of animation to my side menu. Thanks in advance.

    opened by GowthamYadav2105 1
  • 如果侧边子菜单多了无法显示全

    如果侧边子菜单多了无法显示全

    侧边子菜单多了无法显示全,能否让菜单滚动如果多了

    opened by YuedongMa 0
Owner
Cao Dongping
android developer
Cao Dongping
:fire: The powerful and easiest way to implement modern material popup menu.

PowerMenu ?? The powerful and easiest way to implement modern material popup menu. PowerMenu can be fully customized and used for popup dialogs. Downl

Jaewoong Eum 881 Jul 25, 2021
An Android library that allows you to easily create applications with slide-in menus. You may use it in your Android apps provided that you cite this project and include the license in your app. Thanks!

SlidingMenu (Play Store Demo) SlidingMenu is an Open Source Android library that allows developers to easily create applications with sliding menus li

Jeremy Feinstein 11.2k Jul 20, 2021
Animations for Android L drawer, back, dismiss and check icons

Material Menu Morphing Android menu, back, dismiss and check buttons Have full control of the animation: Including in your project compile 'com.balysv

Balys Valentukevicius 2.5k Jul 27, 2021
You can easily add awesome animated context menu to your app.

ContextMenu You can easily add awesome animated context menu to your app. Check this project on dribbble Check this project on Behance Usage: For a wo

Yalantis 3.8k Aug 5, 2021
Side menu with some categories to choose.

Side Menu Side menu with some categories to choose. Check this project on dribbble. Check this project on Behance. God bless Ukraine! Sample Sample &

Yalantis 5.2k Jul 27, 2021
Android Library for a DrawerLayout similar to the one in Google Apps

GoogleNavigationDrawerMenu This project aims to let you use a ListView menu similar to the one in the new Google Apps (Keep, Play Music...) without ha

Jorge Martin Espinosa 271 Apr 7, 2021
A floating menu library for Android.

Hover Hover is a floating menu implementation for Android. Goals The goals of Hover are to: Provide an easy-to-use, out-of-the-box floating menu imple

Google 2.6k Jul 26, 2021
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html

Material Bottom Navigation Library Lightweight Bottom Navigation library component inspired by the Google Material Design Guidelines at https://www.go

Alessandro Crugnola 1.4k Jul 24, 2021
Another sliding menu base on DrawerLayout

FantasySlide 一个 DrawerLayout 的扩展,具有帅气的动画与创新的交互。一次手势完成滑出侧边栏与选择菜单。欢迎下载 demo 体验。 https://raw.githubusercontent.com/mzule/FantasySlide/master/demo.apk 效果

Cao Dongping 1.4k Jul 25, 2021
A new way to implement navigation in your app 🏎

ExpandableBottomBar A new way to improve navigation in your app Its really easy integrate to your project take it, faster, faster Important: library w

Alexander Dadukin 531 Aug 3, 2021
Android Satellite Menu

#Satellite Menu 'Path' has a very attractive menu sitting on the left bottom corner of the screen. Satellite Menu is the open version of this menu. Fo

Siyamed SINIR 1.4k Jul 23, 2021
Simple and easy to use circular menu widget for Android.

Deprecated This project is no longer maintained. No new issues or pull requests will be accepted. You can still use the source or fork the project to

Anup Cowkur 423 Jul 31, 2021
An Android Library that allows users to pull down a menu and select different actions. It can be implemented inside ScrollView, GridView, ListView.

AndroidPullMenu AndroidPullMenu is an Open Source Android library that allows developers to easily create applications with pull menu. The aim of this

Armando TBA 182 Feb 20, 2021
Tap Bar Menu

TapBar Menu Simple library that helps creating a "Tap Bar" menu layout. Demo 1: https://youtu.be/DjY0cTWWtao Demo 2: https://youtu.be/dWuPMN6WTOY Inst

Mike 1k Jul 22, 2021