Building apps for iPhone X

Building Apps for iPhone X

Summary

• Respect Safe Areas
  • safeAreaLayout Guide for Auto Layout
  • safeAreaInsets for manual calculations

Designing for iPhone X

Designing for iPhone X

Building Apps for iPhone XS, iPhone XS Max, and iPhone XR

Building Apps for iPhone XS, iPhone XS Max, and iPhone XR

Updating Your App for iOS 11

Updating Your App for iOS 11

UIKit: App for Every Size and Shape

UIKit: App for Every Size and Shape

• Safe area and layout margins
• Scroll Views
• Building adapt layout

Safe Area

And so a safe area is explained. Let’s talk a little bit about layout margins.

So layout margins are padding. They’re a property that, in general, you have full control over and allows you to specify a space from the edges of the view.

Just like with safe areas, they’re represented by a UI edge insets property, this time called layout margins. Now last year, we also added directional layout margins.

These differ from layout margins in that layout margins use a UI Edge Insets value while directional layout margins uses an NS directional edge insets. And the primary difference between those two structures is that directional insets use leading and trailing instead of left and right, which makes it really easy for you to create layout margins that adapt to RTL layouts.

ScrollView

around. Now let’s talk about a very important concept about extending the scrollable area of the scroll view.

And we do that through a property called content inset. So content inset is a mechanism for you to provide insets that you can specify from the edges of the scrollable area of the scroll view to the content inside. So adding content inset increases the scrollable area and makes the scroll view able to scroll to a larger area.

So let’s set a content inset on the top edge here and see what happens.

class UIScrollView: UIView {
	var adjustedContentInset: UIEdgeInsets { get } 

Well you’re probably asking what’s the difference between this adjusted content inset and the content inset that we just talked about? Great question.

Here’s how it breaks down. Adjusted content inset is equal to the content inset that your app provides plus any automatic insets coming from the system or UIKit.

And so because we now separate these two, it’s a lot easier to reason about what’s happening.

class UIScrollView: UIView {
  var contentInsetAdjustmentBehavior: UIScrollView.ContentInsetAdjustmentBehavior
  }

• alaways behavior
  • The first one is the always behavior. This is pretty straightforward as you might expect. Scroll view is going to always incorporate any system inset like safe area insets into its adjusted content inset on any edge.
    • So no problems. But be careful with this one because if you have something like let’s say a table view on the iPhone 10 in landscape, there are left and right safe area insets. Using this behavior the table view is going to incorporate those into its adjusted content inset, which increases the scrollable area, which is going to make a table view horizontally scrollable.
  • You’re not going to want that behavior. That’s why we have the next behavior which is scrollable axes. For this one, the scroll view is going to independently consider things on the vertical axis and the horizontal axis.
• scrollable axes
  • For this one, the scroll view is going to independently consider things on the vertical axis and the horizontal axis.
  • For each of those, if the content size exceeds the width or the height as appropriate, or if you set the always bounce horizontal or always bounce vertical properties to true, then the scroll view considers that axis scrollable. And it will go ahead and incorporate in the system inset into its adjusted content inset. So in this example right behind me we have a long article that’s scrollable. And so we’re getting those automatic insets incorporated. But what if we had a shorter article? Let’s take a look. Okay. Here’s a shorter article.
  • That will make the scroll view always vertically scrollable.
• automatic
  • 기본적으로 scrollable axes와 비슷하게 동작하지만 차이점이 있음.
  • Or we’ll get to our next behavior, which is automatic. And so automatic works basically the same as scrollable axes, which we just talked about. But it has one additional behavior as part of it that is when the scroll view is inside of a navigation controller, the scroll view will go ahead and adjust its top and bottom content inset even if it’s not vertically scrollable to account for top and bottom bars. So, even in this case where we have a very short article, it still means that we’re getting the right insets. And this is generally the behavior you’re going to want. And that’s why we have it as the default.
• Never
  • 예상한대로 그 자체의 콘텐츠 인셋을 자동으로 조정하지 않음.
  • Alright, that brings us to our last behavior. Never. Now with this one, as you expect, that means the scroll view is never going to adjust its content inset.
  • However, that has some side effects. For one, that means that the scroll view will end up propagating safe area insets on all of its edges just like a regular view. And as we talked about before, that might end up giving you some behavior you don’t really want. For example, if you recall your layout margins are relative to the safe area, which means your layout margins might end up increasing or changing as a result of this. This is also going to disable some very helpful automatic behaviors that scroll view provides like automatic scroll indicator insets. And so if you do a search online and you see a favorite, you know, question and answer website suggesting that you set your scroll view’s content inset adjustment behavior to never, consider instead using additional safe area insets to increase the safe area insets. If your goal is to try to express to the system that you’ve added let’s say a toolbar or some sort of other overlay. Or you could consider just modifying the content inset directly, the property that we talked about in the very beginning. That’s for you to control. And you can use that to add or subtract from the effective adjusted content inset that the scroll view will see.