这又是《iOS Auto Layout开发秘籍》中的一个例子。这里使用Masonry改写了一下。
实现的效果如下：
drawer.gif
整体思路
- 界面元素主要分为三类。第一类是屏幕下方的橙色区域，用来表示抽屉空间。第二类是抽屉的把手，就是那个浅绿色的圆形，用它来控制抽屉的打开和关闭。第三类是四个小视图，代表可以放到抽屉里的东西。
- 使用Masonry进行起始布局。
- Masonry和UIView的 animateWithDuration: 方法配合，实现动画效果。在动画时，根据需要选择 mas_updateConstraints 或者 mas_remakeConstraints 来实现视图的位移。
- 用手势识别器实现抽屉把手和小视图的控制移动效果。
具体实现代码
界面初始布局
1. 新建一个类DrawerView，代表抽屉空间
// 这段代码写在DrawerView.m文件里。
- (instancetype) initWithHeight: (CGFloat) height {
self = [super initWithFrame:CGRectZero];
if (self == nil) {
return self;
}
self.drawerHeight = height;
// 1
self.backgroundColor = [UIColor ex_orange];
// 抽屉把手
// 2
self.handle = [DrawerHandle handleWithDrawer:self];
[self.handle mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(self.handle.frame.size.width, self.handle.frame.size.height)).priorityMedium();
}];
// 添加黑色的上边框
UIView *blackView = [[UIView alloc] initWithFrame:CGRectZero];
blackView.backgroundColor = [UIColor blackColor];
[self addSubview:blackView];
[blackView mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(4).priorityMedium();
make.top.mas_equalTo(self).priorityMedium();
make.left.right.mas_equalTo(self).priorityMedium();
}];
return self;
}
代码解释：
- ex_orange是UIColor的自定义类别中新增的类方法。
- handle是把手类的实例。因为把手是附着在抽屉上的，放在一起布局比较方便。在这里使用的是弱引用，防止产生循环引用。
2. 创建DrawerHandle类，代表抽屉把手
// 这段代码写在DrawerHandle.m文件中
- (instancetype) initWithDrawer: (UIView *) drawer {
// 直接设置了尺寸。
self = [super initWithFrame: CGRectMake(0, 0, 60, 60)];
if (!self) {
return self;
}
// 弱引用一个抽屉视图
// 把手控制抽屉的移动，有意个弱引用的抽屉视图会比较方便。
_drawer = (DrawerView *) drawer;
// 创建边缘的浅绿色的圆
self.backgroundColor = [UIColor ex_aqua];
self.layer.borderColor = [UIColor blackColor].CGColor
;
self.layer.cornerRadius = 30.0f;
self.layer.borderWidth = 4;
// 添加手势识别
// 通过手势识别器来控制抽屉移动，具体实现方法后面介绍。
UITapGestureRecognizer *dtap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(doubleTap:)];
dtap.numberOfTapsRequired = 2;
[self addGestureRecognizer:dtap];
return self;
}
3. 创建DraggableView类，代表小视图
// 这段代码写在DraggableView.m文件中
+ (instancetype) randomView {
DraggableView *view = [[self alloc] init];
view.backgroundColor = [UIColor ex_randomColor];
return view;
}
4. 对各个类进行实例化
// 这段代码写在ViewController.m文件中
- (void) createView {
// 创建抽屉
CGFloat height = 130.0f;
holder = [DrawerView holderWithDrawerHeight:height];
[self.view addSubview:holder];
[holder mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.mas_equalTo(self.view).priorityHigh();
make.right.mas_equalTo(self.view).priorityHigh();
make.height.mas_equalTo(height).priorityHigh();
make.top.mas_equalTo(self.view.mas_bottom).mas_offset(-height).priorityHigh();
}];
// 添加抽屉把手
[self.view addSubview:holder.handle];
[holder.handle mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerY.mas_equalTo(holder.mas_top).priorityHigh();
make.centerX.mas_equalTo(holder.mas_centerX).priorityHigh();
}];
// 创建放到抽屉里的视图
// 创建4个小视图。
views = [NSMutableArray array];
for (int i = 0; i < 4; i++) {
// 创建视图
DraggableView *view = [DraggableView randomView];
view.tag = 100 + i;
view.layer.cornerRadius = 8;
view.layer.borderWidth = 4;
view.layer.borderColor = [UIColor blackColor].CGColor;
// 添加视图
[self.view addSubview:view];
[views addObject:view];
// 约束和初始位置
[view mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(60, 60)).priorityHigh();
// 下面的三句话设置了视图移动的边界。 make.left.mas_greaterThanOrEqualTo(self.view).mas_offset(20).priorityHigh();
make.right.mas_lessThanOrEqualTo(self.view).mas_offset(-20).priorityHigh();
make.top.mas_greaterThanOrEqualTo(20).priorityHigh();
CGFloat centerX = self.view.bounds.size.width / 2.0;
CGFloat centerY = self.view.bounds.size.height / 2.0;
CGPoint point = CGPointMake((i * 40 + 40) - centerX + 30, (40 - centerY + 30));
// NSLog(@"point x: %f y: %f", point.x, point.y);
make.center.mas_equalTo(self.view).mas_offset(point).priorityMedium();
}];
// 是DraggableView类的方法，用来设置添加在小视图上的手势。后面介绍。
[view enableDragging:YES];
}
// 设置监听
// 对小视图移动的状态进行监听，以实现细节控制。后面介绍。
[self establishNotificationHandlers];
}
实现抽屉的运动
// 这几段代码写在DrawerHandle.m文件中
- (void) doubleTap: (UITapGestureRecognizer *) tgr {
[UIView animateWithDuration:0.2f animations:^{
CGFloat offset;
BOOL atButtom = ((int)_drawer.frame.origin.y == (int)_drawer.superview.bounds.size.height);
// 双击把手时，不是打开就是观赏抽屉。
if (atButtom) {
offset = -_drawer.drawerHeight;
} else {
offset = 0;
;
}
// 这里选择的是更新，而不是重做。对于这种本来已有，而且更新后不会产生约束增减的情况，我一般都采用更新。
[_drawer mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(_drawer.superview.mas_bottom).mas_offset(offset).priorityHigh();
}];
[_drawer.superview layoutIfNeeded];
}];
}
// 直接拖拽打开抽屉
- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
// 触点和把手中点y值的偏移值。
yOffset = [touch locationInView:self].y - (self.bounds.size.height / 2.0f);
}
- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint touchPoint = [touch locationInView:self.superview];
CGFloat dy = self.superview.superview.bounds.size.height - (touchPoint.y - yOffset); // 实际是屏幕的高度和把手中点之间的差值。
[_drawer mas_updateConstraints:^(MASConstraintMaker *make) {
// 直接限定抽屉的打开范围
if (dy <= 260 && dy >= 0) {
make.top.mas_equalTo(_drawer.superview.mas_bottom).mas_offset(-dy).priorityHigh();
make.height.mas_equalTo(dy).priorityHigh();
}
}];
}
实现小视图的动作
这部分稍微麻烦些。主要有两种效果要实现：
- 实现小视图的拖动。
- 实现小视图被移动到抽屉位置的时候放手，可以自动放置到抽屉中。
1. 实现小视图的拖动
// 本部分代码写在DraggableView.m文件中
- (void) enableDragging: (BOOL) isDrag {
self.userInteractionEnabled = isDrag;
if (isDrag) {
// 拖拽
UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
[self addGestureRecognizer:panRecognizer];
// 双击
UITapGestureRecognizer *dtapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTap:)];
dtapRecognizer.numberOfTapsRequired = 2;
[self addGestureRecognizer:dtapRecognizer];
}
}
- (void) handlePan: (UIPanGestureRecognizer *) recognizer {
// 存储偏移值并通知拖拽
if (recognizer.state == UIGestureRecognizerStateBegan) {
origin = self.frame.origin;
[self notify:DRAG_START_NOTIFICATION_NAME]; // 大写的是宏定义的值，可自行设定。
}
// 执行移动
// 计算视图中心相对屏幕中心的偏移。
CGPoint translation = [recognizer translationInView:self]; // 生成的是拖动的相对位置，起始总是（0，0）
CGPoint pointOffset = CGPointMake(translation.x - previousPoint.x, translation.y - previousPoint.y);
previousPoint = translation; // previousPoint每次存储的都是上一次的转换坐标，这样每次计算的pointOffset都是一个相对的移动位置。
CGPoint currentCenter = self.center;
CGPoint destination = CGPointMake((currentCenter.x + pointOffset.x) - self.superview.center.x, (currentCenter.y + pointOffset.y) - self.superview.center.y);
[self moveToPositioin:destination];
// 拖拽结束通知
if (recognizer.state == UIGestureRecognizerStateEnded) {
[self notify:DRAG_END_NOTIFICATION_NAME];
previousPoint = CGPointZero; // 确保下次移动的时候，起始位置是之前的最后位置。
}
}
- (void) handleDoubleTap: (UITapGestureRecognizer *) recognizer {
if (recognizer.state == UIGestureRecognizerStateRecognized) {
[self notify:DOUBLE_TAP_NOTIFICATION_NAME];
}
}
- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
[super touchesBegan: touches withEvent:event];
// 把点中的视图放到视图层顶部
if (self.gestureRecognizers.count) {
[self.superview bringSubviewToFront:self];
}
}
#pragma mark - Notification
- (void) notify: (NSString *) notiName {
if (!notiName) {
return;
}
[[NSNotificationCenter defaultCenter] postNotificationName:notiName object:self];
}
// 处理真正的移动
- (void) moveToPositioin: (CGPoint) position {
// 这里选择重设约束，以免之前对约束造成干扰。
[self mas_remakeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(60, 60)).priorityHigh();
make.left.mas_greaterThanOrEqualTo(self.superview).mas_offset(20).priorityHigh();
make.right.mas_lessThanOrEqualTo(self.superview).mas_offset(-20).priorityHigh();
make.top.mas_greaterThanOrEqualTo(20).priorityHigh();
make.center.mas_equalTo(self.superview).mas_offset(position).priority(MASLayoutPriorityDefaultMedium + 2);
}];
}
2. 实现依据小视图的位置决定小视图行为
// 本部分代码写在ViewController.m中
- (void) establishNotificationHandlers {
// 开始拖拽
[[NSNotificationCenter defaultCenter] addObserverForName:DRAG_START_NOTIFICATION_NAME object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
DraggableView *view = note.object;
// removeView和下面的addView方法都在DrawerView类中定义，代码在后面显示。
[holder removeView:view];
}];
// 停止拖拽
[[NSNotificationCenter defaultCenter] addObserverForName:DRAG_END_NOTIFICATION_NAME object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
DraggableView *view = note.object;
// 判断小视图是否在抽屉中
if (CGRectIntersectsRect(view.frame, holder.frame)) {
[holder addView:view];
} else {
[holder removeView:view];
}
}];
// 双击
[[NSNotificationCenter defaultCenter] addObserverForName:DOUBLE_TAP_NOTIFICATION_NAME object:nil queue:[NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
// 你可以自行决定双击的行为：）
NSLog(@"double tap");
}];
}
// 本部分代码写在DrawerView.m文件中
- (void) updateConstraints {
[super updateConstraints];
// 处理抽屉内容视图的布局
UIView *previousView = self.superview;
for (int i = 0; i < views.count; i++) {
__block CGFloat space; // 每个内容视图的间隔
UIView *view = views[i];
[view mas_remakeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(60, 60)).priorityHigh();
make.left.mas_greaterThanOrEqualTo(self.superview).mas_offset(20).priorityHigh();
make.right.mas_lessThanOrEqualTo(self.superview).mas_offset(-20).priorityHigh();
make.top.mas_greaterThanOrEqualTo(20).priorityHigh();
make.top.mas_equalTo(self.mas_top).mas_offset(30).priorityMedium();
if (previousView == self.superview) {
space = 8;
} else {
space = 60 + 8; // 增加宽度,60为视图宽度
}
make.leading.mas_equalTo(previousView.mas_leading).mas_offset(space).priority(MASLayoutPriorityDefaultMedium);
}];
previousView = view;
}
}
- (void) removeView: (UIView *) view {
[views removeObject:view];
DrawerView __weak *weakself = self;
[UIView animateWithDuration:0.3f animations:^{
[weakself setNeedsUpdateConstraints]; // 调用上面的updateConstraints方法。
[weakself.window layoutIfNeeded]; // 动画必须
}];
}
- (void) addView: (UIView *) view {
if (!views) {
views = [NSMutableArray array];
}
[views removeObject:view];
[views addObject:view]; // 把最新添加的视图放在最后。
// 改变布局
DrawerView __weak *weakself = self;
[UIView animateWithDuration:0.3f animations:^{
[weakself setNeedsUpdateConstraints];
[weakself.window layoutIfNeeded];
}];
}
完整代码地址