简单实现侧滑功能
2016-09-01 本文已影响135人
再见远洋
话不多说，先来个效果图：
sideView.gif
侧滑这个功能大家应该很熟悉吧，只要你用QQ，那么肯定就会接触到侧滑了，我今天主要是讲实现侧滑的思路，当然也写了个简单的demo，但是有很多细节我并没有去处理，关键在于思路，好了，下面开始讲解思路了：
1.很明显我们可以看到点击导航栏左侧按钮最上层的视图是往右移动的，而且一开始上面的蓝色视图是盖在绿色视图上方的，这里可以看出来 他们之间是有层级关系的，也就是蓝色视图是盖在绿色视图上方的，
2.了解了这一个关系，咱们再接着说第二点，那就是怎么让蓝色视图往右侧移动并且缩小呢，改变蓝色视图的frame或者是transform不就行了吗
了解了上面的这两点，还有一点很重要，那就是绿色视图还有蓝色视图是添加在哪里的呢？
刚开始我的思路是直接添加在keyWindow上面，这样确实是可以的，但是如果是添加在keywindow上会出现一个问题，那就是UIApplication这个代理对象持有这个View了，这就违背了原则了，代理就只干代理的事才对，所以后面我的思路就变成了将这个绿色的view添加在根控制器的View上面，这里主要，从图上虽然看到了有导航栏，但是我们这里的根控制器却并不是UINavgationController，而是一个普通的UIViewController，具体你可以通过看我的demo，说完了绿色视图我觉得还有必要说一下蓝色视图，蓝色视图的View很明显是有导航栏的，聪明的你肯定想到了，没错，我是将一个导航控制器的View添加在了这个绿色的view上面，这样就会有导航栏了，这里有一点一定要注意的，那就是这个导航控制器必须是根控制器的子控制器;
说了这么多估计还是有很多人有点蒙，那我还是把层次给比划一下吧：
UIWindow-->RootViewController.View-->greenView-->navigationController.View
通俗的讲就是：跟控制器的view上首先添加了绿色的View 然后再新建了一个导航控制器，将导航控制器的View添加到根控制器的View上，具体的我觉得还是用代码来说比较实在：
根控制器中代码：
//
// ViewController.m
// YJYYSideViewController
//
// Created by 遇见远洋 on 16/9/1.
// Copyright © 2016年 遇见远洋. All rights reserved.
//
#import "ViewController.h"
#import "YJYYSideView.h"
#import "YJYYNavViewController.h"
#import "YJYYViewController.h"
#define topValue 64
#define leftMenuW 150
@interface ViewController ()<YJYYLeftMenuDelegate>
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
YJYYNavViewController * navController = [[YJYYNavViewController alloc]initWithRootViewController:[[YJYYViewController alloc]init]];
[self addChildViewController:navController];
self.view.backgroundColor = [UIColor greenColor];
//添加左右两侧栏
YJYYSideView * sideView = [[YJYYSideView alloc]initWithFrame:CGRectMake(0, topValue, leftMenuW, self.view.bounds.size.height - topValue * 2)];
sideView.delegate = self;
[self.view addSubview:sideView];
[self.view addSubview:navController.view];
}
#pragma mark - HMLeftMenuDelegate
- (void)leftMenu:(YJYYSideView *)menu didSelectedButtonFromIndex:(NSInteger)fromIndex toIndex:(NSInteger)toIndex
{
NSLog(@"点击了FromIndex %ld-----toIndex %ld",fromIndex,toIndex);
}
@end
绿色view中的代码（5个按钮）
//
// YJYYSideView.m
// YJYYSideViewController
//
// Created by 遇见远洋 on 16/9/1.
// Copyright © 2016年 遇见远洋. All rights reserved.
//
#import "YJYYSideView.h"
@interface YJYYSideView ()
@property (copy,nonatomic)NSArray * titles;/**<标题数组*/
@property (copy,nonatomic)NSMutableArray * btnsArray;/**<按钮数组*/
@end
@implementation
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
self.backgroundColor = [UIColor cyanColor];
[self addLeftButtons];
}
return self;
}
- (void)addLeftButtons {
for (int i = 0 ; i < 5; i++) {
UIButton * btn = [UIButton new];
[btn setTitle:self.titles[i] forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn.backgroundColor = [UIColor greenColor];
btn.tag = i;
[self addSubview:btn];
[self.btnsArray addObject:btn];
}
}
- (void)layoutSubviews {
[super layoutSubviews];
[self.btnsArray enumerateObjectsUsingBlock:^(UIButton * btn, NSUInteger idx, BOOL * _Nonnull stop) {
CGFloat height = self.bounds.size.height / 5.0;
btn.frame = CGRectMake(0, idx * height, self.bounds.size.width, height);
}];
}
- (NSMutableArray *)btnsArray {
if (!_btnsArray) {
_btnsArray = [NSMutableArray array];
}
return _btnsArray;
}
- (NSArray *)titles {
if (!_titles) {
_titles = @[@"刚哥",@"佳哥",@"老司机",@"超哥",@"轩哥"];
}
return _titles;
}
@end
导航控制器的子控制器中代码
//
// YJYYViewController.m
// YJYYSideViewController
//
// Created by 遇见远洋 on 16/9/1.
// Copyright © 2016年 遇见远洋. All rights reserved.
//
#import "YJYYViewController.h"
#define topValue 64
#define leftValue 150
@interface YJYYViewController ()
@end
@implementation YJYYViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor blueColor];
[self setupNavigationTools];
[self addGesture];
}
/**
* 设置导航栏左右按钮
*/
- (void)setupNavigationTools {
// 返回按钮
UIButton *backButton = [UIButton buttonWithType:UIButtonTypeCustom];
[backButton setImage:[UIImage imageNamed:@"debunk_arrow_back_img"] forState:UIControlStateNormal];
[backButton sizeToFit];
[backButton addTarget:self action:@selector(backbarbuttonDidClickEvent:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *backBarButton = [[UIBarButtonItem alloc] initWithCustomView:backButton];
self.navigationItem.leftBarButtonItem = backBarButton;
self.title = @"导航";
self.navigationController.navigationBar.tintColor = [UIColor whiteColor];
}
- (void)addGesture {
UITapGestureRecognizer * tapGes = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tap:)];
UIPanGestureRecognizer * panGes = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
[self.view addGestureRecognizer:tapGes];
[self.view addGestureRecognizer:panGes];
}
- (void)tap:(UITapGestureRecognizer *)tapGes {
[UIView animateWithDuration:0.25 animations:^{
self.navigationController.view.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished) {
}];
}
- (void)pan:(UIPanGestureRecognizer *)panGes {
[self backbarbuttonDidClickEvent:nil];
}
/** 返回操作 */
- (void)backbarbuttonDidClickEvent:(UIButton *)sender {
[UIView animateWithDuration:0.25 animations:^{
// 缩放比例
CGFloat navH = [UIScreen mainScreen].bounds.size.height - 2 * topValue;
CGFloat scale = navH / [UIScreen mainScreen].bounds.size.height;
// 菜单左边的间距
CGFloat leftMenuMargin = [UIScreen mainScreen].bounds.size.width * (1 - scale) * 0.5;
CGFloat translateX = leftValue - leftMenuMargin;
CGFloat topMargin = [UIScreen mainScreen].bounds.size.height * (1 - scale) * 0.5;
CGFloat translateY = topValue - topMargin;
// 缩放
CGAffineTransform scaleForm = CGAffineTransformMakeScale(scale, scale);
// 平移
CGAffineTransform translateForm = CGAffineTransformTranslate(scaleForm, translateX / scale, translateY / scale);
self.navigationController.view.transform = translateForm;
}];
}
@end
总共就这几个文件，其实也不难，但是里面还有很多细节需要完善，我就不做了，下面给个demo，主要是讲个思路 这个demo有啥问题可以留言：
https://github.com/wxh794708907/YJYYLeftSideSlide.git
