github https://github.com/1271284056/scrollView-autoLayout
这篇文章谢了两个非常实用的小技巧,文本框最简洁合理的处理会让你的项目微交互效果很好.知道了ScrollView自动布局,一些固定的UI界面你可以快速搭建,不用机械的创建很多控件,写一些低质量代码.
文本框和键盘对齐.gif
ScrollView自动布局
- StoryBoard自动布局,首先在StoryBoard 控制器上加一个ScrollView,距离四周距离都是0,然后我们在ScrollView上加一个View,让这个View距离ScrollView四周对齐,然后按住Control键从View往ScrollView上拖一根线,然后就有下图所示,点击Equal Widths和Equal Heigths是前面打对勾,最后点击Add Constraints.更新约束后就没有报错了.
屏幕快照 2016-10-28 10.16.20.png
如果你想让ScrollView的ContantSize高度是屏幕高度2倍,你可以点击View,右侧的约束设置里设置高度是ScrollView的2倍,然后就可以上下滚动了,你想加控件就加到这个view上就ok了!
屏幕快照 2016-10-28 14.11.20.png
屏幕快照 2016-10-28 14.06.31.png
- 纯代码ScrollView自动布局,不解释见下面代码你自然就懂了.
UIScrollView *scrollView = [[UIScrollView alloc] init];
scrollView.delegate = self;
self.scrollView = scrollView;
[self.view addSubview:scrollView];
// 1. 添加一个视图，四周和 scrollView 一致
UIView *containerView = [[UIView alloc] init];
containerView.backgroundColor = [UIColor whiteColor];
self.contentView = containerView;
[scrollView addSubview:containerView];
// 2. 自动布局
[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(self.view);
}];
[containerView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(scrollView);
// 通过宽高设置 contentSize
make.size.mas_equalTo(CGSizeMake([UIScreen mainScreen].bounds.size.width, 1000));
}];
// 3. 之后的布局控件，全部添加到 containerView 上即可！
输入框和键盘精确对齐
文本框处理很多时候挺烦人的,我整理了我的处理方法,如果键盘弹出时候不遮挡输入框,我就不让背后的ScrollView滑动,如果遮挡了,我让TextField地步和键盘顶部精确对齐.主要思路是: TextField距离屏幕顶部距离加上键盘高度和自身高度,之和等于屏幕高度时候就对齐了.
- (void)keyboardWillShow:(NSNotification *)notification
{
NSDictionary userInfo = [notification userInfo];
NSValue aValue = [userInfo objectForKey:UIKeyboardFrameEndUserInfoKey];
//键盘高度
__block CGFloat keyboardHeight = [aValue CGRectValue].size.height;
if (keyboardHeight <=0) {//!!搜狗输入法弹出时会发出三次UIKeyboardWillShowNotification的通知,和官方输入法相比,有效的一次为keyboardHeight都大于零时.
return; }
CGFloat delta = 0.0;
//delta为输入框距离顶部高度 - 屏幕除键盘和输入框之外的高度 - 你留的缝隙
delta = self.history_Y_offset - (kMainScreenHeight - keyboardHeight -_textFieldH - 10);
CGPoint offset = self.scrollView.contentOffset;
offset.y += delta;
if (offset.y < 0) {
offset.y = 0;
}
//移动scrollView 如果文本框的位置在顶部则不需要移动scrollView
if (self.history_Y_offset + _textFieldH + keyboardHeight > kMainScreenHeight) {
[self.scrollView setContentOffset:offset animated:YES];
}}
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
UIWindow *window = [UIApplication sharedApplication].keyWindow;
//记录文本框的位置的y
self.history_Y_offset = [textField convertRect:textField.bounds toView:window].origin.y;
return YES;
}
屏幕快照 2016-10-28 14.13.15.png
