[Swift] WWDC 21 Customize and resize sheets in UIKit

오랜만에 포스팅이네요!
일이 많아서... 한달..공백이..ㅠ

이번에 볼 게시글은 밑에서 올라와서 반만 보여지는 뷰?? 그런 걸 바텀시트라 부르는것 같아요
그러한 뷰를 힘들게 커스텀해서 띄우는 작업을 했을텐데

이제는!
UISheetPresentationController를 이용해서 바텀시트를 띄울 수 있는 방법을 제시해줘요
보통 present형식을 이용해서 간단하게 구현할 수 있어요
WWDC2021에서 소개됬기때문에 iOS15+ 구요 ㅎㅎ

코드를 보면서 하나씩 살펴갈게요~~!

guard let nextVC = storyboard?.instantiateViewController(withIdentifier: "ViewController") else {
    return
}
nextVC.view.backgroundColor = [.systemPurple, .green, .blue].randomElement()!
if let sheet = nextVC.presentationController as? UISheetPresentationController {
    sheet.detents = [.medium(), .large()]
}
present(nextVC, animated: true)

다음화면을 띄울 뷰컨트롤러를 정의해두고
presentationController를 사용해서 UIPresentationController에 접근하고 UISheetPresentationController로 타입변경을 통해서 sheet속성을 설정할 수 있도록 할거에요

detents가 보이죠!
이게뭐냐면
모달형식의 뷰컨트롤러를 띄웠을때 sheet를 보여줄 영역을 뜻행요
배열형태로 입력받기때문에 여러개를 입력했다면
sheet를 드래그해서 멈추면 그위치에 멈추는 지점을 설정하게되요
[large, medium]인경우 중간에서 드래그해서 위로 올리면 꽉찬 화면이 보여지는 그런 기능이에요

시뮬레이터 자체녹화기능을 사용했는데 디바이스 테두리영역이 같이 녹화가 되서 모서리부분이 어색하네요.. ㅎㅎ
아무튼!
중간에 멈추고 띄우고 간편하게 이제 이러한 뷰를 작성할 수 있어요!

속성을 더 알아볼까요~

PrefersScrollingExpandsWhenScrolledToEdge
디폴트값 true
스크롤뷰 하단에서 위로 스크롤하면 전체화면이 되면서 커지는 현상이 일어나는
이러한 현상을 false로 설정해서 막을 수 있어요

왼쪽은 false 오른쪽은 true

selectedDetentIdentifier: detent 변경가능
특정 작업을 하면서 크기를 변경하고 싶을 때 사용할 수 있어요

animateChanges: 사이즈가 변경되면서 resize가 일어날 때 애니메이션을 줄 수 있어요

curSheet?.animateChanges { curSheet?.selectedDetentIdentifier = .medium }

애니메이션부분을 제거하면 뚝뚝하게 뷰컨트롤러가 줄어드는걸 볼 수 있어요 :)

smallestUndimmedDetentIdentifier: 디밍뷰라고하는 뒷공간에 흐리게 처리하는 뷰를 원하지 않는 경우 설정할 수 있어요
기본적으로 뒤에 디밍뷰처리가 되어있어요
medium을 넣어준경우엔 medium상태일 때만 디밍뷰가 사라져서 하얗게 보여요(large도 마찬가지)

왼쪽: 처음상태, 가운데: 아무설정안한 값(nil), 오른쪽: .medium적용

prefersEdgeAttachedInCompactHeight: true설정시 safe area만큼만 크기를 제공해요
widthFollowsPreferredContentSizeWhenEdgeAttached: true시 컨텐츠 크기만큼만 크기를 제공행요

가로모드일때 확연히 차이가 나죠

왼쪽은 prefersEdgeAttachedInCompactHeight, 오른쪽은 widthFollowsPreferredContentSizeWhenEdgeAttached

prefersGrabberVisible: sheet의 손잡이 나타냄 유무를 설정할 수 있어요
코드하나로 손잡이를 뚝딱...

preferredCornerRadius: sheet의 둥근 정도(라운드)를 설정을 할 수 있어요


아이패드인경우
popover모드가 있어서 접근하는 방법이 다를 수도있어요
popover에 popoverPresentationController로 접근하고
그 popover에서 뜰 sheet에 접근하기위해 adaptiveSheetPresentationController를 사용해서 접근해요

컴팩트한 크기클래스에 적응할 시트를 반환해줘요반환형이 UISheetPresentationController라서 위의 파라미터를 모두 사용할 수 있구요

if let sheet = nextVC.popoverPresentationController?.adaptiveSheetPresentationController { 
	sheet.detents = [.medium(), .large()]
}
present(nextVC, animated: true)