[Feat] 폰트 자간, 행간 적용을 위한 익스텐션 및 기타 UI 익스텐션 작성 #111
Conversation
- 왼쪽, 오른쪽 패딩값을 추가할 수 있는 메서드 구현
youz2me
left a comment
youz2me
left a comment
There was a problem hiding this comment.
고생하셨습니다! 주석을 너무 꼼꼼하게 달아주셔서 개발할 때 도움이 많이 될 것 같아요. 의견을 몇개 남겼는데 읽고 의견 주시면 좋을 것 같습니닷 🙇♀️
저번에 같이 코드 보면서 폴더링에 대한 이야기를 나눠봤지만 뭔가 리뷰하면서 보니 익스텐션과 익스텐션이 아닌 파일이 UIHelper 내에서 폴더로 분리되어도 좋을 것 같다는 생각이 들어요(just 가독성을 위해). 이건 그냥 가벼운 의견이니 읽고 넘기셔도 좋을 것 같습니다!
| /// | ||
| /// - 기본적으로 (줄 높이 - 폰트 크기)의 1/3을 적용하여 시각적 정렬을 조정합니다. | ||
| /// - Returns: `CGFloat` 값 | ||
| var baselineOffset: CGFloat { return (lineHeight - size) / 3 } |
| // MARK: - roundCorners | ||
|
|
||
| /// 지정한 모서리에만 `cornerRadius`를 적용합니다. | ||
| /// | ||
| /// - Parameters: | ||
| /// - corners: 적용할 모서리들을 지정하는 `CACornerMask` 값. | ||
| /// - radius: 모서리에 적용할 `cornerRadius` 값. | ||
| /// | ||
| /// 사용 예시: | ||
| /// ```swift | ||
| /// let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100)) | ||
| /// view.backgroundColor = .red | ||
| /// | ||
| /// // 상단 왼쪽, 상단 오른쪽 모서리만 둥글게 처리 | ||
| /// view.roundCorners(corners: [.layerMinXMinYCorner, .layerMaxXMinYCorner], radius: 10) | ||
| /// ``` | ||
| func roundCorners(corners: CACornerMask, radius: CGFloat) { | ||
| self.layer.cornerRadius = radius | ||
| self.layer.maskedCorners = corners | ||
| self.layer.masksToBounds = true | ||
| } |
There was a problem hiding this comment.
extension UIView {
enum Corner {
case topLeft
case topRight
case bottomLeft
case bottomRight
case allCorners
var caCornerMask: CACornerMask {
switch self {
case .topLeft:
return .layerMinXMinYCorner
case .topRight:
return .layerMaxXMinYCorner
case .bottomLeft:
return .layerMinXMaxYCorner
case .bottomRight:
return .layerMaxXMaxYCorner
case .allCorners:
return [.layerMinXMinYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMaxXMaxYCorner]
}
}
}
func roundCorners(corners: Corner, radius: CGFloat) {
self.layer.cornerRadius = radius
self.layer.maskedCorners = corners
self.layer.masksToBounds = true
}
}저번에 같이 이야기했던 이후로 생각해봤는데 이런 식으로 enum을 정의해준다면 조금 더 가독성 높은 코드가 될 수 있을 것 같다는 생각이 들었어요. 기준이 왼쪽 위가 되다 보니 아래에서 오른쪽 모서리가 layerMaxXMaxYCorner가 되는 게 약간 헷갈릴 수 있을 것 같더라구요 ㅎㅎ ... 고려해주시면 좋을 것 같습니다.
There was a problem hiding this comment.
오 좋은 생각이십니다.
저도 CACornerMask를 사용한다고 하면 한번쯤은 흠칫 하게 될 것 같았거든요.
제가 더 디벨롭한 내용은 아래와 같으며, 이후 커밋에서 확인하실 수 있습니다.
-
여러 개의 코너를 처리할 수 있도록 개선
유진님 제안에서는 Corner 타입이 단일 코너만을 표현했지만, 한 번에 여러 코너를 설정할 수 있도록 구현하였습니다. -
CACornerMask 변환 로직을 메서드 내부에서 처리
메서드 내에서 동적으로 CACornerMask를 구성하는 방식으로 결정하였습니다.
| // MARK: - pretendardString | ||
|
|
||
| /// 주어진 `Pretendard` 스타일을 적용한 `NSAttributedString`을 반환합니다. | ||
| /// | ||
| /// - Parameter style: 적용할 `UIFont.Pretendard` 스타일 | ||
| /// - Returns: `NSAttributedString` 객체 | ||
| /// | ||
| /// 사용 예시 (`UILabel`에서 `attributedText` 설정): | ||
| /// ```swift | ||
| /// let label = UILabel() | ||
| /// label.attributedText = "Hello, world!".pretendardString(with: .caption3) | ||
| /// ``` | ||
| func pretendardString(with style: UIFont.Pretendard) -> NSAttributedString { | ||
| let paragraphStyle = NSMutableParagraphStyle() | ||
| paragraphStyle.minimumLineHeight = style.lineHeight | ||
| paragraphStyle.maximumLineHeight = style.lineHeight | ||
|
|
||
| let attributes: [NSAttributedString.Key: Any] = [ | ||
| .font: UIFont.pretendard(style), | ||
| .kern: style.kerning, | ||
| .paragraphStyle: paragraphStyle, | ||
| .baselineOffset: style.baselineOffset | ||
| ] | ||
|
|
||
| return NSAttributedString(string: self, attributes: attributes) | ||
| } | ||
|
|
||
| /// 주어진 `Pretendard` 스타일을 적용한 `AttributedString`을 반환합니다. | ||
| /// | ||
| /// - Parameter style: 적용할 `UIFont.Pretendard` 스타일 | ||
| /// - Returns: `AttributedString` 객체 | ||
| /// | ||
| /// 사용 예시 (`UIButton`에서 `configuration`의 `attributedTitle` 설정): | ||
| /// ```swift | ||
| /// let button = UIButton() | ||
| /// var config = UIButton.Configuration.filled() | ||
| /// config.attributedTitle = "Press Me".pretendardString(with: .head2) | ||
| /// button.configuration = config | ||
| /// ``` | ||
| func pretendardString(with style: UIFont.Pretendard) -> AttributedString { | ||
| let nsAttributedString: NSAttributedString = self.pretendardString(with: style) | ||
| return AttributedString(nsAttributedString) | ||
| } |
| /// ```swift | ||
| /// let adjustedHeight = 40.adjustedH | ||
| /// ``` | ||
| var adjustedH: CGFloat { |
There was a problem hiding this comment.
현재 네이밍도 좋긴 한데 저는 adjustedHeight처럼 전부 명시해주는 게 더 가독성이 높아보인다고 생각하긴 합니다! 어떻게 생각하시는지 궁금해요.
There was a problem hiding this comment.
약어 사용을 좋아하지는 않기는 한데, 쓸 때 80.adjustedHeight가 되어서 자칫 내용이 길어질까 염려되긴 합니다만, 괜찮으시다면 수정하겠습니다.
There was a problem hiding this comment.
어차피 너무 길어지는 것도 아니긴 해서 길이 자체는 괜찮을 것 같아요! 컨벤션 통일하는 게 좋을 것 같습니닷
| /// ```swift | ||
| /// let adjustedHeight = 40.adjustedH | ||
| /// ``` | ||
| var adjustedH: CGFloat { |
There was a problem hiding this comment.
어차피 너무 길어지는 것도 아니긴 해서 길이 자체는 괜찮을 것 같아요! 컨벤션 통일하는 게 좋을 것 같습니닷
…nto feat/#110-font-ui-extension # Conflicts: # Wable-iOS.xcodeproj/project.pbxproj
[Feat] 폰트 자간, 행간 적용을 위한 익스텐션 및 기타 UI 익스텐션 작성
👻 PULL REQUEST
📄 작업 내용
🔗 연결된 이슈