iOS之侧滑界面实现

#import "CXDSideMenuController.h"
#import "AllControllerDispatchTool.h"
#import "SideHeaderView.h"
#import "Masonry.h"
#import "LoginViewController.h"

@interface CXDSideMenuController ()

//背景遮罩
@property (strong, nonatomic) UIView *backgroundImageView;

//内容视图
@property (strong, nonatomic) UIView *contentView;

//进入视图的序号
@property (assign, nonatomic) NSUInteger selectIndex;

//侧边栏headerView
@property (strong, nonatomic) SideHeaderView *headerView;

@end

@implementation CXDSideMenuController

#pragma mark - 初始化方法
+ (instancetype)shareSideMenu
{
    static CXDSideMenuController *sideMenuVC = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        sideMenuVC = [self new];
    });
    return sideMenuVC;

}

//唤醒侧边菜单方法
+ (void)openSideMenuFromWindow:(UIWindow *)window
{
    //每次调用都能够保证唤醒的侧边菜单是唯一的一个
    CXDSideMenuController *sideMenu = [CXDSideMenuController shareSideMenu];
    [window addSubview:sideMenu.view];

    //唤醒之后,需要让侧边菜单移动进入当前视图
    [UIView animateWithDuration:0.5 animations:^{
        CGRect rect = sideMenu.contentView.frame;
        rect.origin.x = 0;
        sideMenu.contentView.frame = rect;
        sideMenu.backgroundImageView.alpha = 0.5;
    }];
}

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    //侧滑菜单收回
    [self closeSideMenu];

}

//侧滑菜单收回(单独抽出,方便点击tableView的row发生对应响应)
- (void)closeSideMenu
{
    //如何拿到已经被唤醒的侧滑菜单
    [UIView animateWithDuration:0.5 animations:^{
        //侧滑菜单收回
        CGRect rect = self.contentView.frame;
        rect.origin.x = -rect.size.width;
        self.contentView.frame = rect;
        self.backgroundImageView.alpha = 0;
    } completion:^(BOOL finished) {
        //将侧滑菜单从当前视图移除
        [self.view removeFromSuperview];
        //进入相应的选择界面
        [AllControllerDispatchTool createViewControllerWithIndex:_selectIndex];
    }];
}

#pragma mark - 生命周期
- (void)viewDidLoad {
    [super viewDidLoad];

    //构建界面
    [self.view addSubview:self.backgroundImageView];
    [self.view addSubview:self.contentView];

    [self.contentView addSubview:self.headerView];

    //添加约束
    //因为_headerView是加载在contentView之上,所以headerView得约束是根据contentView来计算的,因此在block当中,weakSelf必须为contentView类型
    __weak typeof(self.contentView)weakSelf = self.contentView;
    [_headerView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(weakSelf.mas_left);
        make.right.equalTo(weakSelf.mas_right);
        make.top.equalTo(weakSelf.mas_top);
        make.height.equalTo(110);
    }];

}

#pragma mark - 懒加载

-(UIView *)backgroundImageView
{
    if (!_backgroundImageView) {
        _backgroundImageView = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];
        _backgroundImageView.backgroundColor = [UIColor blackColor];
        _backgroundImageView.alpha = 0;
    }
    return _backgroundImageView;
}

-(UIView *)contentView
{
    if (!_contentView) {
        CGRect rect = [UIScreen mainScreen].bounds;
        _contentView = [[UIView alloc] initWithFrame:CGRectMake(-rect.size.width*0.8, 0, rect.size.width*0.8, rect.size.height)];
        _contentView.backgroundColor = [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1];
    }
    return _contentView;
}

-(SideHeaderView *)headerView
{
    if (!_headerView) {
        _headerView = [[SideHeaderView alloc] init];
        [_headerView.headImageBtn addTarget:self action:@selector(moveToLoginView) forControlEvents:UIControlEventTouchUpInside];
        [_headerView.userNameBtn addTarget:self action:@selector(moveToLoginView) forControlEvents:UIControlEventTouchUpInside];
    }
    return _headerView;
}

- (void)moveToLoginView
{
    LoginViewController *loginVC = [[LoginViewController alloc] init];
    [self presentViewController:loginVC animated:YES completion:nil];
}

PS:通过按钮唤起侧滑菜单过程

PS:部分代码,仅供参考

时间: 2024-10-19 07:03:50

iOS之侧滑界面实现的相关文章

【FastDev4Android框架开发】打造QQ6.X最新版本侧滑界面效果(三十八)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50253925 本文出自:[江清清的博客] (一).前言: 这两天QQ进行了重大更新(6.X)尤其在UI风格上面由之前的蓝色换成了白色居多了,侧滑效果也发生了一些变化,那我们今天来模仿实现一个QQ6.X版本的侧滑界面效果.今天我们还是采用神器ViewDragHelper来实现,之前我们以前基于ViewDragHelper的使用和打造QQ5.X效果了,基本使用方法可以点

iOS与H5界面JSBridge交互Demo

iOS与H5界面JSBridge交互Demo 最近公司需要加活动和新闻模块, boss看同样的设计稿, 我们iOS做一遍, 安卓做一遍, 小程序又做一遍; 所以决定用H5页面. 但我们Native不仅仅加载URL就行, 还需要跟H5有交互, 安卓大哥跟我慢慢填坑- 我用了一个library(GCWebviewJSBridge-iOS), github网址:github.com/wheying/GCWebviewJSBridge-iOS 他的Demo不太容易看得懂, 看得我一脸懵逼, 我写了一个简

【新手--android日记】实现IOS风格电话界面

[前言--新手日记] 开始学习android开发,通过做一个通讯录练习,打算实现各种自己想实现的功能. 新手作品,技术含量很浅.主要是记录自己的学习过程. 纯学习之用,求评论,求建议,求教导. [正题] 一.下了好多通话软件,感觉都不怎么样,表示还是比较喜欢原来的QQ通讯录.现在换成微信通讯录,没以前的感觉好. 最后还是倾向于选择IOS的电话界面. 先附图: IOS的:       元器件很简单,主要问题还是在布局方面. 分底部和顶部两部分说吧. 二.底部设计: 底部设计,RadioGroup加

推荐一个iOS应用UI界面设计站点

Patterns是一个分享ios应用UI界面的站点,专注于分享iOS应用UI界面的细节.依照设计元素进行分类,依照iOS经常使用功能对各类UI进行分类展示. 链接:url=http%3A%2F%2Fwww.patternsofdesign.co.uk%2F&link2key=fa4fb02efb" target="_blank" rel="nofollow" style="color:rgb(173,98,85); text-decora

Android Material Design之 NavigationView侧滑界面自定义 随笔

一.侧滑界面Menu自定义: 在menu文件夹下新建activity_main_drawer.xml文件,自定义标题和icon: 1 <?xml version="1.0" encoding="utf-8"?> 2 <menu xmlns:android="http://schemas.android.com/apk/res/android"> 3 <group android:checkableBehavior=&

推荐一个iOS应用UI界面设计网站

定义和用法 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTML 标签:它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令. 在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML.DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容. DOCTYPE   3种类型 HTML 4.01 Strict 该

用IOS做一个界面切换的效果(登录界面和注册界面和找回密码界面的切换)(用封装好的lable和textf创建界面)

创建一个类封装uitextfield和UIlabel (源代码.m文件) #import "TLView.h" @interface TLView () { UILabel *_desLabel;    //左边的lable UITextField *_textField;//右边的 } @end @implementation TLView //改写父类的初始化方法,处理相同的性能 - (id)initWithFrame:(CGRect)frame { self = [super i

iOS仿QQ界面

iOS仿QQ界面 仿制QQ5.0的界面,可以切换主题,并且有左右滑动特效. 下载地址:http://www.dwz.cn/z08ik 源码运行截图

Android模仿iOS实现侧滑返回(类似微信)

我们都知道侧滑返回操作是 iOS 里面比较常见的功能,一般是手指在靠近手机屏幕左边缘向右滑动就可以关闭当前的界面,iOS 系统提供了这样的 API,但是 Android 怎么实现呢? 网上找了许多方法,比较了一下,个人觉得还是这个比较方便也容易理解,先上个效果再说: 原理 Activity 本身是不可以滑动的,但是我们可以制造一个正在滑动 Activity 的假象,使得看起来这个 Activity 正在被手指滑动.其原理其实很简单,我们滑动的其实是 Activity 里面的可见View元素,而我