Scroll View with text and img inside

(Swift, macOS, storyboards)

I try to make a simple page with an scroll, text and images. Similar to help pages in all mac programs. For instance, TextEdit help:

I tried many things. For instance:

  • Scroll View with constraints 0 to top, bottom, leading, trailing
  • Inside the Scroll View: a Label, an Image View, another Label. The labels with constraints 20px top, bottom, leading, trailing.
  • Labels Priority 750. The rest of constraints Priority 1000

With this, the user can change the width and height of the window, the text adapts but if the window is smaller than the content, I do not see the scroll. The attributes of the scroll are Show Vertical Scroller and Automatically Hide Scroller. If I change one of the options, I do not see the scroll space (or I see the scroll but not the movable part of the scroll)

How to have text, images, a window that can change width, height, and a scroll that appears when the content is bigger than the window. (Like a regular web page or the help that Apple has in many programs)?

Up vote post of narcisfromgirona Down vote post of narcisfromgirona
1.5k views
Posted by
narcisfromgirona
Reply
Add a Comment

Replies

I would put all the objects Label, Image View, other Label inside a Container View, and define their constraints relative to this container view.

As for the constraints, here is what I do for UIKit, it should be easily adapted to Cocoa:

  • Create a ScrollView (as you did)
  • Define its dimensions by constraints relating to the Safe area
  1. leading = 0
  2. trailing = 0
  3. top = maybe non zero if you scroll a part of the screen
  4. bottom = 35 (here to leave room for some buttons below)
  5. you can keep the content layout and frame layout ON
  • Create a Container View (this is the Content View, named View here)
  • Place it inside the scrollView (appears inside Scroll in the object hierarchy)
  • Define the constraints with respect to the scrollView (Superview)
  1. leading = 0
  2. trailing = 0
  3. equalWidth with Scroll: we don't want to scroll horizontally
  4. top = 0
  5. bottom = 0
  6. Above all, do NOT make equal height with Scroll: there would be no more vertical scroll
  • Define the dimension constraints of the ContentView to correspond to the complete content above which we will scroll (here the 4 items and the 3 switches)
  1. height = 262
  2. width has been set equal to the width of the scrollView

Note: this is necessary to eliminate red warnings from IB

  • Place objects in the ContentView

for each, define the constraints in relation to the ContentView.

Don't hesitate to ask if something unclear.

Posted by
Claude31
Up vote reply of Claude31 Down vote reply of Claude31
Add a Comment

When you say "5. you can keep the content layout and frame layout ON", what do you mean?

Posted by
narcisfromgirona
Up vote reply of narcisfromgirona Down vote reply of narcisfromgirona
Add a Comment

When you say "5. you can keep the content layout and frame layout ON", what do you mean?

That's in fact a UIKit setting as I said at start.

You should probably just ignore this for Cocoa (could not find its exact equivalent).

Posted by
Claude31
Up vote reply of Claude31 Down vote reply of Claude31

  • I tried many things and I cannot make it work for macOS. Then I tried with iOS and it worked well easily. There must be something in macOS that must be different. Perhaps what is different is the height of the Container View and its View Controller. I tried different options and none worked for me.

    —
    narcisfromgirona
Add a Comment

Here is an example with macOS:

Posted by
narcisfromgirona
Up vote reply of narcisfromgirona Down vote reply of narcisfromgirona

  • In what you show here, I do not see the textViews ("Lorem ileum…") inside the view inside the ScrollView. That's what I would do.

    —
    Claude31

  • In your answer you say "Create a Container View..." That's in the image. Did you mean a Custom View? In any case, the problem is the same in macOS

    —
    narcisfromgirona

  • My question was: why don't you put directly the textViews ("Lorem ipsum…") in a view (not view controller) inside this Container View, close to what you showed in your original post ?

    —
    Claude31
Add a Comment

Open Library > Container View. If you use that, it creates that View Controller.

In any case, I tried both ways with the same result.

Posted by
narcisfromgirona
Up vote reply of narcisfromgirona Down vote reply of narcisfromgirona
Add a Comment