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")
Comments
  • 代码问题咨询

    代码问题咨询

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

    opened by erhutime 3
  • 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
  • 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
  • 用户体验感觉很糟糕

    用户体验感觉很糟糕

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

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

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

    opened by Hitomis 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
Owner
Cao Dongping
android developer
Cao Dongping
Floating Action Menu for Android. Inspired by the Google Plus floating menu

android-floating-action-menu Floating Action Menu for Android. Inspired by the Google Plus floating menu. Demo Setup The simplest way to use this libr

Alessandro Crugnola 242 Nov 10, 2022
🚀 A very customizable library that allows you to present menu items (from menu resource and/or other sources) to users as a bottom sheet.

SlidingUpMenu A library that allows you to present menu items (from menu resource and/or other sources) to users as a bottom sheet. Gradle Dependency

Rasheed Sulayman 26 Jul 17, 2022
Classic Power Menu is a Power Menu Replacement for Android 11+

Classic Power Menu is a Power Menu Replacement for Android 11+, with the main aim being restoring power menu options (Device Controls & Quick Access Wallet) on Android 12.

Kieron Quinn 385 Dec 31, 2022
an animated circular menu for Android

CircularFloatingActionMenu An animated, customizable circular floating menu for Android, inspired by Path app. Getting Started Requirements API >= 15

Oğuz Bilgener 2.7k Dec 24, 2022
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 Dec 23, 2022
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 Dec 28, 2022
imitate Tumblr's menu, dragging animations look like a snake

android-snake-menu imitate Tumblr's menu, dragging animations look like a snake unexpected episode I found another repository some time ago which impl

stone 586 Nov 10, 2022
A menu which can ... BOOM! - Android

BoomMenu 2.0.0 Comes Finally Approximately 8 months ago, I got an inspiration to creating something that can boom and show menu, which I named it Boom

Nightonke 5.8k Dec 27, 2022
: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 1k Dec 29, 2022
** A slide-out menu implementation, which allows users to navigate between views in your app.

MenuDrawer A slide-out menu implementation, which allows users to navigate between views in your app. Most commonly the menu is revealed by either dra

Simon Vig Therkildsen 2.6k Dec 8, 2022
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 Nov 15, 2022
An android custom view which looks like the menu in Path 2.0 (for iOS).

ArcMenu & RayMenu ArcMenu An android custom view which looks like the menu in Path 2.0 (for iOS). RayMenu About The user experience in Path 2.0 (for i

daCapricorn 1.3k Nov 29, 2022
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 26, 2022
(UNMAINTAINED) An implemention of Filter Menu concept for android

FilterMenu This is a library project with a custom view that implements concept of Filter Menu(https://dribbble.com/shots/1956586-Filter-Menu) made by

Lin Zhang 824 Nov 28, 2022
Navigation menu for Android (based off Google+ app)

RibbonMenu Navigation menu for Android (based on Google+ app). Usage Menus are created in xml as normal, adding text and an icon. In the layout you wa

David Scott 487 Nov 24, 2022
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 420 Nov 25, 2022
A multicard menu that can open and close with animation on android

MultiCardMenu A multicard menu that can open and close with animation on android,require API level >= 11 Demo ##Usage <net.wujingchao.android.view.

null 562 Nov 10, 2022
Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app)

Android SideNavigation Library Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app). Description The Go

Evgeny Shishkin 319 Nov 25, 2022