iOS

[iOS] 간단한 앱 구현

챎 님 2024. 11. 6. 16:48
더보기

이 포스트는 한성현 교수님의 iOS 프로그래밍 기초 수업을 듣고 작성되었습니다.

 

# 복습

지난 번에 포스팅 했던 내용을 똑같이 만들어 보면서 복습을 해 보았습니다.

xcode 의 Object 들을 사용하여 Text, TextField, Button, imageView 등을 배치해 보았습니다.

저는 이런 식으로 구성해 보았습니다.

 

시뮬레이터 내에서 기능을 실행시키기 위해 코드를 작성하며 Object 들에 기능을 추가해 보도록 하겠습니다.

옆 화면에 ViewController 를 띄우고 control 과 함께 작성하고 싶은 부분의 코드창까지 드래그하게 된다면

 

이와 같은 화면이 나타나는 것을 확인해 볼 수 있습니다.

이렇게 직접 지정해 주게 되면 코드가 자동으로 작성이 되니 {} 안에 세부 코드만 작성해 주면 됩니다.

 

코드를 이렇게 완성해 주었습니다.

위처럼 만들게 된다면,

textfield 에 자신의 이름을 입력한 후 버튼을 누르게 되면,

"Hi, 체리밍." 이 출력되며 시뮬레이터 텍스트 칸에 노출됩니다.

 

# 아이콘 생성

시뮬레이터 홈버튼을 누르게 되면 바탕화면으로 이동하게 됩니다.

그 속에서 우리의 앱을 확인해 보면 아이콘이 비어서 하얀 화면이 보이는 것을 알 수 있습니다.

이 하얀색 화면 대신 아이콘을 표시되게 만들어 보겠습니다.

저는 iconfinder 사이트에 접속하여 아이콘을 선택하였습니다.

 

png 파일을 다운 받은 후에 이미지의 크기를 1024 픽셀로 수정 후에 Asset 안 AppIcon 에 첨부해 주게 되면,

이렇게 귀여운 이미지가 앱 아이콘으로 변하게 됩니다.

 

# LaunchScreen 

다음으로는 런치 스크린입니다.

새로운 화면이 나오게 되는데 여기서 새롭게 화면을 꾸며 줍니다.

 

# Chat GPT 

Q. iOS 에서 UI label 을 많이 사용하는 예제를 알려 줘

1. 기본 UILabel 생성 및 설정

기본적인 UILabel 생성부터 시작해 텍스트와 스타일을 지정할 수 있습니다.

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // UILabel 생성 및 설정
        let label = UILabel()
        label.text = "Hello, iOS!"
        label.font = UIFont.systemFont(ofSize: 24)
        label.textColor = .black
        label.textAlignment = .center
        
        // 위치 및 크기 설정
        label.frame = CGRect(x: 50, y: 100, width: 300, height: 50)
        
        // 뷰에 추가
        self.view.addSubview(label)
    }
}
 

이 예제에서는 UILabel을 생성하고 텍스트, 폰트 크기, 색상, 정렬을 설정한 후 화면에 배치합니다.

2. 여러 줄 텍스트 표시 (Multi-line Label)

UILabel에서 긴 텍스트를 여러 줄로 표시하려면 numberOfLines 속성을 활용하세요.

let multiLineLabel = UILabel()
multiLineLabel.text = "This is a UILabel example that supports multiple lines of text. It automatically wraps text based on the width."
multiLineLabel.numberOfLines = 0  // 0으로 설정 시 자동 줄바꿈
multiLineLabel.frame = CGRect(x: 20, y: 200, width: 300, height: 100)
multiLineLabel.textAlignment = .left

self.view.addSubview(multiLineLabel)

numberOfLines 속성을 0으로 설정하면 텍스트 길이에 따라 여러 줄로 표시됩니다.

3. 자동 높이 조절을 위한 Auto Layout 사용

let dynamicLabel = UILabel()
dynamicLabel.translatesAutoresizingMaskIntoConstraints = false
dynamicLabel.text = "This label adjusts its height automatically based on the content length."
dynamicLabel.font = UIFont.systemFont(ofSize: 18)
dynamicLabel.numberOfLines = 0

self.view.addSubview(dynamicLabel)

// Auto Layout 제약 조건 설정
NSLayoutConstraint.activate([
    dynamicLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
    dynamicLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
    dynamicLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: 300)
])

이 코드에서는 Auto Layout을 사용해 텍스트에 맞춰 레이블 높이가 자동으로 조절됩니다.

4. Attributed String을 이용한 텍스트 스타일링

UILabel에 다양한 스타일을 추가하기 위해 NSAttributedString을 사용해 특정 텍스트를 꾸밀 수 있습니다.

let styledLabel = UILabel()
styledLabel.frame = CGRect(x: 20, y: 450, width: 300, height: 100)

let attributedText = NSMutableAttributedString(string: "Bold and Colored Text")
attributedText.addAttribute(.font, value: UIFont.boldSystemFont(ofSize: 20), range: NSRange(location: 0, length: 4))
attributedText.addAttribute(.foregroundColor, value: UIColor.blue, range: NSRange(location: 9, length: 6))

styledLabel.attributedText = attributedText
self.view.addSubview(styledLabel)

이 예제는 NSMutableAttributedString을 통해 특정 부분의 텍스트를 굵게 하고 색상을 변경하는 방법을 보여줍니다.

5. 상태 업데이트를 위한 동적 UILabel

앱에서 동적으로 변경되는 상태를 표시하기 위해 UILabel을 자주 업데이트해야 하는 경우가 있습니다.

let statusLabel = UILabel()
statusLabel.text = "Loading..."
statusLabel.font = UIFont.systemFont(ofSize: 18)
statusLabel.textColor = .gray
statusLabel.frame = CGRect(x: 50, y: 600, width: 300, height: 50)
self.view.addSubview(statusLabel)

// 예: 네트워크 요청 완료 후 업데이트
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
    statusLabel.text = "Data Loaded!"
    statusLabel.textColor = .green
}

이 예제는 데이터 로드 상태에 따라 레이블 텍스트와 색상을 업데이트하는 방식을 보여줍니다.

6. 다양한 UILabel 속성 적용

UILabel의 다양한 속성을 사용해 텍스트에 효과를 줄 수 있습니다.

let customLabel = UILabel()
customLabel.text = "Shadow and Background Color"
customLabel.font = UIFont.systemFont(ofSize: 22)
customLabel.textColor = .white
customLabel.backgroundColor = .black
customLabel.textAlignment = .center

// 그림자 효과 추가
customLabel.layer.shadowColor = UIColor.gray.cgColor
customLabel.layer.shadowOffset = CGSize(width: 2, height: 2)
customLabel.layer.shadowOpacity = 0.7
customLabel.layer.shadowRadius = 2.0

customLabel.frame = CGRect(x: 20, y: 700, width: 300, height: 50)
self.view.addSubview(customLabel)

이 예제에서는 그림자와 배경색을 추가하여 UILabel을 더 돋보이게 만들었습니다.

이처럼 UILabel을 활용하여 다양한 스타일과 효과를 적용할 수 있습니다.

 

# UP Down 앱

다음으로는 간단하게 Up, Down 앱을 만들어 보겠습니다.

main UI 는 + 와 - 그리고 가운데 label (+ 버튼을 누르면 숫자가 올라가고, - 를 누르면 숫자가 내려가는 ) 만 추가해 준 상태이고,

ViewController 에서 코드를 수정해 보겠습니다.

 

 

이렇게 코드를 지정해 주게 된다면, 버튼을 누르는 횟수만큼 숫자가 카운트 되는 기능이 돌아가는 것을 확인해 볼 수 있습니다.

 

# 전구 온 오프 앱

다음으로는 실습 소스인 전구의 스위치를 온 오프 할 수 있는 기능, 전구의 크기 확대 축소가 가능한 기능을 가진 앱의 실습을 해 보겠습니다.

먼저 구성되어있는 코드의 주석을 달아 설명해 보겠습니다.

import UIKit 

class ViewController: UIViewController {  // UIViewController 클래스를 상속받는 ViewController 클래스 정의
    var isZoom = false  // 이미지 확대 여부를 저장하는 변수, 초기값은 false (축소 상태)
    var imgOn: UIImage?  // 전구가 켜진 이미지를 저장할 UIImage 옵셔널 변수
    var imgOff: UIImage? // 전구가 꺼진 이미지를 저장할 UIImage 옵셔널 변수

    @IBOutlet var imgView: UIImageView!  // Interface Builder에서 연결된 이미지 뷰 아웃렛 변수
    @IBOutlet var btnResize: UIButton!  // Interface Builder에서 연결된 버튼 아웃렛 변수
    
    override func viewDidLoad() {
        super.viewDidLoad()  // 뷰가 로드되었을 때 기본 설정을 위해 부모 클래스의 viewDidLoad 호출

        // Do any additional setup after loading the view.

        imgOn = UIImage(named: "lamp_on.png")  // "lamp_on.png" 이미지를 imgOn 변수에 할당
        imgOff = UIImage(named: "lamp_off.png")  // "lamp_off.png" 이미지를 imgOff 변수에 할당
        
        imgView.image = imgOn  // 이미지 뷰의 기본 이미지를 켜진 이미지로 설정
    }

    @IBAction func btnResizeImage(_ sender: UIButton) {
        // 버튼 클릭 시 이미지 확대/축소를 처리하는 액션 메서드
        let scale: CGFloat = 2.0  // 확대/축소 비율을 2.0으로 설정
        var newWidth: CGFloat, newHeight: CGFloat  // 새 너비와 높이를 저장할 변수 선언

        if (isZoom) {  // isZoom이 true이면 (이미 확대 상태이면)
            newWidth = imgView.frame.width / scale  // 현재 너비를 scale로 나누어 새 너비 설정
            newHeight = imgView.frame.height / scale  // 현재 높이를 scale로 나누어 새 높이 설정
            
            btnResize.setTitle("확대", for: .normal)  // 버튼 제목을 "확대"로 변경
        }
        else {  // isZoom이 false이면 (현재 축소 상태이면)
            newWidth = imgView.frame.width * scale  // 현재 너비에 scale을 곱하여 새 너비 설정
            newHeight = imgView.frame.height * scale  // 현재 높이에 scale을 곱하여 새 높이 설정
            
            btnResize.setTitle("축소", for: .normal)  // 버튼 제목을 "축소"로 변경
        }
        
        imgView.frame.size = CGSize(width: newWidth, height: newHeight)  // 이미지 뷰의 크기를 새 너비와 높이로 설정
        
        isZoom = !isZoom  // isZoom 값을 반전 (true -> false 또는 false -> true)
    }
    
    @IBAction func switchImageOnOff(_ sender: UISwitch) {
        // 스위치 상태가 변경되었을 때 이미지를 변경하는 액션 메서드
        if sender.isOn {  // 스위치가 켜진 상태이면
            imgView.image = imgOn  // 이미지 뷰에 켜진 이미지 설정
        } else {  // 스위치가 꺼진 상태이면
            imgView.image = imgOff  // 이미지 뷰에 꺼진 이미지 설정
        }
    }
}

 

# 웹 뷰로 간단한 웹 브라우저 만들기

이번에는 코드 안에 사이트 주소를 넣으면 시뮬레이터 상에서 확인할 수 있는 기능입니다.

위 시뮬레이터 안에 있는 블로그는 저의 티스토리입니다.

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        myWebView.navigationDelegate = self
        loadWebPage("https://dbsc0f1a.tistory.com/")
    }

이런 식으로 코드 안에 주소를 입력해 주면 화면에 노출되는 것입니다.