Demystifying Views in iOS · Loading Nib Files | raywenderlich.com

🎓 Courses & Articles
1
This is a companion discussion topic for the original entry at https://www.raywenderlich.com/4518-demystifying-views-in-ios/lessons/3
2

Hi @catie,

I’m a bit fuzzy on what our superview is responsible for. Having been further ahead I vaguely understand that it’s responsible for being the Nib file’s owner—but I can’t say as fully understand what that concept means just yet either. Would you be able to briefly clarify what the CardSuperview’s job is?

3

We explain the main purpose of it at the very beginning of the next video. Looks like it should be explained in this video instead! Let us know if that explanation isn’t enough to go on; I think we could add an animation to help out there too.

4

@jessycatterwaul Thanks again, it’s starting to come together for me now. I think what I have been missing is a clear picture in my head of what our final product is going to look like. We get a bit of an introduction to it in the beginning, but not an in-depth one where I came away with enough of a sense of all the moving pieces and their expected behaviours.

The penny dropped for me when you helped me understand the optional in our flip method. I hadn’t yet connected in my head that we have to model a flip-over behaviour and a flip-to-another behaviour for the card.

IMHO, what would be useful to me is to maybe kick off the chapter with a more thorough walkthrough of the final product, and then that model could be revisited in various episodes? eg. Here we’re going to model the flip-over behaviour we see here…now we’re going to build our grid of flip cards we see here…etc.

Thank you very much for taking the time to answer all these questions. It’s been very helpful and I think it’s clicking for me now! :grinning:

1 Like
5

And thank you, as well! Revisiting our Q&A will be helpful for a course update when we hone in on what to improve.

6

@billmatthews, I completely agree with your comments and solution. I find that there is too much ‘mystery’ about what is going on and more specifically ‘why’. I just get into zombie mode where I follow the steps to see what will eventually happen.
Even simple things in the previous video were happening and I kept asking ‘why’? It would be instructions like,
“We are going to need two image views” - why?
“These will need to be constrained to be centered and match the height and width of the parent View” - why?
“For this second imageView we will need to create a separate class” - WHY???

Of course things start to make sense when the results are revealed, but it becomes a lot of monkey see monkey do in the meantime. I waste a lot of time watching the videos over and over again trying to connect the dots of what happened earlier so that it can eventually make sense.

So yeah, a solid overview would be extremely useful. And as @billmatthews mentioned, revisiting that overview at different steps would be really helpful.

I think that was what made @jessycatterwaul, and @catie’s Intro to Animation so effective. I felt in that course that because I knew where things were headed, I could anticipate steps a bit more, and often try to solve it first, before seeing how the experts :grinning: did it better!

7

@chuck_taylor Thank you for your feedback - much appreciated! :]

8

@jessycatterwaul @catie hey guys, had a question on Demystifying Views, Part 2, Lesson 10. Trying to figure out the forums and the best place to post questions on specific tutorials. This was the closest I could find. Is there a general forum for every main course?

I can’t wrap my head around the bolded parts in the code below.

for subview in subviews as! [UIStackView] {
let cardViews = subviews.map { _ in
nib.instantiate(withOwner: owner).first { $0 is FrontCardView }
} as! [FrontCardView]

cardViews.forEach( subview.addArrangedSubview)
}

  1. subviews.map - we are mapping the collection we are iterating over. Is this just a convenient way to instantiate 2 nibs per each horizontal stack view? doesn’t seem like we are using the elements we are mapping at all.

  2. subview.addArrangedSubview - the addArrangedSubview takes a UIView as a parameter. Is swift just automatically passing in the element we are currently iterating over in the forEach loop? Had not seen this before.

Thanks guys!

Craig

1 Like
9

Hi Craig!

Is there a general forum for every main course?

No. What we have instead are per-episode discussions. Scroll down from the video player for any one of them, and you’ll find a “Show Comments” button, and then, a “Continue Discussion” button. (This is the discussion page for Part 1, Episode 3.)

The code you’re asking about is written in Part 1, Episode 7. If the existing discussion for it doesn’t clear things up for you, feel free to continue the discussion, and I’ll chime in there.

1 Like
10

It used to be easier to follow along with Ray’s video courses, now are way too fast throwing a lot of code in an unordered fashion just for convenience with the promise of being cleared up later.

I prefer the old way, let’s start with the basics at a slow pace and build up from there. I really wanted to learn better usage of Views and Controllers, but this courses are just too fast.

11

@renexandro Please let us know what you don’t understand exactly when you get a chance. Thank you!

12

Hi, catie,

Thanks for the tutorial, that benefits me a lot.

Inside the FrontCardImageView() class, there is a line “mask?.frame = bounds”. I understand you said it purpose is to make sure that FrontCardImageView is constrained to its superview’s bound, but I want to dig a bit more about the how the UI is loaded under the hood. My questions are:

(1) Are the lines setting constraints of each subview added to SuperCardView in side the UIView extension used to set bounds of CardView to the bounds of SuperCardView, is that right?

(2) In the .xib, the FrontCardImageView has already been bounded to the FrontCardView, so is it that because these constraints do not apply to the mask of FrontCardImageView so that we need line “mask?.frame = bounds” to contain mask to its bounds?

Or simple version of my question,

What happened before and after the line “mask?.frame = bounds” is called? What have been changed to make the foreground image fit into the CardView?

Best

Jing

13

Hi Jing,

(1) Are the lines setting constraints of each subview added to SuperCardView in side the UIView extension used to set bounds of CardView to the bounds of SuperCardView, is that right?

Yes. :+1:

(2) In the .xib, the FrontCardImageView has already been bounded to the FrontCardView, so is it that because these constraints do not apply to the mask of FrontCardImageView so that we need line “mask?.frame = bounds” to contain mask to its bounds?

Yes. Unfortunately, the mask is not controllable with Auto Layout, so we have to set it manually.

Let me know if that doesn’t answer your “simpler” version!

14

Hi, Jessy,

Thanks for your clarification and I am quite clear now. Actually I have another follow up question, for this kind of underlying UI loading mechanism, is there a course or good resource to dig into?

Best

Jing

1 Like
15

@jessycatterwaul @catie Can you please help with this when you get a chance? Thank you - much appreciated! :]

16

I think the best resources for what you’re asking about might be these:

Let me know if that doesn’t steer you onto the right track.