오늘은 WWDC 2021에 나온 주제인 'Meet the UIKit Button System' 영상을 보고 앞부분을 먼저 정리해보려고 합니다.
이전에 iOS 개발을 하다가 중간에 UIButton 스타일이 갑자기 여러 개가 돼서 당황했던 적이 있었는데 자주 사용하는 것만 사용하고 이제야 공부를 하게 되네요 반성...
해당 영상은 iOS15 환경에서 button을 더 좋게 만들 수 있는 방법들에 대해 설명해주고 있습니다.
먼저 iOS15 환경에서 UIKit은 Plain, Gray, Tinted, Filled 4가지의 basic style을 제공하고 있습니다.
Default는 iOS15 이전 버전에서 사용되던 버튼 스타일인 것 같습니다.
더 많은 기능들로는
Dynamic type을 default로 지원하고,
Multiline text를 지원합니다.
Dynamic type이 어떤 것이냐 하면 HIG에서 '사용자가 원하는 글씨 사이즈로 App의 contents를 볼 수 있는 flexibility를 제공한다'라고 나와있습니다.
예를 들어 아이폰을 사용할 때 문자를 볼 때 글씨가 너무 작아서 해당 글씨를 더 키우고 싶을 때 환경 설정에서 우리는 텍스트의 크기를 조절할 수 있습니다. 이 때 Dynamic type을 지원하는 텍스트라면 설정한 크기에 맞게 조절이 되는 것이고 Dynamic type을 지원하지 않는다면 처음 설정한 크기를 그대로 볼 수 밖에 없는 것입니다.
자 그럼 이러한 기능들을 가지고 UIButtonConfiguration 에 대해 얘기를 해볼 겁니다.
영상의 예시를 함께 보겠습니다.
먼저 처음 'Sign In' 버튼은 기존 UIKit 버튼처럼 기본적인 디자인으로 plain system 버튼을 생성할 수 있습니다.
여기에 새로운 filled 스타일을 사용해보겠습니다.
configuration을 사용해서 버튼 스타일을 쉽게 업데이트할 수 있습니다. 스토리보드를 사용해서도 설정할 수 있습니다.
단지 스타일을 바꾸는 것뿐만 아니라 UIButtonConfiguration을 사용하여 더 다양한 버튼을 만들어 보겠습니다.
configuration으로 title, attributedTitle, subtitle, attributedSubtitle, image, padding 등등 많은 것들을 설정할 수 있습니다.
그리고 configurationUpdateHandler 라는 것이 있습니다.
버튼의 갱신이 필요할 때 호출되며, 이를 통해 한 곳에서 설정 코드를 관리할 수 있습니다. configuration에 있는 모든 프로퍼티는 업데이트 가능합니다.!
예시에서는 항목의 수량이 변경되면 버튼의 텍스트를 업데이트하고 싶을 때 사용되고 해당 값이 설정될 때 setNeedsUpdateConfiguration() 을 호출하면 됩니다.
다음으로 새로운 기능인 showActivityIndicator 가 있습니다. 해당 프로퍼티를 true로 설정하면 Activity Indicator를 표시할 수 있습니다. ConfigurationUpdateHandler 안에서 로직이 진행되고 있을 때와 끝났을 시점에 적절히 사용하면 좋을 거 같아요
아래 그림은 contentInsets와 각각의 padding이 어디를 나타내는 지 보여주는 그림입니다.
이처럼 Semantic styling으로 간단하게 각 상황에 맞게 동작하는 버튼을 만들 수 있습니다. 아래와 같이 프로퍼티 변경 후에 추가적인 작업 없이 state별 상태를 가지게 됩니다.
위의 내용들을 전체적으로 포함하여 직접 버튼을 만들어 보았습니다.
iOS15 이전 버전에서는 configuration을 지원하지 않기 때문에 configuration이 포함된 코드들이 컴파일 에러가 발생합니다. 꼭 확인하시고 사용하시기 바랍니다.
먼저 버튼을 누를 때마다 1씩 증가하는 itemCount 변수, activity indicator를 활성화하는 isBusy 변수를 선언해줬습니다.
didSet에 setNeedsUpdateConfiguration() 함수를 삽입해서 각 프로퍼티가 바뀔 때마다 configurationUpdateHandler가 실행됩니다.
그 후 title과 subtitle, image를 넣어 주면 아래와 같은 모양의 버튼이 완성됩니다. 지금까지 UIView에 각각의 label과 imageView를 넣어주면서 만들었었는데 정말 쉬워졌어요! 빨리 다 iOS15 이상으로 넘어가자...
그리고 configurationUpdateHandler를 통해 프로퍼티를 업데이트 해줍니다.
아래는 버튼을 눌렀을 때 버튼의 isSelected 프로퍼티를 변경해주고 5초 동안 비활성화 되는 함수입니다.
작동하는 것을 보면 activity indicator까지 잘 보여지는 것을 볼 수 있습니다.
gif로 변경하면서 영상이 많이 느려졌네요..
어쨌든! 여기까지 WWDC2021 'Meet the UIKit button system' 영상의 절반 정도까지의 내용과 실습이었고 다음 내용에서 나머지 반도 다뤄보도록 하겠습니다.
프로젝트할 때 타겟을 15로 두고 편리하게 사용해봐야겠어요 ㅎㅎ
[참고]
