您的位置:首页 > 移动开发 > IOS开发

iOS开发实战——CollectionView点击事件与键盘隐藏结合案例(二)

2016-06-06 00:56 716 查看
我在前一篇博客中《iOS开发实战——CollectionView点击事件与键盘隐藏结合案例》详细实现了CollectionView与键盘组合操作中出现的多种情况,并解决了交互体验上的一些问题。在实际项目中也的确可以采用这种方法来操作。但是问题来了,原来的界面我们是使用UIView来操作的,也就是界面是不可滚动的。然而更为常见的场景是一个ScrollView,界面可以进行上下滚动。所以,这篇博客主要是对前一个案例进行优化。还有一个问题是,在自动布局Masonry结合ScrollView中,会碰到一些坑和技巧,也是我们主要解决的问题。项目代码上传至 https://github.com/chenyufeng1991/ShowHiddenKeyboard
今天要实现的效果如下:




由于大部分功能和之前的类似,我把重点放在ScrollView和Masonry的结合上。
(1)UI布局的思路是:最外面是一个ScrollView,然后里面放一个取名为contentView的UIView,作为放置其他元素的容器。contentView的高度会随着内部元素的总高度的变化而变化,也就是ScrollView需要滚动的总高度。
// 最外部的scrollView
self.scrollView = [[UIScrollView alloc] init];
self.scrollView.backgroundColor = [UIColor orangeColor];
self.scrollView.scrollEnabled = YES;
self.scrollView.userInteractionEnabled = YES;
self.scrollView.bounces = NO;
self.scrollView.delegate = self;
self.automaticallyAdjustsScrollViewInsets = NO;
[self.view addSubview:self.scrollView];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(weakSelf.view).offset(64);
make.left.equalTo(weakSelf.view);
make.right.equalTo(weakSelf.view);
make.bottom.equalTo(weakSelf.view);
}];

// 包含所有子View的容器
self.contentView = [[UIView alloc] initWithFrame:CGRectMake(0, 64, [[UIScreen mainScreen] bounds].size.width, 200)];
self.contentView.backgroundColor = [UIColor redColor];
[self.scrollView addSubview:self.contentView];
[self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(weakSelf.scrollView);
make.width.equalTo(weakSelf.scrollView);
}];

这里设定ScrollView铺满全屏。而里面的contentView也是铺满整个ScrollView,并且一定要显式的设置宽度等于scrollView的宽度,也就是水平不可滑动。
在设置scrollView时建议加上self.automaticallyAdjustsScrollViewInsets = NO。这个参数比较坑爹,默认是YES,也就是默认在你使用scrollView的时候给你加了内边距,而这个往往是我们不需要的。如果默认置为YES的话,发现UI怎么都调不出我们想要的效果,往往会在顶部一部分。【ps:其实在这里你也可以考虑到是导航栏的原因,看你个人需求是ScrollView是否要到达屏幕顶部还是只到达导航栏底部。】

(2)由于我要让界面有滑动的效果,所以要让ScrollView里面的contentSize大于height,所以我在下面铺了一张很长的图片来模拟。
self.bottomImageView = [[UIImageView alloc] init];
self.bottomImageView.image = [UIImage imageNamed:@"bottom"];
[self.contentView addSubview:self.bottomImageView];
[self.bottomImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(weakSelf.collectionView.mas_bottom).offset(20);
make.left.equalTo(weakSelf.contentView);
make.right.equalTo(weakSelf.contentView);
make.height.equalTo(@500);
}];


(3)其实自动布局写到这里的时候,所有的设置都已经完成了。但是一运行代码,发现并不是这样的。ScrollView根本就不能滚动。原来想的是:contentView由于add了很多的元素,所以contentView的高度就应该是这些元素实际布局中的总和。Masonry理应有这种自动计算的功能,但事实却不是这样的。调试上面的代码会发现contentView的高度居然是0. 查看约束设置代码,我们的确没有显式的设置高度。很遗憾,Masonry没有自动完成这个功能。所以需要在上面的子元素约束完成以后,实现如下代码:
// 这里要重新设置容器的高度,其实只要固定底部即可。
[self.contentView mas_updateConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(self.bottomImageView);
}];
更新contentView容器的约束。也就是添加了底部约束到那张长长的图片的底部,这样也就相当于设置了高度。这样ScrollView就能正常滚动了。

(4)对于CollectionView的处理同前一个案例一样,这里不再赘述。由于添加了ScrollView,所以原先touchesEnded方法就不会被调用了,因为手势操作首先会去触发ScrollView中的操作。所以我们就要来实现ScrollViewDelegate中的方法来实现键盘隐藏。
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
[self hideKeyboard];
}

当ScrollView开始滚动的时候隐藏键盘。由于此时的背景空白区域是contentView,所以添加一个tap手势:
UITapGestureRecognizer *tapView = [[UITapGestureRecognizer alloc] initWithTarget:self
action:@selector(hideKeyboard)];
[self.contentView addGestureRecognizer:tapView];


经过以上实现后,就能实现ScrollView、CollectionView和键盘之间的事件处理了,也就是上面Gif中的动效。其实实现的关键就是上面ScrollView和Masonry的结合上。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: