WWDC 2021 - Customize and resize sheets in UIKit

원본 영상: https://developer.apple.com/videos/play/wwdc2021/10049/

 

• iOS 15에서는 iOS13에 추가된 시트 스타일에 이어, 여러 사용자 정의 옵션을 추가하여 다양한 형태의 표현이 가능하도록 하였습니다.

• 디밍 View를 제거하여 시트가 표시되는 동안 사용자가 시트 뒤의 콘텐츠와도 상호 작용할 수 있는 비 모달 UI를 만들 수 있습니다.

• 가로 모드에서 전체 화면이 아닌 모양으로 표시하는 방법을 포함한 새로운 옵션들에 대해 알아볼 것입니다.

• 일반 크기 클래스의 팝오버의 모습(위)과 더 작은 크기의 시트(아래) 간에 원활하게 조절할 수 있는 UI를 설정하는 방법을 볼 것입니다.

 

Getting a sheet

• UISheetPresentationController라는 새로운 UIPresentationController 하위 클래스를 통해 시트의 사용자 지정 옵션을 설정할 수 있습니다.

• 이 클래스의 인스턴스를 가져오는 일반적인 방법은 이 뷰 컨트롤러를 표시하기 전에 sheetPresentationController 속성을 읽는 것입니다.
• 이 함수는 기본적으로 non-nil의 객체를 반환하며, 모달 스타일 뷰 컨트롤러의 시트나 페이지 시트를 반환합니다.
  이 객체를 통해 다양한 속성을 설정할 수 있습니다.

• Detent는 자연스럽게 완전히 확장되도록 두었을 때, 시트가 위치하는 높이입니다.

• 완전히 확장된 프레임은 iPhone 및 iPad에서 위와 같은 위치를 가질 수 있습니다.

• iOS 15에는 약 절반 정도의 높이를 가지는 중간 위치의 Detent(위)와 가장 크게 확장된 높이를 가지는 Large Detent의 두 가지가 있습니다.

• 시트에서 지원하는 Detent를 지정하기 위해서는 sheet.detents 배열을 설정하면 됩니다.

• 이 속성의 기본값은 large이므로 별도로 설정하지 않으면 표준 전체 높이 시트를 얻게 됩니다.

• medium과 large의 배열로 설정하면 두 위치 사이에서 조절할 수 있는 시트를 얻을 수 있습니다.

• 기존 iOS 14 SDK를 대상으로 했던 코드 예제가 위와 같습니다.
• 위의 showImagePicker함수에서는 표준 이미지 선택 시트를 표시합니다.
• 이미지가 선택되면 선택기 didFinishPicking 함수가 호출되어, 선택한 이미지를 View에 설정할 수 있게 됩니다.

• 이 예제를 보면 사진 버튼을 탭 했을 때 사진 선택기가 앱 전체를 덮는 것을 볼 수 있습니다.

• 또한 사진을 선택하면 사진 선택기가 닫히고 화면에 선택한 사진이 표시됩니다.
• 하지만 다른 사진을 선택하고 싶다면 이 전체 과정을 다시 수행해야 합니다.

• 이를 해결하기 위해 picker를 표시하기 전에 detents에 medium과 large를 설정합니다.
• 또한 didFinishPicking 함수에서 사진 선택 화면을 해제하는 코드를 제거했습니다.

• 이제는 사진 선택 화면이 절반 크기로 나타나서 선택할 수 있으며, 원한다면 다른 사진을 선택해서 새로운 사진으로 업데이트할 수 있습니다.
• 원한다면 이 선택 화면을 위로 끌어올려 전체 화면으로 만들 수 있습니다.

• 이미지 선택기의 스크롤 뷰를 위로 스크롤하면 시트도 같이 위로 움직이게 됩니다.
• 위의 예에서는 시트의 상단바를 끌어서 이미지 선택 시트의 크기를 명시적으로 조정하지 않는 한 이미지 선택 시트가 위로 올라가지 않고 스크롤만 되는 것이 더 좋습니다.
• 이런 경우에 prefersScrollingExpandsWhenScrolledToEdge 속성을 기본값인 true에서 false로 변경하면 시트가 같이 스크롤되는 것이 방지됩니다.

• 이제 사진 목록을 스크롤할 때 시트가 위로 스크롤되지 않습니다.

• 하지만 여전히 상단바를 드래그하여 사진 목록을 전체 화면으로 만들 수 있습니다.

• 이미지 선택 목록이 전체 화면으로 표시되고 있을 때, 이미지를 선택하면 중간 위치로 움직이도록 만들기 위해서 sheet의 selectedDetentIdentifier를 medium으로 수정할 수 있습니다.

• 그러면 선택 시에 이미지 선택 시트가 중간으로 이동하지만, 너무 빠르게 움직입니다.

• sheet.animateChanges 블록으로 이런 속성 설정을 감싸서 쉽게 애니메이션으로 변경할 수 있습니다.

• 이제는 아래로 애니메이션 되면서 변경되는 것을 볼 수 있습니다.

• 또 다른 방법으로는 smallestUndimmedDetentIdentifier 속성을 설정하면 해당 속성 크기보다 같거나 작으면 딤효과가 제거됩니다.

• 이제 중간 위치에서는 딤효과가 없는 것을 볼 수 있습니다.

• 하지만 최대 크기인 상태에서는 여전히 딤효과가 적용됩니다.

• 이러한 수정은 단순히 딤효과가 없어질 뿐 아니라 모달 효과가 사라져서 시트 뒤의 뷰와도 상호작용 할 수 있게 됩니다.

• 또한 검색 창을 눌러 키보드가 나오면 시트가 키보드에 맞춰 자동으로 커지며, 키보드가 닫히면 자동으로 축소됩니다.

 

Other options

• iOS 13에서는 가로모드일 때 시트가 전체 화면을 차지하였습니다.

• 이제는 시트가 화면의 중앙에만 표시되는 대체 모양을 사용할 수 있게 되었습니다.

• 이 새로운 모양은 preferEdgeAttachedInCompactHeight를 true로 설정하면 바로 적용됩니다.
• 가로 영역의 크기는 safe area만큼 비워지는 것을 볼 수 있습니다.

• widthFollowsPreferredContentSizeWhenEdgeAttached를 true로 설정하면 preferredContentSize를 따르게 됩니다.
• 따라서 기본 넓이는 더 작아지며 사용자가 원하는 크기를 preferredContentSize로 지정할 수 있습니다.

• 또한 잡을 수 있는 Grabber를 표시하도록 지정하는 prefersGrabberVisible 옵션도 있습니다.

• 또한 시트의 모서리를 좀 더 둥글게 할 수 있는 preferredCornerRadius 옵션이 제공됩니다.

 

Adaptation from popover

• 마지막으로, iPad에서 시트를 생성하는 대신 팝오버가 필요한 경우는 위와 같은 코드를 적용할 수 있습니다.
• 먼저 picker의 modalPresentationStyle을 popover로 설정합니다.
• sheetPresentationController를 호출하는 대신 popoverPresentationController를 호출합니다.
• barButtonItem에서 소스를 설정하고, adaptiveSheetPresentationController에서 설정할 수 있는 속성을 얻습니다.
• 나머지 설정은 기존 시트에서와 동일합니다.

• 이제 버튼을 누르면 팝오버로 사진 선택 목록이 나타나는 것을 볼 수 있습니다.

• 화면의 크기를 조절하면, 가운데 높이로 알맞게 조정됩니다.

• 원한다면 상단바를 드래그하여 최대 크기로 만들 수도 있습니다.

• 이제 didFinishPicking 함수를 수정하여 popoverPresentationController의 adaptiveSheetPresentationController를 얻어낸 다음 이미지 선택 시 medium크기로 돌아가는 로직을 넣을 수 있습니다.

• 이제 다시 최대 크기의 이미지 목록에서 이미지를 선택할 수 있습니다.

• 그러면 자연스럽게 목록이 하단으로 내려가는 것을 볼 수 있습니다.

 

목차: https://nyancoder.tistory.com/2