iOS侧滑菜单实现

最新推荐文章于 2024-05-17 10:07:59 发布
最新推荐文章于 2024-05-17 10:07:59 发布
阅读量4.2k 收藏 1
点赞数
分类专栏： iOS开发 文章标签： ios 界面 uiscrollview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/szyangzhen/article/details/49337943
版权

这个是参照鸿洋的android侧滑菜单实现的，同样利用scrollview实现，很简单，这是鸿洋侧滑的实现链接打造最简单的自定义侧滑菜单

第一种测滑

#import <UIKit/UIKit.h>

@interface SlideMenu : UIScrollView
@property (nonatomic, assign) BOOL isMenuOpen;
/**设置菜单和内容*/
-(void)setMenuView:(UIView*)menuView withContentView:(UIView*)contentView;
/**关闭菜单*/
-(void)closeMenuWithAnimation:(BOOL)animated;
/**打开菜单*/
-(void)openMenuWithAnimaton:(BOOL)animated;
/**菜单打开与关闭切换*/
-(void)toggleMenu;
@end
#import "SlideMenu.h"
#define menu_ratio 0.7f

@interface SlideMenu()<UIScrollViewDelegate>
@end

@implementation SlideMenu
{
    float _menuWidth;
    UIView *_menuViewContainer;
    UIView *_contentViewContainer;
    UIView *_menuView;
    UIView *_contentView;
}

-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if(self)
    {
        [self setUp];
    }
    return self;
}

-(void)setUp
{
    _menuViewContainer = [UIView new];
    _contentViewContainer = [UIView new];
    [self addSubview:_menuViewContainer];
    [self addSubview:_contentViewContainer];
    self.delegate = self;
    //不显示滚动条
    self.showsHorizontalScrollIndicator = false;
    //不显示弹簧效果
    self.bounces = false;
    _isMenuOpen = true;

    if(!CGRectEqualToRect(self.frame, CGRectZero))
    {
        [self initFrame];
    }
}

-(void)setFrame:(CGRect)frame
{
    [super setFrame:frame];
    [self initFrame];
}

-(void)initFrame
{
    //放置菜单的位置
    _menuViewContainer.frame = CGRectMake(0, 0, self.frame.size.width * menu_ratio, self.frame.size.height);
    _menuWidth = _menuViewContainer.frame.size.width;

    //放置content的位置
    _contentViewContainer.frame = CGRectMake(CGRectGetMaxX(_menuViewContainer.frame), 0, self.frame.size.width, self.frame.size.height);
    //设置可滚动区域
    self.contentSize = CGSizeMake(_menuViewContainer.frame.size.width + _contentViewContainer.frame.size.width, 0);
    //初始关闭菜单
    [self closeMenuWithAnimation:false];

    if(_menuView != nil)
    {
        _menuView.frame = _menuViewContainer.bounds;
    }
    if(_contentView != nil)
    {
        _contentView.frame = _contentViewContainer.bounds;
    }
}

//设置菜单和内容
-(void)setMenuView:(UIView *)menuView withContentView:(UIView *)contentView
{
    //添加菜单
    if(_menuView != nil)
    {
        return;
    }
    _menuView = menuView;
    [_menuViewContainer addSubview:menuView];

    //添加内容
    if(_contentView != nil)
    {
        return;
    }
    _contentView = contentView;
    [_contentViewContainer addSubview:contentView];

    //设置实际菜单位置，填充菜单容器
    _menuView.frame = _menuViewContainer.bounds;
    //设置实际内容位置，填充内容容器
    _contentView.frame = _contentViewContainer.bounds;

}


//拖动松开时会调用，第二个参数表示拖动松开后是否会自动减速滑动
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    //判断应该显示菜单还是内容
    float offset = scrollView.contentOffset.x;
    if(decelerate)
    {
        //如果松开后自动减速滚动，什么也不做
        return;
    }
    if(offset > _menuWidth / 2.0f)
    {
        [self closeMenuWithAnimation:true];
    }
    else
    {
        [self openMenuWithAnimaton:true];
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    //判断应该显示菜单还是内容
    float offset = scrollView.contentOffset.x;

    if(offset > _menuWidth / 2.0f)
    {
        [self closeMenuWithAnimation:true];
    }
    else
    {
        [self openMenuWithAnimaton:true];
    }

}


//关闭菜单
-(void)closeMenuWithAnimation:(BOOL)animated
{
    _isMenuOpen = false;
    [self setContentOffset:CGPointMake(_menuWidth, 0) animated:animated];
}
//打开菜单
-(void)openMenuWithAnimaton:(BOOL)animated
{
    _isMenuOpen = true;
    [self setContentOffset:CGPointMake(0, 0) animated:animated];
}

//菜单切换
-(void)toggleMenu
{
    if(_isMenuOpen)
    {
        [self closeMenuWithAnimation:true];
    }
    else
    {
        [self openMenuWithAnimaton:true];
    }
}

第二种侧滑

#import <UIKit/UIKit.h>

@interface SlideMenu2 : UIScrollView
@property (nonatomic, assign) BOOL isMenuOpen;
/**设置菜单和内容*/
-(void)setMenuView:(UIView*)menuView withContentView:(UIView*)contentView;
/**关闭菜单*/
-(void)closeMenuWithAnimation:(BOOL)animated;
/**打开菜单*/
-(void)openMenuWithAnimaton:(BOOL)animated;
/**菜单打开与关闭切换*/
-(void)toggleMenu;
@end
#import "SlideMenu2.h"
#define menu_ratio 0.70f

@interface SlideMenu2()<UIScrollViewDelegate>
@end

@implementation SlideMenu2
{
    float _menuWidth;
    UIView *_menuViewContainer;
    UIView *_contentViewContainer;
    UIView *_menuView;
    UIView *_contentView;
}

-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if(self)
    {
        [self setUp];
    }
    return self;
}

-(void)setUp
{
    _menuViewContainer = [UIView new];
    _contentViewContainer = [UIView new];
    [self addSubview:_menuViewContainer];
    [self addSubview:_contentViewContainer];
    self.delegate = self;
    //不显示滚动条
    self.showsHorizontalScrollIndicator = false;
    //不显示弹簧效果
    self.bounces = false;
    _isMenuOpen = true;

    if(!CGRectEqualToRect(self.frame, CGRectZero))
    {
        [self initFrame];
    }
}

-(void)setFrame:(CGRect)frame
{
    [super setFrame:frame];
    [self initFrame];
}


-(void)initFrame
{
    //放置菜单的位置
    _menuViewContainer.frame = CGRectMake(0, 0, self.frame.size.width * menu_ratio, self.frame.size.height);
    _menuWidth = _menuViewContainer.frame.size.width;

    //放置content的位置
    _contentViewContainer.frame = CGRectMake(CGRectGetMaxX(_menuViewContainer.frame), 0, self.frame.size.width, self.frame.size.height);
    //设置可滚动区域
    self.contentSize = CGSizeMake(_menuViewContainer.frame.size.width + _contentViewContainer.frame.size.width, 0);
    //初始关闭菜单
    [self closeMenuWithAnimation:false];

    if(_menuView != nil)
    {
        _menuView.frame = _menuViewContainer.bounds;
    }
    if(_contentView != nil)
    {
        _contentView.frame = _contentViewContainer.bounds;
    }
}

//设置菜单和内容
-(void)setMenuView:(UIView *)menuView withContentView:(UIView *)contentView
{
    //添加菜单
    if(_menuView != nil)
    {
        return;
    }
    _menuView = menuView;
    [_menuViewContainer addSubview:menuView];

    //添加内容
    if(_contentView != nil)
    {
        return;
    }
    _contentView = contentView;
    [_contentViewContainer addSubview:contentView];

    //设置实际菜单位置，填充菜单容器
    _menuView.frame = _menuViewContainer.bounds;
    //设置实际内容位置，填充内容容器
    _contentView.frame = _contentViewContainer.bounds;

}


//拖动松开时会调用，第二个参数表示拖动松开后是否会自动减速滑动
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    //判断应该显示菜单还是内容
    float offset = scrollView.contentOffset.x;
    if(decelerate)
    {
        //如果松开后自动减速滚动，什么也不做
        return;
    }
    if(offset > _menuWidth / 2.0f)
    {
        [self closeMenuWithAnimation:true];
    }
    else
    {
        [self openMenuWithAnimaton:true];
    }
}
//滚动停止后调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    //判断应该显示菜单还是内容
    float offset = scrollView.contentOffset.x;

    if(offset > _menuWidth / 2.0f)
    {
        [self closeMenuWithAnimation:true];
    }
    else
    {
        [self openMenuWithAnimaton:true];
    }

}

//正在滚动时调用，频繁调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //计算菜单移动比例
    float ratio = scrollView.contentOffset.x * 1.0f / _menuWidth;
    _menuViewContainer.transform = CGAffineTransformMakeTranslation(_menuWidth * ratio, 0);
}


//关闭菜单
-(void)closeMenuWithAnimation:(BOOL)animated
{
    _isMenuOpen = false;
    [self setContentOffset:CGPointMake(_menuWidth, 0) animated:animated];
}
//打开菜单
-(void)openMenuWithAnimaton:(BOOL)animated
{
    _isMenuOpen = true;
    [self setContentOffset:CGPointMake(0, 0) animated:animated];
}

//菜单切换
-(void)toggleMenu
{
    if(_isMenuOpen)
    {
        [self closeMenuWithAnimation:true];
    }
    else
    {
        [self openMenuWithAnimaton:true];
    }
}


@end

仿QQ侧滑

#import <UIKit/UIKit.h>

@interface SlideMenu3 : UIScrollView
@property (nonatomic, assign) BOOL isMenuOpen;
/**设置菜单和内容*/
-(void)setMenuView:(UIView*)menuView withContentView:(UIView*)contentView;
/**关闭菜单*/
-(void)closeMenuWithAnimation:(BOOL)animated;
/**打开菜单*/
-(void)openMenuWithAnimaton:(BOOL)animated;
/**菜单打开与关闭切换*/
-(void)toggleMenu;
@end

#import "SlideMenu3.h"
#define menu_ratio 0.70f

@interface SlideMenu3()<UIScrollViewDelegate>
@end

@implementation SlideMenu3
{
    float _menuWidth;
    UIView *_menuViewContainer;
    UIView *_contentViewContainer;
    UIView *_menuView;
    UIView *_contentView;
}

-(instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if(self)
    {
        [self setUp];
    }
    return self;
}

-(void)setUp
{
    _menuViewContainer = [UIView new];
    _contentViewContainer = [UIView new];
    [self addSubview:_menuViewContainer];
    [self addSubview:_contentViewContainer];
    self.delegate = self;
    //这两行代码主要是为了确定缩放点，如果不设置是绕view的中心缩放
//    _contentViewContainer.layer.anchorPoint = CGPointMake(0, 0.5f);
//    _contentViewContainer.layer.position = CGPointMake(0, 0.5f);

    //不显示滚动条
    self.showsHorizontalScrollIndicator = false;
    //不显示弹簧效果
    self.bounces = false;
    _isMenuOpen = true;

    if(!CGRectEqualToRect(self.frame, CGRectZero))
    {
        [self initFrame];
    }
}

-(void)setFrame:(CGRect)frame
{
    [super setFrame:frame];
    [self initFrame];
}

-(void)initFrame
{
    //放置菜单的位置
    _menuViewContainer.frame = CGRectMake(0, 0, self.frame.size.width * menu_ratio, self.frame.size.height);
    _menuWidth = _menuViewContainer.frame.size.width;

    //放置content的位置
    _contentViewContainer.frame = CGRectMake(CGRectGetMaxX(_menuViewContainer.frame), 0, self.frame.size.width, self.frame.size.height);
    //设置可滚动区域
    self.contentSize = CGSizeMake(_menuViewContainer.frame.size.width + _contentViewContainer.frame.size.width, 0);
    //初始关闭菜单
    [self closeMenuWithAnimation:false];

    if(_menuView != nil)
    {
        _menuView.frame = _menuViewContainer.bounds;
    }
    if(_contentView != nil)
    {
        _contentView.frame = _contentViewContainer.bounds;
    }
}

//设置菜单和内容
-(void)setMenuView:(UIView *)menuView withContentView:(UIView *)contentView
{
    //添加菜单
    if(_menuView != nil)
    {
        return;
    }
    _menuView = menuView;
    [_menuViewContainer addSubview:menuView];

    //添加内容
    if(_contentView != nil)
    {
        return;
    }
    _contentView = contentView;
    [_contentViewContainer addSubview:contentView];

    //设置实际菜单位置，填充菜单容器
    _menuView.frame = _menuViewContainer.bounds;
    //设置实际内容位置，填充内容容器
    _contentView.frame = _contentViewContainer.bounds;
}


//拖动松开时会调用，第二个参数表示拖动松开后是否会自动减速滑动
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    //判断应该显示菜单还是内容
    float offset = scrollView.contentOffset.x;
    if(decelerate)
    {
        //如果松开后自动减速滚动，什么也不做
        return;
    }
    if(offset > _menuWidth / 2.0f)
    {
        [self closeMenuWithAnimation:true];
    }
    else
    {
        [self openMenuWithAnimaton:true];
    }
}
//正在滚动时调用，频繁调用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //计算菜单移动比例
    float ratio = scrollView.contentOffset.x * 1.0f / _menuWidth;
    //计算缩放比例
    float contentScale = ratio * 0.2f + 0.8f;
    float menuScale = 1.0f - ratio * 0.3f;
    float alpha = 1.0f - ratio * 0.4f;

    //缩放内容区
    _contentViewContainer.transform = CGAffineTransformMakeScale(contentScale, contentScale);
    //处理菜单
    CGAffineTransform scaleTransform = CGAffineTransformMakeScale(menuScale, menuScale);
     _menuViewContainer.transform = CGAffineTransformTranslate(scaleTransform,_menuWidth * ratio * 0.6, 0.0f);
    //菜单alpha
    _menuViewContainer.alpha = alpha;

}

//滚动停止后调用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    //判断应该显示菜单还是内容
    float offset = scrollView.contentOffset.x;

    if(offset > _menuWidth / 2.0f)
    {
        [self closeMenuWithAnimation:true];
    }
    else
    {
        [self openMenuWithAnimaton:true];
    }

}


//关闭菜单
-(void)closeMenuWithAnimation:(BOOL)animated
{
    _isMenuOpen = false;
    [self setContentOffset:CGPointMake(_menuWidth, 0) animated:animated];
}

//打开菜单
-(void)openMenuWithAnimaton:(BOOL)animated
{
    _isMenuOpen = true;
    [self setContentOffset:CGPointMake(0, 0) animated:animated];
}

//菜单切换
-(void)toggleMenu
{
    if(_isMenuOpen)
    {
        [self closeMenuWithAnimation:true];
    }
    else
    {
        [self openMenuWithAnimaton:true];
    }
}
@end

Demo下载地址

szyangzhen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS 下拉菜单
Amydom的博客
05-17 1284
我看到有许多人在项目的时候被下拉菜单所难住,上网上找各种三方,其实它的实现非常的简单,下面我先给大家带来比较简单的下拉菜单,这个是加在导航栏上的  viewController.m的代码如下: 这里 ViewButton是一个基于 UIButton 的类 方便自定使用的 #import "ViewController.h" #import "ViewButton.h
MFSideMenu侧滑菜单示例
11-28
使用 MFSideMenu 实现类似 Facebook iOS App 的界面效果,提供一个滑动的菜单导航。 MFSideMenu 这个控件使用起来比较方便,而且它支持 ARC,也支持 StoryMainBoard。 示例往左滑动到自定义表格视图，往右滑动到省市列表视图，另外涉及到 UINavigationController 及 UIBarButtonItem控件的使用。 本示例代码结构清晰，注释详尽，有助于初学者入门。
iOS 两种方法实现左右滑动出现侧边菜单栏 slide view
weixin_30278237的博客
02-27 92
现在很多的APP中都有slide view，左右滑动出现侧边菜单栏的功能，Weico这个应用就有。网上有很多第三方的类库实现了这种效果，其实自己代码写的话也是很简单的，下面我将介绍两种方法实现slide view。---- 一种是用第三方类库IIViewDeckController这个类库实现的效果比起其他的都好，另一种是自己代码实现这种效果，效果还ok。实现方法一（使用第三方库IIViewDec...
推荐一款强大的iOS侧滑菜单库——HyPopMenuView
最新发布
gitblog_00008的博客
05-17 357
推荐一款强大的iOS侧滑菜单库——HyPopMenuView 项目地址:https://gitcode.com/wwdc14yh/HyPopMenuView 在移动应用开发中，一个直观且易于操作的导航界面至关重要。今天，我要向大家推荐一个灵感源于新浪微博App的开源项目——HyPopMenuView，它是一款用于构建优雅侧滑菜单的Objective-C库。其功能强大，动画效果丰富，给用户带来流畅的...
iOS：制作左右侧滑（抽屉式）菜单
weixin_30426957的博客
09-24 224
感谢控件作者：https://github.com/SocialObjects-Software/AMSlideMenu 首先上效果图： 这里我们使用AMSlideMenu来实现左右侧滑菜单的效果。控件支持单独左侧滑、单独右侧滑和左右侧滑。同时支持Storyboard和xib两种开发模式。这里介绍第二种，在xib中的开发。开发步骤如下：1. 在Podfile中添加：pod "AMSlid...
RESideMenu：创新的iOS侧滑菜单解决方案
gitblog_00070的博客
03-20 314
RESideMenu：创新的iOS侧滑菜单解决方案 项目地址:https://gitcode.com/romaonthego/RESideMenu RESideMenu 是一个开源的iOS项目，它提供了一种美观且可定制的方式来实现类似Facebook和Instagram应用中的侧滑菜单效果。开发者可以利用这个库轻松地在自己的iOS应用中添加这种交互式侧边栏，增强用户体验。 技术分析 1. Obje...
iOS开发UI进阶篇 — 基于手势识别的侧滑展开菜单栏
崔小花的专栏
02-28 3712
今天给大家详细介绍一下IOS手势的用法，最后给大家分享一点干货，《基于手势识别的侧滑展开菜单栏》，这个功能在开发中会经常用到，是非常重要的。一、UIGestureRecognizer介绍手势在ios经常用到，可以说是非常重要的存在，在之前，大部分都是通过touch方法来进行手势的判定，但是在ios系统3.2之后，添加了UIGestureRecongnizer抽象类，抽象出了几个子类UITapGes...
iOS侧滑菜单2
10-13
标题"iOS侧滑菜单2"表明这是一个关于iOS侧滑菜单的升级版本，相比于之前的实现，它可能包含了更多的功能或优化。 在描述中提到“功能都测试过了，比前一个更完全”，这暗示了这个新的侧滑菜单解决方案不仅实现了...
基于BaseAdapter实现仿IOS侧滑菜单
08-06
通过以上步骤，我们就能利用BaseAdapter实现一个功能完备、交互流畅的仿iOS侧滑菜单。在实际项目中，还可以结合其他组件和设计模式，如Fragment来更好地管理菜单和主要内容视图的交互，提升应用的用户体验。
iOS侧滑菜单框架
12-11
总的来说，"iOS侧滑菜单框架"是一个实用的开发工具，它简化了侧滑菜单的实现过程，同时提供了良好的用户体验。开发者可以快速集成到自己的项目中，根据需要进行定制，以满足各种复杂的界面设计需求。
ios-侧滑菜单,侧滑,QQ侧滑菜单，左边菜单.zip
07-11
在本项目"ios-侧滑菜单,侧滑,QQ侧滑菜单，左边菜单.zip"中，开发者Zws-China实现了一个类似QQ风格的侧滑菜单组件，名为LeftSlide。这个开源库可以帮助开发者轻松地在自己的iOS应用中集成这一功能。 LeftSlide的核心...
ios-侧滑菜单(一款简单轻量级的侧滑菜单).zip
07-11
简单易用的侧滑菜单 github地址:https://github.com/wjTime 如觉得有帮助,还请帮忙start以鼓励,不足的地方也请给予指正,谢谢！
ios-TableView侧滑菜单.zip
07-11
1.系统TableView完美的侧滑菜单. 2.支持iOS7 .
iOS左右滑动菜单Demo
04-23
实现左右滑动菜单功能，可自定义界面——SlidingMenu
iOS实现侧滑栏效果
09-01
主要为大家详细介绍了iOS实现侧滑栏效果，点击侧边拉出相应菜单，感兴趣的小伙伴们可以参考一下
iOS侧滑控件：支持左、右滑动的侧滑菜单，可配置单侧滑动，同时可配置菜单宽度等，更多配置请参考”可设置参数“.zip
09-24
iOS侧滑控件：支持左、右滑动的侧滑菜单，可配置单侧滑动，同时可配置菜单宽度等，更多配置请参考”可设置参数“。.zip,侧滑控件：支持左、右滑动的侧滑菜单，可配置单侧滑动，同时可配置菜单宽度等，更多配置请参考”可设置参数“。参考了QQ用户体验：支持边缘侧滑，解决手势冲突问题（边缘范围可设置）。提供OC使用Demo。
iOS侧滑菜单
10-13
在本文中，我们将深入探讨如何实现iOS侧滑菜单，以及相关的技术细节。 首先，iOS侧滑菜单的实现方式多种多样，但最常用的是通过自定义视图控制器容器来完成。这里提到的"slipmenu"可能是指一个开源库或者实现方法，...
IOS开发UI篇--一个侧滑菜单SlidingMenu
jeffasd的专栏
12-12 781
http://blog.csdn.net/yixiangboy/article/details/46883307 一、简介 侧滑菜单已经成为app一个极常用的设计，不管是事务类，效率类还是生活类app。侧滑菜单因Path 2.0和Facebook为开发者熟知，国内目前也有很多流行app用到了侧滑菜单，比如QQ、网易邮箱、知乎等等。 IOS官方并没有提供类似于侧滑栏之类的组件，
iOS人机界面设计指南：中文精华版
- **导航**：使用清晰的导航结构，如底部标签栏和侧滑菜单，帮助用户在应用内自由移动。 - **模态情境**：适时使用模态视图，突出重要信息或任务，但避免打断用户的流程。 - **交互和反馈**：设计应考虑用户对...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值