ScrollView SB/纯代码自动布局+输入框和键盘精确对齐

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