[iOS/Swift] UIButton in iOS15 WWDC 정리

Buttons

출처 wwdc21

• 4가지 기본 style

 

Button configuration

 

• config.image 프로퍼티에서 지정한 이미지의 위치를 imagePlacement를 사용하여 위치를 지정해 줄 수 있음

addToCartButton.configurationUpdateHandler = { [unowned self] button in
	// 이미 버튼에 지정되어 있는 configuration을 받아옴
	var config = button.configuration
    
    // 버튼이 highligted 됬을 때 fill이미지로 지정하고 아닌 경우에는 outline이미지를 적용
    config?.image = button.isHighlighted
    	? UIImage(systemName: "cart.fill.badge.plus")
        : UIImage(systemName: "cart.badge.plus")
        
    // 변경된 configuration을 전달
    button.configuration = config 
}

• 버튼을 눌렀을 때 이미지를 filled하게 채우고 싶다면 이미지를 적절한 타이밍에 업데이트 해줘야 함 -> 변경사항이 발생할 때 configurationUpdateHandler를 사용함
• isHighlighted는 UIButton의 기본 상태값이므로 이 값의 업데이트가 발생하면 configurationUpdateHandler가 호출됨 

addToCartButton.configurationUpdateHandler = { [unowned self] button in
	var config = button.configuration
    
    config?.image = button.isHighlighted
    	? UIImage(systemName: "cart.fill.badge.plus")
        : UIImage(systemName: "cart.badge.plus")
    config?.subtitle = self.itemQuantityDescription    
    button.configuration = config 
}

• UIButton의 기본 상태값이 아닌 개발자가 설정한 값을 변경했을 때 configurationUpdateHandler을 호출하고 싶은 경우 -> 위 코드에서 itemQuantityDescription 값이 변경되는 경우 configuration의 subtitle을 변경해야 함

private var itemQuantityDescription: String? {
	didSet {
    	addToCartButton.setNeedsUpdateConfiguration()
    }
}

• itemQuantityDescription 값 변경 -> didSet 호출 -> setNeedsUpdateConfiguration 호출됨

• showsActivityIndicator = true 로 지정해서 버튼에 인디케이터를 표시할 수 있음
• 이미지를 대체해서 인디케이터를 표시해 줄 수 있음 
• 사용자에게 앱이 해당 로직을 처리 중이라는 것을 알릴 수 있음

Metrics adjustments

• button의 content 위치를 제어하기 쉬워짐
• contentInsets은 버튼의 전체 인셋을 제어하며, titlePadding과 imagePadding을 사용해서 각각의 element와의 거리를 설정해 줄 수 있음
• title, subtitle 뿐만 아니라 content가 정렬되는 방식 또한 쉽게 컨트롤 할 수 있음(행복하당)

Semantic styling

• semantic styling을 사용하면 자동으로 normal,pressed, disabled에 대응할 수 있음 

 

Toggle buttons

• Preserve a selected state
• Already a state of UIControl
• Automatically toggles selected

• 버튼을 누르는 것으로 끝나는 것도 있지만 토글 기능이 필요한 버튼이 있음 -> on/off UISwitch와 같은 기능을 구현
• changesSelectionAsPrimaryAction 값을 true로 설정

 

Pop-up buttons

• pull down 버튼과 비슷하게 동작함. 버튼을 누르면 선택할 수 있는 메뉴가 나타남. 여기서 한개만 선택 할 수 있음

Interface builder는 "Build interfaces with style" 비디오 참고

• Similar to pull down buttons
• Enforce a single selected item
• Display selected item

 

• have a menu assigned
• present it by default
• button title is fixed

changesSelectionAsPrimaryAction을 true로 설정

- similar to UISegmentedControl

- Allow more/nested choices

리스트에서 기본 컬러로 설정하려는 경우 state에 .on으로 설정

button menu의 selectedElements를 이용해서 현재 선택된 값을 체크 할 수 있음

코드를 통해서 새로운 값을 설정해 줘야 하는 경우

 

UIMenu

• subtitles
• improved submenu interaction
• selection management

 

Make better buttons

• Build configurations for buttons
• Add toggle and pop-up buttons
• Remove button subclasses
• Get automatic Mac Catalyst support

 

 

참고 사이트

https://developer.apple.com/videos/play/wwdc2021/10064/