[레인스톤 iOS] 자연스럽게 이미지 늘려보기 feat. 나인패치(비슷한거)

안녕하세요:)

iOS 개발자로 일하고 있는 레인스톤입니다.

 

안드로이드 플랫폼에서는 나인패치 형식이 지원되기 때문에

화면 해상도에 따라 늘어나지 않을 영역을 지정해서 이미지가 뭉개지는(?) 현상을 방지할 수 있습니다.

 

안타깝게도 iOS에서는 나인패치 형식이 지원되지 않습니다 ㅠㅠ

하지만! Image - Asset의 Slicing을 활용하면 가능합니다.

그럼 오늘은 iOS에서 나인패치Like한 기술을 적용해보겠습니다!

 

뭘 하고자 하냐면

텍스트 count에 따라 늘어나는 말풍선을 만들고자합니다.

짧은 텍스트일 경우에는...

 

 

아무 것도 적용하지 않아도 문제 없이 보이는 것 같습니다.

그럼 텍스트가 길어졌을 때는 어떻게 달라지는지 볼까요?

 

 

 

오... 뭔가 텍스트 길이에 따라 말풍선이 늘어나긴했지만?

짧은 텍스트일 때와 비교해서 말풍선 모양이 뭉개져버렸죠?

이걸 짧을 때와 마찬가지로 이~쁘~게 만들어볼 예정입니다.

Assets → Slicing

아래 그림과 같이 Xcode의 assets로 이동합니다.

그리고 원하는 이미지를 선택한 후 4번째 탭(Image set)으로 이동합니다.

 

 

Image set으로 이동 후 맨 아래를 보면 Slicing이 None으로 되어있습니다.

 

 

이걸 Horizontal로 바꿔줍니다.

세로로 늘려야할 경우에는 Vertical 이겠죠?

가로&세로 모두 늘려야할 경우는 Horizontal and Vertical로 설정해주시면됩니다.

 

 

자 이제 보시면 Left와 Right에 무언가 숫자를 입력해줘야겠죠?

바로 고정될 영역의 크기를 지정해주는 것입니다.

Horizontal의 경우 Left, Right이고 Vertical의 경우 Top, Bottom입니다.

 

Center에는 Tiles 또는 Stretches 두 가지 옵션이 있습니다.

Tiles는 늘어나는 영역이 타일형태로 표현되고, Streches는 하나가 쭉~ 늘어나도록 표현됩니다.

제가 원하는건 Streches겠죠?

 

결과 확인

짜잔~

 

 

어떤가요 고정된 영역의 모양은 유지되면서 이쁘게 늘어났죠?

아래는 해당 프로젝트의 코드입니다.

끗!

 

ViewController

import UIKit

final class ViewController: UIViewController {

    private let speechBalloonView = SpeechBalloonView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        speechBalloonView.configure(with: "짧은 텍스트입니다.")
        
        view.addSubview(speechBalloonView)
        speechBalloonView.snp.makeConstraints {
            $0.centerX.centerY.equalToSuperview()
        }
    }
}

 

SpeechBallonView

import UIKit
import SnapKit
import Then

final class SpeechBalloonView: UIView {
    
    private let cloudImageView = UIImageView()
    private let speechLabel = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: .zero)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupUI()
    }
    
    func configure(with text: String) {
        self.speechLabel.text = text
    }
}

private extension SpeechBalloonView {
    
    func setupUI() {
        
        cloudImageView.do {
            $0.image = UIImage(named: "cloud")
        }
        
        speechLabel.do {
            $0.numberOfLines = 1
            $0.setContentHuggingPriority(.required, for: .horizontal)
            $0.textColor = .white
            $0.font = .boldSystemFont(ofSize: 13)
        }
        
        
        addSubview(cloudImageView)
        addSubview(speechLabel)
        
        self.snp.makeConstraints {
            $0.height.equalTo(36)
        }
        
        cloudImageView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
        
        speechLabel.snp.makeConstraints {
            $0.leading.trailing.equalToSuperview().inset(10)
            $0.top.equalToSuperview().inset(9)
            $0.bottom.equalToSuperview().inset(11)
        }
    }
}