2022.10.16 (์ผ)
UIButton.Configuration์ ์กฐ๊ธ ๋ ๊น๊ฒ ํ๋ณด๊ฒ ์ต๋๋ค.
// ์ ์ธ
var configuration = UIButton.Configuration.filled()
// ํ์๋๋ UI
configuration.title = "๋ฒํผ์
๋๋ค"
configuration.subtitle = "์๋ธ ํ์ดํ์
๋๋ค"
configuration.image = .init(systemName: "xmark")
// UI์ ๊ฐ๊ฒฉ ๋ฐ ์์น, ์ฌ์ด์ฆ ์กฐ์
configuration.titleAlignment = .center
configuration.titlePadding = 10
configuration.imagePlacement = .trailing
configuration.imagePadding = 10
configuration.preferredSymbolConfigurationForImage = UIImage.SymbolConfiguration(scale: .medium)
// ์ฌ์ด์ฆ
configuration.buttonSize = .mini
configuration.buttonSize = .small
configuration.buttonSize = .medium
configuration.buttonSize = .large
์ฌ์ด์ฆ๊ฐ ์์ง๋ง Constriaint๋ฅผ ์ง์ ํ๋ฉด ์ด ๊ฐ์ ๋ฌด์๋ฉ๋๋ค. ์ ์๋ ์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. ๋จ์ง ๊ฐ๋ฐ์๊ฐ ""์ด ๋ฒํผ์ ์ฌ์ด์ฆ๋ ์ด์ ๋์ด๋ค."๋ผ๊ณ ๋ช ์ธํ๋ ์ฉ๋๋ก๋ง ์ฌ์ฉ๋๋ ๊ฒ ๊ฐ์ต๋๋ค. ์๋ ์์ด๋ ๋ฌธ์์ ์์ฑ๋ buttonSize์ Discussion: The size indicates a system-defined size you prefer for this button. The exact size of the button may change regardless of this value.
configuration.cornerStyle = .small
configuration.cornerStyle = .medium
configuration.cornerStyle = .large
configuration.cornerStyle = .capsule
configuration.cornerStyle = .dynamic
cornerStyle
์ background corner radius๋ฅผ ๋ฌด์ํ๊ณ ๋ฒํผ corner radius๋ฅผ ์ค์ ํ๋ ํ๋กํผํฐ์
๋๋ค. ์ฌ๊ธฐ์ fixed
์ผ์ด์ค๋ง ํผ์๋ง background corner radius๋ฅผ ๋ฐ๋ฆ
๋๋ค.
๊ทธ๋ฐ๋ฐ, dynamic๊ณผ fixed์ ์ฐจ์ด๊ฐ ๋ญ๊น? ์ด๊ฑด ์ซ ๋์ค์ ์ฐพ์๋ด ์๋ค.
configuration.cornerStyle = .fixed
configuration.background.cornerRadius = 14
configuration.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { incoming in
var outgoing = incoming
outgoing.font = UIFont.preferredFont(forTextStyle: .headline)
return outgoing
}
incoming๊ณผ outgoing์ AttributeContainer
ํ์
์
๋๋ค. title๊ณผ ๊ด๋ จ๋ attribute๋ฅผ ์์ ํ๊ณ ๋ฐํํฉ๋๋ค.
AttributeContainer๋ ๋์ค์ ๊ณต๋ถํฉ์๋ค. ์ผ๋จ์ UILabel์ ์ฌ๋ฌ ํ๋กํผํฐ๋ค์ ๊ฐ์ง๊ณ ์๋ ํ์ ์ด๋ผ๊ณ ๋ง ์์๋ก์๋ค.
button.configurationUpdateHandler = { [unowned self] button in
var config = button.configuration
config?.showsActivityIndicator = self.signingIn
config?.imagePlacement = self.signingIn ? .leading : .trailing
config?.title = self.signingIn ? "Signing In..." : "Sign In"
button.isEnabled = !self.signingIn
button.configuration = config
}
// Configuration ์
๋ฐ์ดํธ
button.setNeedsUpdateConfiguration()
๋ฒํผ์์ showsActivityIndicator
ํ๋กํผํฐ๋ฅผ ํตํด Indicator
๋ฅผ ๋ณด์ฌ์ค ์ ์์ต๋๋ค. ํด๋น ํ๋กํผํฐ๋ Configuration์ ์ํด์๊ณ ๋ณด์ฌ์ฃผ๊ธฐ ์ํด์๋ ๋ฒํผ์ Configuration์ ์
๋ฐ์ดํธํด์ผํฉ๋๋ค. ์ด ๋ configurationUpdateHandler
ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค. Configuration ์
๋ฐ์ดํธ ํด๋ก์ ๋ฅผ ์์ฑํ ํ ์ง์ ์
๋ฐ์ดํธ๋ฅผ ํ๊ธฐ ์ํด์๋ setNeedsUpdateConfiguration()
๋ฉ์๋๋ฅผ ํธ์ถํฉ๋๋ค.
[unowned self]๋ฅผ ์ฌ์ฉํ๋ ์ด์ ์ ๋ํด์ ํ๋ฒ ์๊ฐํด๋ด ์๋ค.
button.configurationUpdateHandler = { [unowned self] button in
var config = button.configuration
let symbolName = self.isBookInCart ? "cart.badge.minus" : "cart.badge.plus"
config?.image = UIImage(systemName: symbolName)
button.configuration = config
}
// Configuration ์
๋ฐ์ดํธ
button.setNeedsUpdateConfiguration()
ํ ๊ธ ๋ฒํผ์ ๋ก๋ฉ ๋ฒํผ์์ ์ด์ฉํ๋ configurationUpdateHandler
ํ๋กํผํฐ๋ฅผ ๊ทธ๋๋ก ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค.
button.showsMenuAsPrimaryAction = true
button.menu = UIMenu(children: [
UIAction(title: "Action 1", image: UIImage(systemName: "hare.fill")) { _ in
print("Action 1")
},
UIAction(title: "Action 2", image: UIImage(systemName: "tortoise.fill")) { _ in
print("Action 2")
}
])
button.changesSelectionAsPrimaryAction = true
ํ์
๋ฒํผ์ showsMenuAsPrimaryAction
ํ๋กํผํฐ๋ฅผ true๋ก ์ค์ ํ๊ณ menu
์ UIAction
์ ๋ด์์ค์ผํฉ๋๋ค. changesSelectionAsPrimaryAction
์ true๋ก ์ค์ ํ๋ค๋ฉด ํ์
์ด ๋์ฌ ๋ ๋ง์ง๋ง์ ์ ํํ Action์ด ์ ํ์ด ๋ ์ํ๋ก ๋์ต๋๋ค. (๋ง์ผ ์ฒ์์ด๋ผ๋ฉด ์ฒซ๋ฒ์งธ Action์ด ์ ํ๋์ด์ ธ์์ต๋๋ค.)
let button = UIButton(configuration: .filled(), primaryAction: UIAction(handler: { action in
print("์๋
")
}))
UIAction์ ๋ฉ๋ด์ ํ๋์ ๊ธฐ๋ฅ์ผ๋ก, ํด๋ก์ ๋ฅผ ํตํด ์ก์
์ ์คํํฉ๋๋ค. ๋ฉ๋ด์ ์ผ์ข
์ด์ง๋ง ๋ฒํผ์ initiailzer์๋ ์ค์ ํ ์ ์์ด์ addTarget
๋์ ์ฌ์ฉํ ์๋ ์์ต๋๋ค. ํ์ง๋ง ๋ฒํผ์ ์ด๊ธฐํ์ดํ์๋ ๋ฒํผ์ ๋ฐ๋ก ์ค์ ํ ์ ๋ ์์ต๋๋ค.