Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
456 views
in Technique[技术] by (71.8m points)

ios - View at the bottom in a UIScrollView, with AutoLayout

I'm setting up content in a scroll view with autolayout. The objects in the scrollview are pinned top-to-bottom to the previous one, so that they are under one another. I have a footer view that is added at the end, below these objects.

Here's the catch: when there's few content, the contentView will be smaller than the screen height, so the footer view will appear somewhere in the middle of the screen (which is the normal behavior). But I'd like to prevent that, and make the view stay somewhere at the bottom.

In other words, I would like to setup a double constraint like:

Put this view below all the objects in the scrollview 
AND
keep this view at a distance of max [some number] of the bottom of the screen

In a way that both constraints are always satisfied:

  • If the height of the content is bigger than the screen, then the view appears at the bottom, after scrolling down
  • If the height is smaller, then the view is "pinned" to the bottom of the screen, leaving a space relatively big between the bottom of the content and the top of this view

How can I achieve that with AutoLayout?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Fairly easy to do with Auto-Layout only... no code required.

The key is to use a "content view" to hold the elements, and a greater-than-or-equal constraint between your "bottom" element and your "footer" view.

In this image, yellow is the main view, green is the scroll view, blue is the content view, the labels are gray and the footer view is pink.

enter image description here

  • Start with a fresh view controller
  • add a scroll view, normal constraints (I used 20 all the way around, so we can see the frame)
  • add a UIView to the scrollView - this will be our "content view"
  • constrain contentView Top/Bottom/Leading/Trailing all equal to 0 to the scrollView
  • constrain both the Width and Height of the contentView equal to the scrollView
  • add your elements - here I used 3 labels
  • constrain the labels as usual... I used:
    • LabelA - Top/Leading/Trailing all at 20, vertical spacing to LabelB of 60
    • LabelB - Leading/Trailing at 20, vertical spacing to LabelC of 60
    • LabelC - Leading/Trailing at 20
  • LabelC is also set to Number of Lines: 0 so it will expand with multiple lines of text
  • Add a UIView as a "footer view" (I stuck a label in it)
  • constrain the footerView Leading/Trailing/Bottom all at 20 (so we can see the frame)
  • either set a Height constraint on footerView, or use its content to constrain its height
  • add a Vertical Spacing constraint from LabelC to footerView, and set it to >= 40
  • last step, change the Height constraint of contentView to Priority: 250

Now, as you expand/contract the height of LabelC, the footerView will keep at least 40-pts of vertical space. When LabelC gets big enough to "push" footerView below the bottom, scrollView will become scrollable.

Results:

enter image description here enter image description here enter image description here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...