[Feat/#24] CapsuleButton Component #27
Conversation
|
|
||
| // MARK: - Initializer | ||
| init(type: CapsuleButtonType, title: String, icon: UIImage?, action: (() -> Void)? = nil) { | ||
| self.defaultTitle = title |
There was a problem hiding this comment.
CapsuleType์ด ๋ ๊ฐ๋ฐ์ ์๋ ๊ฑฐ ๊ฐ์๋ฐ, ์ฌ๊ธฐ์ title์ ๋ฐ๋ก ๋ฐ์ง ๋ง๊ณ ๊ฐ case๋ง๋ค ๋ฒํผ ํ์ดํ์ ์ถ๊ฐํ๋๊ฑด ์ด๋ต๊ฐ์?
| super.init(frame: .zero) | ||
| setupUI() | ||
| configure(title: title, icon: icon) | ||
| addTarget(self, action: #selector(buttonTapped), for: .touchUpInside) |
There was a problem hiding this comment.
rx ํ์์ผ๋ก ๋๋ ค์ฃผ์ธ์
There was a problem hiding this comment.
ใ ใ ใ ใ ใ ใ ใ ใ ใ ใ ใ ใ ใ ๋๋ ค์ฃผ์ธ์
|
|
||
| private func updateButton(isExpanded: Bool) { | ||
| let title = isExpanded ? "" : defaultTitle | ||
| let icon = isExpanded ? UIImage(systemName: "xmark") : UIImage(systemName: "plus") |
There was a problem hiding this comment.
์์ด์ฝ์ ์์ ic_ ๋ถ์ฌ์ฃผ์ผ
| private func updateWidth(isExpanded: Bool) { | ||
|
|
||
| } |
| UIView.animate(withDuration: 0.3) { | ||
| self.superview?.layoutIfNeeded() | ||
| } |
There was a problem hiding this comment.
์ด ์ฝ๋๋ ๋ญํ๋ ์ฝ๋ ์ธ๊ฐ์??
FpRaArNkK
left a comment
FpRaArNkK
left a comment
There was a problem hiding this comment.
๊ณ ์ ๋ง์ผ์ จ์ต๋๋ค! ๋ช๊ฐ์ง ์์ ์ฌํญ์ด ๋ณด์ด๋๋ฐ ์ด๋ฏธ ๋ค๋ฅธ๋ถ๋ค์ด ์ ๋จ๊ฒจ์ฃผ์ ์ ์ถ๊ฐ ๋ฉํธ๋ง ์์ฑํ์ต๋๋ค. ์ฐธ๊ณ ๋ถํ๋๋ฆฝ๋๋ค
| super.init(frame: .zero) | ||
| setupUI() | ||
| configure(title: title, icon: icon) | ||
| addTarget(self, action: #selector(buttonTapped), for: .touchUpInside) |
There was a problem hiding this comment.
ใ ใ ใ ใ ใ ใ ใ ใ ใ ใ ใ ใ ใ ๋๋ ค์ฃผ์ธ์
| enum CapsuleButtonType { | ||
| case expand(isExpanded: Bool) | ||
| case normal | ||
| } |
There was a problem hiding this comment.
Nested Type์ธ ๊ฒฝ์ฐ
CapsuleButton.CapsuleButtonType ์ผ๋ก ์ ๊ทผ๋๋
์์ ํ์
๊ณผ ๊ฒน์น๋ ๋ค์ด๋ฐ์ ์ง์ํ์๋ฉด ์ข์ต๋๋ค!
| private func setupUI() { | ||
| self.do { | ||
| $0.backgroundColor = .appBlack | ||
| $0.layer.cornerRadius = 25 | ||
| } | ||
|
|
||
| self.snp.makeConstraints { | ||
| $0.height.equalTo(50) | ||
| self.widthConstraint = $0.width.equalTo(100).constraint | ||
| } | ||
| } |
There was a problem hiding this comment.
ํ ์ฝ๋ ์ปจ๋ฒค์ ๋ง์ถฐ์ฃผ์ญ์ผ!
| let newState = !isExpanded | ||
| capsuleButtonType = .expand(isExpanded: newState) | ||
| updateButton(isExpanded: newState) | ||
| action?() |
There was a problem hiding this comment.
์ด๊ฑด ์ด๋ค ์๋๋ก ์์ฑํ์ ๊ฑธ๊น์?
โฆat/NST-47/capsuleButton
| var icon: UIImage? { | ||
| switch self { | ||
| case .expand(let isExpanded): | ||
| return isExpanded ? UIImage(systemName: "xmark") : UIImage(systemName: "plus") |
There was a problem hiding this comment.
์ทจํฅ์ฐจ์ด๊ธด ํ๋ฐ ์ ๋ ๋ณดํต ์๋ ์ฒ๋ผ ์ฌ์ฉ ํฉ๋๋ค.!
return UIImage(systemName: isExpanded ? "xmark" : "plus")
| private var widthConstraint: Constraint? | ||
|
|
||
| // MARK: - Initializer | ||
| init(style: Style, action: (() -> Void)? = nil) { |
There was a problem hiding this comment.
UIKit์์๋ ์์ฑ์์์ ๋ฃ๋ ๋ฐฉ์์์ ๋ฉ์๋ ์ฒด์ด๋ ๋ฐฉ์์ผ๋ก ๋ณ๊ฒฝํ๋ฉด ์ข์ ๊ฒ ๊ฐ์์!
๊ทธ๋ฌ๋ฉด ์๋์ฒ๋ผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
capsuleButton.action = { // ๋ฒํผ ๋๋ฅด๋ฉด ์๋ํ ์ด๋ฒคํธ ๋ฃ๊ธฐ }์ถ๊ฐ๋ก action์ ์ธ๋ถ์์ ์ฌ์ฉํ ์ ์์ด์ private์์ var๋ก ํด์ฃผ๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค~
๐ฅ Issue
close #
๐ฅ ๋ณ๊ฒฝ๋ ๋ด์ฉ
expand๋ ๋๋น๊ฐ ํ ๊ธ๋๋ฉด์ ๋ฐ๋๋ ๋ ์, normal์ ํ๋ฒํ ์บก์ ๋ฒํผ
UIImage(systemName: "plus") ์ด ๋ถ๋ถ๋ defaultTitle๊ณผ ๊ฐ์ด ์ด๊ธฐํ ๋ ๋ฐ์ ์์ด์ฝ์ผ๋ก ํ ๊ธ๋๊ฒ ๋ฐ๊ฟ์ค์ผํ๋๋ฐ ์ผ๋จ ๋ ์์ ํ๊ฒ ์..
๋จธ๋ฆฌ๊ฐ ์ ์๋์๊ฐ์ ๋ง์ ํผ๋๋ฐฑ ๋ถํ......ใ ใ
๋ค ํ๊ฑฐ ์๋๊ณ ๋ผ ๋ ์ถ๊ฐํ๊ฒ ์ผ ใ ใ
๐ฅ PR Point
// CapsuleButton private func updateButton(isExpanded: Bool) { let title = isExpanded ? "" : defaultTitle let icon = isExpanded ? UIImage(systemName: "xmark") : UIImage(systemName: "plus") configure(title: title, icon: icon) self.backgroundColor = isExpanded ? .appBlue50 : .appBlack self.setTitleColor(isExpanded ? .appBlack : .appWhite, for: .normal) self.tintColor = isExpanded ? .appBlack : .appWhite let newWidth = isExpanded ? 50 : 100 self.widthConstraint?.update(offset: newWidth) UIView.animate(withDuration: 0.3) { self.superview?.layoutIfNeeded() } } // MARK: - Actions @objc private func buttonTapped() { switch capsuleButtonType { case .expand(let isExpanded): let newState = !isExpanded capsuleButtonType = .expand(isExpanded: newState) updateButton(isExpanded: newState) action?() case .normal: action?() } }์ด๋ฐ์์ผ๋ก ์ฌ์ฉ
๐ฅ ScreenShot
๐ฅ Reference