iOS AutoLayout with UIScrollView

Hello friends… 🙂 Up to now you have learnt how to deal with UIImageView, UITexiField and UIButton in an AutoLayout environment. Today we will add UIScrollView to that knowledge bank. 

In order to have a flow with my posts, I would like to complete the log in interface with UIScrollView that we used for our last two blog posts. At the end of my last post, I have mentioned a possible difficulty that you may come across with the log in interface and one solution would be UIScrollView. Let’s see how to implement that solution.

Main things that you have to understand are;

• Try to put all the scrollable content inside of one UIView and place that UIView inside of the UIScrollView
• To practically see the scrollable feature in your final product, you have to provide some constraints, which will exceed the default screen sizes of your testing device

Following is the final outcome of the user interface and I will write all the constraints that I have used in Y = mX + C format.

Figure 1

Constraints related to Username UITextField

View_Content.Center Y = 1 * UITextField_Username.Center Y + 0
View_Content.Trailing = 1 * UITextField_Username.Trailing + 60
UITextField_Username.Leading = 1 * View_Content.Leading + 60
View_Content.Center X = 1 * UITextField_Username.Center X + 0
Constraints related to Password UITextField

View_Content.Trailing = 1 * UITextView_Password.Trailing + 60
UITextField_Password.Leading = 1 * View_Content.Leading + 60
UITextField_Password.Top = 1 * UITextField_Username.Bottom + Standard
View_Content.Center X = 1 * UITextField_Password.Center X + 0
Constraints related to Sign In UIButton

View_Content.Width = 4 * Button_Signin.Width + 0
View_Content.Bottom = 1 * Button_Signin.Bottom + 40
View_Content.Center X = 2 * Button_Signin.Center X + 0
Button_Signin.Top >= 1 * UITextField_Password.Bottom + 161
Constraints related to Register UIButton

Button_Register.Top >= 1 * UITextField_Password.Bottom + 161
View_Content.Width = 4 * Button_Register.Width + 0
View_Content.Bottom = 1 * Button_Register.Bottom + 40
View_Content.Center X = 0.666 * Button_register X + 1
Constraints related to Logo UIImageView

ImageView_Logo.Width = 100
ImageView_Logo.Height = 100
ScrollView.Center X = 1 * ImageView_Logo.Center X + 0
ImageView_Logo.Top = 1 * View_Content.Top + 40
Constraints related to Content UIView

View_Content.Top = 1 * ScrollView.Top + 0
ScrollView.Trailing = 1 * View_Content.Trailing + 0
ScrollView.Bottom = 1 * View_Content.Bottom + 0
View_Content.Leading = 1 * ScrollView.Leading + 0
View_Content.Height = 1 * View.Height (Priority 250)
View_Content.Width = 1 * View.Width + 0
Constraints related to UIScrollView

Superview.Trailing = 1 * ScrollView.Trailing + 0
ScrollView.Leading = 1 * Superview.Leading + 0
ScrollView.Top = 1 * SuperView.Top + 0
Bottom Layout Guide.Top = 1 * ScrollView.Bottom + 0

I have highlighted special constraints that are most important to scrolling feature or that we haven’t used in previous tutorials.  So that is all about todays lesson.

Even though what I am going to tell now is not directly related to todays post, it is the second solution that you can have for the problem we mentioned at the beginning of this blog post. But, this solution is suitable when we having a single orientation in our application. Following is the code snippet for it

- (void)keyboardDidShow:(NSNotification *)notification {
 NSLog(@"%s - %d", __PRETTY_FUNCTION__, __LINE__);
 
 NSDictionary *notifInforDic = [notification userInfo];
 NSValue *keyboardFrameBegin = [notifInforDic valueForKey:UIKeyboardFrameBeginUserInfoKey];
 CGRect keyboardFrameBeginRect = [keyboardFrameBegin CGRectValue];
 int keyboardHeight = (int) keyboardFrameBeginRect.size.height;
 
 int viewHeight = (int) self.view.bounds.size.height / 2;
 
 [UIView animateWithDuration:0.35 animations:^{
 self.view.center = CGPointMake(originalCenter.x, viewHeight - keyboardHeight);
 }];
}

Anyway, that will ended up my last post promise as well 😉 Next time we will meet with something interesting. Till then, have a good coding.