1

I'm having trouble with UIScrollView and Constraints.

I want to display a FAQ inside my application. This will include several questions and answers, with various length. It won't change after launch, so I handle everything directly in the storyboard. However, it has to work on different iPhone screen size (from iPhone 5 to iPhone 6 Plus).

So what I'm trying to do is :

UIView UIScrollView UIView (FAQ1) UILabel (Question 1) UITextView (Answer 1) UIView (FAQ2) UILabel (Question 2) UITextView (Answer 2) ...

Here is an example of what it looks like (color on purpose, to see at runtime) : Storyboard

Now if I apply some constraints, I manage to get that : iPhone 6 Plus

However it is not scrollable and the text is out on the right side.

If I run the same thing on a smaller screen, I get that : iPhone 5

Which is scrollable this time (not more than what you see on the screenshot...) and the text is still out.

Is there anyone who could help me understanding how to use Constraints properly with an UIScrollView ?

If possible the text size has to shrink on small screens. If it isn't, it should keep the same size but the UITextView will be scrollable too.

Improve this question

1 Answer 1

Reset to default
1

The best way to use scrollview and auto layout is to add a view inside the scrollview and pin all its edges to scroll view and equal widths to superview, Pin all edges of scrollview to superView

  1. pin top, left , right and height of your label to your FAQ1 view.
  2. pin top of your text view to label and left right and bottom to your FAQ1 view.
  3. pin the height of your FAQ1 view, and left and right of your faq1 view to content view.
  4. Follow step 1 to 3 for all your faq views.
  5. Pin top of your faq1 view to top to top of content view
  6. Pin the top of the next faq view to bottom of the previous faq view.
  7. pin bottom of the last faq view to bottom of content view

when adding your faq1 view pin its top to top ,left and right to contentView's top left and right with necessary padding.

You can find the sample code here Hope this solves your problem

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

At first I didn't manage to make it work, even if I was correctly following your instructions. It was driving me crazy, since your project was working fine. Eventually I figured out that the ContentView (inside the ScrollView) was missing and I had to set it's width to be equal to it's parent. Now that I understand it a little bit more I should be able to complete my view. I'll post again if I have a new issue. Anyway, thanks !
@lchamp i had mentioned about the content view in the first line itself. however i used the word view instead of contentView. Can I get a voteUp if my solution helped

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.