[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.
์ด ์ฝ๋๋ ๋ญํ๋ ์ฝ๋ ์ธ๊ฐ์??
| 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.
์ด๊ฑด ์ด๋ค ์๋๋ก ์์ฑํ์ ๊ฑธ๊น์?
๐ฅ 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