BOID

[디자인 패턴] 상태 패턴이란? (2/2) (Swift)

HoonIOS — Sun, 18 Jun 2023 20:31:25 +0900

안녕하세요, HoonIOS입니다. :)

저번에는 간단하게 상태패턴에 대해 알아봤는데요, 이번에는 구조에 대해 알아보겠습니다.

상태패턴 구조

콘텍스트
- 상태에 대한 참조를 저장하고 모든 상태별 작업을 하는 곳
- 상태 인터페이스를 통해 상테 객체와 통신하며 새로운 상태 객체를 전달하기 위한 setter을 호출
상태
- 인터페이스로 상태별 메서드를 구현
- 이 메서드는 모든 상태에 대해 유효한 메서드이어야 하는데 그 이유는 상태에 따라 호출될 일이 없는 메서드들를 인터페이스로 구분하면 사이드 이펙트가 나올 가능성이 있기 때문이다.
구상 상태
- 상태별 클래스로 상태 인터페이스에 따른 메서드들을 자체적인 구현을 제공합니다.
- 여러 상태에서 유사한 코드의 중복을 피하기 위해 어떤 공통 행동을 캡슐화하는 중간 추상 클래스들을 제공할수 있습니다.
- 상태에 따른 객체들은 콘텍스트에 대해 역참조할수 있고 이 참조를 통해 상태는 콘텍스트 객체에서 필요한 정보를 가지고 올수 있습니다

언제 적용할까요?

각 상태에 따라 다르게 행동하는 객체가 있고 상태가 많을때 사용하는게 좋고 상태별로 코드가 자주 변경될때 사용하면 좋아요,
즉. 새로운 상태를 추가하거나 기존 상태들을 독립적으로 변경하는데 쉬워서 유지 관리하기도 좋습니다.
하나의 값에 따라 클래스의 행동하는 방식을 변경하는 조건문 늪들이 있을떄 사용하는게 좋습니다.
상태들에 따라 중복 코드 또는 조건문-기반 상태 머신의 천이가 많을때 사용하는게 좋습니다.
거대한 상태 조건문들이 추가될려고 할때 해당 패턴을 적용하는게 좋습니다.

지금까지 상태패턴에 대해 알아봤는데요, 상태에 따라서 다르게 동작을 하도록 할때 적용하는게 좋을것 같습니다.

[디자인 패턴] 상태 패턴이란? (1/2) (Swift)

HoonIOS — Sat, 10 Jun 2023 19:58:26 +0900

안녕하세요, HoonIOS입니다. :)

이번에는 패턴중에 하나인 상태패턴 공부한것에 대해 정리 할려고 합니다.

상태패턴의 정의에 대해 먼저 살펴보겠습니다.

상태패턴 정의

상태 패턴은 객체의 내부 상태가 변경 될때 해당 객체가 그 상태에 알맞는 행동을 할수 있도록 변경해주는게 행동 디자인 패턴입니다.

예를들어 어느 한 책을 출판한다고 했을때 출판하기 까지 초안, 검토, 출판 이렇게 세가지 형태로 크게 나눈다고 한다고 하면 각 상태를 객체에서 상태에 따라 분류하여 동작하도록 처리해주면 됩니다.

즉 아래와 같은 방식을 살펴 보겠습니다.

상태 패턴 방식

위 코드는 객체 내에서 자체적으로 상태에 따라 코드를 구현하는 대신 현재 상태를 나타내는 상태 객체중 하나에 대한 참조를 저장하고 모든 상태에 관련된 작업을 Document 객체에 위임하는것입니다.
콘택스트의 상태를 전환하려면 호라성 상태 객체를 다른 객체로 바꿔야 합니다. 위 changeState에 새로운 객체를 위임한것처럼 바꾸는 방식입니다.
이 방식의 가장 큰 장점은 각 상태들은 서로 인식하고 다른 상태로 천이 할수 있습니다.
콘텍스트는 모든 상태별 작업을 위임하는곳입니다.

우선 간단하게 상태 패턴이란 무엇인가에 대해 알아봤는데 다음에는 구조에 대해 좀더 자세히 살펴보겠습니다.

[디자인 패턴] 커맨드 패턴이란? (2/2) (swift)

HoonIOS — Sat, 10 Jun 2023 19:56:17 +0900

안녕하세요, HoonIOS입니다. :)

저번에 커맨드 패턴에 대해 구성 요소랑 커맨트 패턴의 장점에 대해 말씀 드렸습니다.

이번에는 구조 및 관련 코드에 대해 말씀 드리려고 합니다.

커맨드 패턴 구조

Client: Client에서 ConcreateCommand를 init하고 Receiver를 설정하는 역할
Reciever: Clelient에서 Receiver를 설정하고 Receiver 객체를 각 Command의 생성자로 전달하여 처리, 수신자 역할로 실제로 요청을 처리
ConcreateCommand: 각 Commadn 객체와 실행할 메서드를 연결시키는 역할
Command: 실행 요청에 대한 인터페이스로 각 필요한 작업들이 있고 execute(실행 메서드)가 포함
Invoker: Command 객체들을 관리하고 있는 저장하고 있는 클래스 각 커맨드를 시작 및 관리하는 역할

[디자인 패턴] 커맨드 패턴이란? (1/2) (Swift)

HoonIOS — Tue, 30 May 2023 20:44:14 +0900

안녕하세요, HoonIOS입니다. :)

이번에 회사에서 특정 앱을 구현하게 됐는데 구조에 대해 고민을 하면서 여러 패턴에 대해 찾아보던 중 커맨드 패턴 (Command Pattern)이 구현 목적에 어울리는 패턴이라고 생각해서 해당 패턴에 대해 정리를 해보려고 합니다.

우선 요구 사항을 아래와 같습니다.

1. 각 테스트 케이스를 모듈화 할 수 있을 것

2. 테스트 케이스를 순서대로 처리할수 있는 로직에 맞는 로직

3. 테스트 케이스의 순서는 유동적으로 바뀔 수 있고 추가 및 삭제, 순서 변경이 될 수 있음

커맨드 패턴이란?

커맨드 패턴의 정의는 모든 정보가 포함된 독립 실행형 객체(캡슐화)로 변환하는 디자인 패턴입니다.

이 패턴은 대기열에 넣을수도 있고 실행을 취소할 수도 있습니다.

또, 커맨드를 필요한 시점에 실행을 할수도 있는 게 장점입니다.

즉 회사 앱에서는 여러 테스트 케이스를 커맨드화 해서 독립적으로 실행할 수 있도록 처리하면 각 테스트 케이스들끼리 연결 되어 있지 않고 모듈화 해서 처리를 할 수 있습니다.

구성 요소

Command: 실행 요청에 대한 인터페이스를 정의한 클래스로 이 클래스 내부에는 excute(실행 메서드)가 포함 되어 있습니다.
ConcreateCommand: Command 인터페이스를 구현하는 클래스입니다. 각 객체와 실행할 메서드를 연결시키는 역할을 하므로 각 테스트 케이스 별로 인터페이스를 정의하면 됩니다.
Invoker: 발송자 클래스로 요청들을 시작 및 관리하는 역할을 합니다. 이 클래스는 Command들을 Array로 관리를 하거나 저장을 합니다.
Receiver: 수신자의 역할로 요청을 수신하고 실제로 요청을 처리하는 객체를 의미합니다.

커맨드 패턴 장점

유연성과 확장성을 제공하여 커맨드를 더 키울 수 있고 유연하게 시작 종료를 진행할 수 있습니다.
실행 취소, 다시 실행, 로깅과 같은 기능을 구현하는데 용이합니다.

이렇게 간단하게 커맨드 패턴에 대해 알아봤는데요 다음에는 구조 및 코드로 살펴보도록 하겠습니다! 긴 글 읽어주셔서 감사합니다.

[SwiftUI] 리스트의 섹션(Section)이란?

HoonIOS — Sat, 10 Dec 2022 16:40:55 +0900

안녕하세요, HoonIOS입니다.

리스트에는 섹션이라는 구조체가 존재 합니다.

섹션을 이용하면 데이터를 쉽게 그룹화 하는것도 가능합니다.

섹션(Section)의 구조체 형태

strcut Section<Parent, Content, Footer> {}

섹션에는 헤더와 푸터를 생략할수도 있고 둘중 하나만 선택해서 사용을 할수 있습니다.

이때 헤더, 푸터 모두 뷰여서 커스텀을 통해 원하는 뷰를 구성후 전달을 할수 있습니다.

섹션의 header, footer를 구성하는 방법에 대해 한번 살펴보겠습니다.

섹션(Section) 구성 예제

    let data1 = ["데이터 1", "데이터 2", "데이터 3", "데이터 4"]
    let data2 = ["데이터 5", "데이터 6", "데이터 7", "데이터 8"]

    var body: some View {
        let sectionHead = ["섹션 1", "섹션 2"]
        let footerHead = [data1, data2]
        
        return List {
            ForEach(footerHead.indices) { index in
                Section(header: Text(sectionHead[index]).font(.title),
                        footer: HStack{ Spacer(); Text("\(footerHead[index].count)수") }
                )  {
                    ForEach(footerHead[index], id: \.self) {
                        Text($0)
                    }
                }
            }
        }
    }

두개의 섹션과 각 섹션 별 5개의 데이터를 구성하는 리스트뷰를 구성해봤습니다.
이 예제의 핵심은 Section(header:, footer:)의 struct를 통해 header와 footer를 설정한것입니다.
header는 sectionHead배열의 index를 섹션 주소로 설정했습니다.
footer는 footerHead배열에 갯수만큼 설정해 주었습니다.
UIKit으로 설정해줄때는 UITableViewDataSource프로토콜을 통해 헤더뷰와 푸터뷰를 등록 및 관리를 했지만 SwiftUI에서는 struct를 통해서 설정을 합니다.

간단하게 섹션 정의랑 표현 방법에 대해 포스팅했는데 다음에는 리스트를 커스텀하게 꾸미는 부분에 대해 살펴보겠습니다.

[SwiftUI] SwiftUI에서 리스트(테이블 뷰) 만들기

HoonIOS — Wed, 15 Jun 2022 23:06:11 +0900

안녕하세요, HoonIOS입니다.

이번 포스팅에는 UIKit에서 UITableVIew로 사용되는 List에 대해 사용법 및 설명에 대해 포스팅을 하려고 합니다.

리스트란?(List)

List란 하나 이상의 행 및 뷰를 수직 방향의 목록 데이터로 여러 개의 행이 표현되는 UI를 구성해 여러 개의 데이터를 쉽게 나열할 수 있도록 구성된 뷰입니다.

UIKit의 UITableView와 다른점은 UITableView에서는 하나의 행을 셀이라고 표현을 한 반면 SwiftUI에서는 로우라고 표현합니다.

SwiftUI인 새로운 프레임워크를 통해 리스트를 만들면 그만큼 장점도 있을 겁니다.

장점으론 사용하기 편하다. 귀찮은 것들이 없어졌다입니다.

UITableView를 사용하려면 UITableViewDataSource, UITableViewDelegate를 구현하는 작업을 해야 했는데 List는 해당 작업 내용들을 사용하지 않고도 만들 수 있게 되었습니다.

리스트 구현

간단하게 Text가 있는 List를 구현해보겠습니다.

var body: some View {
    List {
        Text("첫번째")
        Text("두번째")
        Text("세번째")
        Text("네번째")
        Text("다섯번째")
    }
}

List로 만든 결과물을 확인해보면 테이블 뷰와 같은 모습으로 표현되는 것을 확인할 수 있습니다.

정적 콘텐츠

List는 하나의 로우에 원하는 뷰를 담아서 전달을 합니다.

즉 하나의 로우에 Text만 넣을 수 있는 것이 아니라 텍스트, 이미지, 모양 등 다양한 뷰들을 동시에 넣어서 표현을 할 수 있습니다.

var body: some View {
    List {
        Text("첫번째")
        Image(systemName: "trash")
        Rectangle().frame(width: 100, height: 100)
        Text("두번째")
        Color(.red).frame(width: 50, height: 50)
    }
}

위 예시처럼 만약 각 로우에 텍스트, 이미지, 모양을 지정해줘서 넣어주면 왼쪽과 같이 정적으로 미리 저장된 것을 그대로 표현할 수 있습니다.

동적 콘텐츠

당연하게 SwiftUI에서는 동적 콘텐츠를 통해 LIst를 만들어 줄 수 있습니다.

크게 서버에 있는 데이터를 받아서 가공하고 처리를 하는 방식을 사용하거나 데이터가 추가, 삭제가 될 수 있을 때 동적 콘텐츠 LIst를 많이 사용을 하게 됩니다.

동적 콘텐츠를 사용하는 방법은 크게 세 가지가 있습니다.

Range <Int>
RandomAccessCollection
identifiable 프로토콜

Range <Int>

이 방식은 타입의 값을 넘겨주는 방식입니다 예를 들어 50개의 로우를 만들어 각 0부터 49까지 List를 만드는 코드를 살펴보겠습니다.

var body: some View {
    List(0..<50) {
        Text("\($0)")
    }
}

위 코드에서 봤듯이 0부터 49까지 찍히는 것을 확인할 수 있습니다.
여기서 Range <Int>에 범위 연산자를 사용하실 때는A.. <B만 사용 가능하며 A... B, A...,... A Range 타입을 사용하면 오류가 발생하니 이 부분은 주의해주셔야 합니다!!!!!!

RandomAccessCollection

이 방법은 RandomAccessCollection 프로토콜을 준수하는 데이터를 제공하는 것입니다.

이렇게 말씀드리면 그게 무슨 말이야 라고 말을 할 것입니다.

우선 차근차근 설명을 하겠습니다.

RandomAccessCollection 프로토콜이란?

- 효율적인 랜덤 접근을 지원하는 컬랙션이라고 합니다.

- 좀 더 쉽게 말해 O(1)의 시간 복잡도 안에 인덱스 사이의 거리를 측정할 수 있다고 생각하고 넘어가면 편합니다.

데이터 구분을 식별할 수 있도록 하기 위해 아래 2가지 방법 중 하나를 택해서 id값을 제공해야 합니다.

id 식별자 지정
- id로 사용할 값을 직접 인수로 제공하는 것으로, 각 로우 데이터마다 고유한 UUID를 생성해줘 고유 식별을 가능하게 하는 것입니다.
- id 매개 변수에는 Hashable 프로토콜을 준수하는 프로퍼티를 지정할 수 있고 그 데이터 타입 자체가 Hashable 프로토콜을 준수하고 있다면 self라고 입력을 할수 있습니다.
(이 경우는 Swift에서 대부분의 타입들은 Hashable 프로토콜을 준수하고 있어 프로포티를 지정하기보다는 self로 자신을 명시합니다.
identifiable 프로토콜
- 이 방법은 Test의 데이터 구조체에 identifiable 프로토콜을 채택해서 List를 만들 때 id에 매개변수 id를 전달하지 않고 Test 구조체 자체에 UUID를 담을 id 프로퍼티를 만들고 이것을 식별자로 식별할 수 있도록 하는 역할입니다.

/** id 식별자 지정 **/
struct Test{ }

List ([Test(index: "0"), Test(index: "1"),Test(index: "2"), id: \.self) {...} 
-> 오류 발생 

List ([Test(index: "0"), Test(index: "1"),Test(index: "2"), id: \.name) {...} 
extension User: Hashable{}

-> 해결 방안 
1. 식별을 위한 프로토콜 지정
2. Hashable 프로토콜 채택

/** identifiable 프로토콜 **/
Struct Test: Identifiable {
	let id = UUID()
    ...
}

List([Test(index: "0"), Test(index: "1")]) { ... }

1. Test 구조체에 Identifiable 프로토콜을 채택했고 안에 변수 자체에 UUID를 식별자로 삼아줬으므로 따로 id를 설정할 필요가 없습니다.

이렇게 정적, 동적 리스트까지 살펴보았습니다.

정적 동적 조합해서 사용하는 방법 등, 더 많은 내용들은 다음 포스팅에 살펴보겠습니다.

[SwiftUI] NavigatonViewStyle에 대해 알아보기

HoonIOS — Sun, 5 Jun 2022 15:22:39 +0900

안녕하세요, HoonIOS입니다.

저번에는 NavigationView에 대해 알아봤는데 이번에는 애플에서 제공하는 navigationViewStyle 수식어들에 대해 원하는 스타일을 적용하도록 한번 살펴보겠습니다.

내비게이션 뷰 스타일은 크게 3가지를 제공합니다.

내비게이션 뷰에 스타일을 적용하는 방법은 아래와 같습니다.

NavigationView { }
	.navigationViewStyle(...)

스타일 종류	설명
DefaultNavigationViewStyle	- 내비게이션 뷰의 기본 스타일 - 자동으로 스타일을 결정 - watchOS에서만 제외하고 모두 사용이 가능
StackNaviagtionViewStyle	- 계층 구조를 하나 뷰로 나가는 스타일 - tvOS, iOS에서 사용 가능 - NavigationVIew안에 여러 뷰를 생성했으면 맨 처음에 있는 뷰만 인식
DoubleColumnNavigationViewStyle	- UIKit에서 SplitViewController의 역할 - 만약 사용할수 없는 OS면 자동으로 StackNavigationViewStyle로 전환이 된다. -NaviagtionView안에 여러 뷰를 생성했으면 맨 처음과 맨 마지막 뷰만 인식을 한다.

DoubleColumnNaviagationViewStyle이 어떤 형식으로 보이는지 확인해보겠습니다.

iPhone 12Pro max를 Lanscape 한 후에 실행을 해보면 위와 같이 DoubleColumnNaviagationViewStyle형태로 ViewController가 보이는 것을 확인할 수 있습니다.

[SwiftUI] SwiftUI에서 UINavigationViewController 사용하기 (NavigationView)

HoonIOS — Sun, 5 Jun 2022 14:55:55 +0900

안녕하세요, HoonIOS입니다.

이번에는 UIkit에서 제공하는 UINavigationViewController을 SwiftUI에서 어떻게 사용하는지 한번 살펴보겠습니다.

내비게이션 뷰는 내비게이션 스택을 통해 콘텐츠 뷰들을 관리하는 컨테이너 뷰입니다.

또 화면을 전환하거나 내비게이션 아이템, 내비게이션 타이틀과 같은 요소들을 이용해 Controller을 쉽고 다양하게 보여줄 수 있습니다.

NavigationView 적용 방법

NavigationView {
    Text("ContentView 01")
}

내비게이션 뷰를 적용하기 위해서는 넣고 싶은 컨탠츠들을 내비게이션 뷰로 감싸 주면 됩니다.

즉, 저는 내비게이션 뷰 안에 Text 객체를 넣어줘서 표현해줬습니다.

NavigationViewTitle 적용 방법

NavigationView {
    Text("ContentView 01")
        .navigationTitle("SwiftUI")
        .navigationBarTitleDisplayMode(.inline)
}

내비게이션 뷰 안에. navigationTitle(타이틀 제목)을 넣어주면 됩니다.

가끔씩 업데이트되지 않은 서적은. navigationBarTitle(타이틀 제목)을 넣어달라는 내용이 있는데 현재. navigationBarTitle은 Descrepted 되었으므로. navigationTitle 메서드를 사용해주셔야 합니다. :)

근데 여기서 위 예시 코드 중에. navigationBartTitleDisplayMode메서드가 있는 것을 확인하셨을 겁니다.

해당 옵션도 한번 확인해보겠습니다.

NavigationViewTitle 보여주는 옵션 설정하기

. navigationBarTitleDisplayMode을 통해 보여주는 모드를 설정하는 스타일은 크게 두 가지가 있습니다.

만약 디스플레이 모드를 설정해주지 않으면 기본적으로 automatic이 사용됩니다.

large
아래와 같이 내비게이션 뷰 안에 큰 제목으로 표현이 되는 Mode입니다.

inline
UIKit의 내비게이션 뷰 타이틀과 같이 맨 위 가운데에 들어가는 것을 확인할 수 있습니다.

NavigationBarItem 설정하기

UIKIt에서 내비게이션 바 버튼 아이템을 설정할 때는 UIBarButtonItem객체를 생성해줘서 구현하도록 설정해줬습니다.

SwiftUI에서는 각 아이템 버튼 객체를 생성해준 후 NavigationBarItems 수식어에 전달을 해줍니다.

var body: some View {
        let leftBtn = Button(action: { print("is Left Btn") }) {
            Image(systemName: "bell").imageScale(.large)
        }
        
        let rightBtn = Button(action: { print("is Right Btn") }) {
            Image(systemName: "gear").imageScale(.large)
        }
        
        return NavigationView {
            Text("ContentView 01")
                .navigationTitle("HoonIOS")
                .navigationBarTitleDisplayMode(.inline)
                .navigationBarItems(leading: leftBtn, trailing: rightBtn)
        }
    }

위 코드를 한번 살펴보면 leftBtn, rightBtn의 Button 타입의 변수를 생성해준후 각 actionEvent, 버튼 이미지를 설정해 주고 이 객체를 NavigationView의 navigationBarItems에 전달해준 것을 확인할 수 있습니다.

그럼 아래와 같이 NavigationBarItems가 설정된 것을 확인할 수 있습니다.

추가적으로 만약 내비게이션 뷰 아이템을 하나로 묶어서 표현을 하고 싶은 HStack에 묶어서 사용하면 가능할 수 있습니다.

let leftBtn = Button(action: { print("is Left Btn") }) {
            Image(systemName: "bell").imageScale(.large)
        }
        
        let rightBtn = Button(action: { print("is Right Btn") }) {
            Image(systemName: "gear").imageScale(.large)
        }
        let makeTrailing = HStack {
            leftBtn
            rightBtn
        }
        
        return NavigationView {
            Text("ContentView 01")
                .navigationTitle("HoonIOS")
                .navigationBarTitleDisplayMode(.inline)
                .navigationBarItems(leading: leftBtn, trailing: makeTrailing)
    	}

위와 같이 makeTrailing의 HStack타입 변수에 넣어주면 두 개의 아이템을 한 번에 묶어서 표현되는 것을 확인할 수 있습니다.

내비게이션 링크를 통해 다른 화면 이동

내비게이션 링크는 특정 이벤트를 통해 다른 화면으로 이동할 때 사용하는 메서드입니다.

뭐... 음...

간단하게 UIKit에서 pushViewController 메서드라고 생각하면 쉽습니다.

뷰를 추가하여 내비게이션 계층 구조에 스택을 추가하는 것입니다.

NavigationView {
    NavigationLink(destination: Text("Welcome!\n is Another View!")) {
        Text("ContentView 02")
    }
    Text("ContentView 01")
        .navigationTitle("HoonIOS")
        .navigationBarTitleDisplayMode(.inline)
}

위 코드를 살펴보면 ContentView 02 텍스트를 누르면 다른 뷰로 이동을 하고 그 뷰 안에는 Welcome! is Another View!라는 텍스트가 보이는 것을 확인할 수 있습니다.

현재까지 내비게이션 뷰에 대해 살펴봤습니다.

처음에는 많이 어색할 수 있지만 버튼 아이템이나 바 타이틀을 부여하는 부분에서는 더 간편하고 쉬운 거 같다는 생각이 드네요 :)

[SwiftUI] SwiftUI에서 Button(버튼) 사용하기

HoonIOS — Sat, 28 May 2022 17:12:38 +0900

안녕하세요, HoonIOS입니다.

SwiftUI에서 Button 사용자의 탭 이벤트를 통해 특정 작업을 할 수 있게 기본적으로 제공하는 컨트롤러입니다.

즉 UIKit에서는 UIButton하고 같은 역할을 하는 친구라고 생각을 하시면 더 이해하기 쉬우실 거 같습니다.

애플 공식문서에서는 어떻게 정의하고 있는지 한번 확인해보겠습니다.

말 그대로 행동을 이니셜라이저해 컨트롤하는 거라고 쓰여있네요, 말 그대로 행동을 컨트롤한다! 이거입니다.

버튼의 생성자는 모두 2가지 매개변수를 정의를 하고 있습니다.

한 개는 버튼의 외형을 구분해주는 거고 다른 하나는 이벤트가 발생했을 때의 처리를 해주는 코드입니다.

이해가 안 되실 수 있으니 아래 버튼한개를 생성해보겠습니다.

var body: some View {
    VStack {
        Button(action: {
            print("Hello is HoonIOS")
        }, label: {
            Text("Hoons")
        })
    }
}

위 코드와 같이 살펴보면 버튼을 누르면 Hello is HoonIOS를 로그로 표출해달라고 했고 버튼의 Label은 Hoons로 설정을 해줘라고 코드를 부여해줬습니다.

그 결과 왼쪽과 같이 버튼이 표현되는 것을 확인할 수 있습니다.

버튼의 제네릭 매개변수 Label에는 뷰 프로토콜을 준수하는 타입이면 무엇이든 사용할 수 있습니다.

버튼의 Label을 이용해 버튼을 여러 형식으로 나눠서 적용하는 방식을 살펴보겠습니다.

1.
Button(action: {
    print("Hello is HoonIOS")
}, label: {
    Text("Hoons")
})

2.
Button(action: {
    print("Hello is HoonIOS 2")
}, label: {
    Text("Hoons2")
        .padding()
        .background(Capsule().strokeBorder())
})

3.
Button(action: {
    print("Hello is HoonIOS 3")
}){
    Circle()
        .stroke(lineWidth: 2)
        .frame(width: 80, height: 80)
        .overlay(Text("Hoons3"))
}

터치 이벤트랑 텍스트만 표현하기 위해서는 단순하게 action과 title 매개변수를 사용해서 터치 이벤트와 버튼 title을 구분해줄 수 있습니다.
버튼의 텍스트 주변에 백그라운드를 Capsule을 이용해서 외곽선을 그려줬습니다.
그럼 버튼 외각에 Radius가 적용되는 사각형이 표출되는 것을 확인할 수 있습니다.
이번 항목은 2번 항목과는 다르게 외곽석을 먼저 그리고. overlay 메서드를 통해 그 위에 텍스트를 올려줬습니다.
즉 2번은 텍스트를 구성하고 background를 설정해준 반면에 3번 방식은 외곽선을 그리고 텍스트를 올려준 것입니다.

버튼에 이미지 넣기

UIKit와 똑같이 SwiftUI에서 이미지를 넣을 수 있습니다.

한번 버튼에 시스템 이미지를 적용해보겠습니다.

Button(action: {
    print("Hello is HoonIOS2")
}, label: {
    Image(systemName: "arrow.clockwise.circle")
        .imageScale(.large)
        .font(.largeTitle)
})

위의 방식으로 label 매개변수에 Image객체를 생성해 크기와 폰트를 지정해주면 사이즈와 이미지가 버튼에 적용되는 것을 볼 수 있습니다.
버튼 이미지를 사용할 때 주의할 점은 버튼에 이미지를 넣으면 이미지 원본 색상을 잃어버리고 AccentColor의 색으로 뒤덮이게 됩니다.
이럴 때는 랜더링 모드를 변경해주거나 버튼 스타일을 적용해주면 해결이 됩니다.

- 이미지가 색상을 잃어버렸을 때

랜더링 모드)
즉 이미지가 원본 색상을 잃어버리게 된다면 이것은 시스템이 자동으로 template모드로 적용시키기 때문에 색상을 잃어버리게 됩니다.

따라서. renderingMode(. original)로 이미지를 설정해주면 됩니다.

버튼 스타일)

버튼 스타일 수식어에는 디폴트 값으로 DefaultButtonStyle을 사용하게 됩니다.

PlainButtonStyle의 효과는 별도로 시각적 요소를 적용하지 않고 버튼을 누르거나 포커스 되어 있을 때 그리고 비활성화된 상태일 때만 지정된 효과를 적용하는 것입니다.

만약 이미지를 색상대로 표현해주고 싶으면. buttonStyle(. PlainButtonStyle)을 적용해주면 됩니다.
버튼 스타일에는 크게 3가지가 있습니다.

DefaultButtonStyle
- 버튼 스타일 생략시 기본적으로 적용되는 값, 이 스타일은 환경에 따라 시스템이 알아서 버튼 스타일을 반영하게 됩니다.
BorderlessButtonStyle
- 기본 반영되는 스타일입니다. 콘텐츠에 미리 지정된 시각적 효과가 적용이 되고 테두리를 그리지 않습니다.
해당 스타일은 WatchOS에서는 사용할수 없고 MacOS에서는 BorderedButtonStyle이 함께 제공이 됩니다.
PlainButtonStyle
- 모든 OS에서 사용할수 있는 버튼 스타일로 어떠한 시각적 요소가 적용되지 않는 스타일입니다.

onTapGesture 리스너

Button을 통해 action을 등록하는 경우 말고도 다른 객체에게도 탭 체스처를 적용할 수 있습니다.

onTapGesture 수식어를 사용하면 버튼을 이용하지 않고도 탭 기능을 구현할 수 있습니다.

이 수식어는 어느 뷰에서나 쉽고 간단하게 추가할 수 있습니다.

onTapGesture을 어떻게 사용하는지 한번 살펴보겠습니다.

Image(systemName: "arrow.clockwise.circle")
    .imageScale(.large)
    .font(.largeTitle)
    .onTapGesture {
        print("Image onTapGesutre")
	}

이런 식으로 뷰에 onTapGesture을 등록해주면 됩니다.

onTapGesture 수식어는 하이라이트 애니메이션과 같은 기본 효과들은 사용할 수 없고 커스텀 버튼 스타일을 사용할수 없는 점은 주의해야 할 점입니다.

[SwiftUI] Spacer란?(Spacer을 이용해서 뷰 짜기)

HoonIOS — Sun, 24 Apr 2022 17:24:26 +0900

안녕하세요, HoonIOS입니다.

저번에는 스택을 이용하여 레이아웃을 짜 봤습니다.

이번에는 Spacer을 이용하여 레이아웃을 구성해보겠습니다.

Spacer란?

Spacer는 뷰 사이의 간격을 설정을 하거나 뷰의 크기를 확장할 때 사용되는 레이아웃입니다.

스택 밖에서 사용될 때는 부모 뷰가 제공하는 공간 내에 최대의 크기로 확장이 되고 하나의 뷰로 사용이 됩니다.

따라서 Spacer는 그때그때 크기가 달라지게 되겠죠?

HStack, VStack에서 사용을 할 때는 시각적 요소가 제외되고 단지 공간을 차지하기 위한 역할로만 기능을 합니다. 만약 아무 콘텐츠 없이 혼자 단독으로 사용하게 되면은 뷰가 없는 거처럼 사용이 됩니다.

아래와 같이 Stack안에 색깔이 빨간색인 Spacer을 넣어주면 어떻게 표현이 될까요?

var body: some View {
    HStack{
        Spacer().background(Color.red)

    }
}

Stack안에 사용하면 왼쪽과 같이 아무 콘텐츠 없이 혼자 단독으로 사용되어 뷰가 없는 거처럼 사용이 됩니다.

그럼 Stack안에 Spacer와 다른 콘텐츠가 있을 때 어떻게 표현이 되는지 한번 확인해보겠습니다.

var body: some View {
    HStack {
        Spacer().background(Color.red)
        Text("Text").font(.largeTitle).background(Color.blue)
    }
}

결과를 살펴보면 Spacer에 배경색을 Red로 지정을 해도 무시한 것을 확인할 수 있습니다.
Spacer는 시각적 효과를 준 것은 모두 적용되지 않습니다.
Spacer을 줌으로써 텍스트가 한가운데에 위치해있지 않고 가장 우측으로 이동한 것을 확인할 수 있습니다.
즉 Spacer는 텍스트뷰 크기를 제외한 나머지 공간을 모두 차지한 것을 볼 수 있습니다.

정확하게 Spacer가 얼마큼 차지하는지 스택에 대한 background 색깔을 지정해주겠습니다.

HStack에 대한 백그라운드 색깔을 초록색으로 지정해줬습니다.
결과를 봤을 때 Text뷰에 해당하는 부분을 제외하고는 초록색으로 모두 변한 것을 확인할 수 있습니다.
즉, Spacer가 차지하는 공간은 초록색으로 색칠한 부분과 같습니다.

Spacer의 크기를 지정해줄 수 없냐고요?

당연히 지정할 수 있습니다.

Spacer 구조체가 어떻게 되어 있는지 확인해보겠습니다.

Struct Spacer {
	var minLength: CGFloat?
    init(minLength: CGFloat? = nil)
    typealias Body = Never
}

extension Spacer: View {}

Spacer의 init을 보면 크기를 설정해주면 해당 크기만큼 콘텐츠의 간격을 지정해주고 만약 설정하지 않으면 뷰의 간격에 따라 알아서 조절하게 됩니다.

HStack {
    Text("Left Text").font(.largeTitle).background(Color.red)
    Spacer(minLength:100)
    Text("Right Text").font(.largeTitle).background(Color.blue)
}

Spacer 특성상 사용 가능한 공간과 뷰의 크기에 따라 간격을 알아서 조절하게 되는데 minLength값을 지정하게 되면 콘텐츠 간의 최소 간격을 지정할 수 있게 됩니다.

즉, 더 크게 늘을 수는 있지만 간격이 더 좁아질 수는 없습니다.

Spacer의 길이도 지정해줄 수 있습니다.

HStack {
    Text("Left Text").font(.largeTitle).background(Color.red)
    Spacer().frame(width:100)
}.background(Color.green)

Spacer의 넓이를 100으로 지정해줌으로써 가로 한 줄을 모두 차지하는 게 아니라 길이가 100만큼 차지하는 것을 확인할 수 있습니다.

Spacer을 이용하면 아래와 같이 쉬운 뷰를 구성할 수 있습니다.

 VStack {
        Text("1번째").font(.largeTitle)
        Text("2번째").font(.headline).foregroundColor(Color.blue)
        Spacer()
        Text("3번째")
        Spacer()
        Spacer()
        Spacer()
        Text("4번째").font(.body)
    }
    .font(.title)
    .frame(width: 200, height: 400)
    .padding()
    .border(Color.red, width: 3)
}

Spacer는 개수만큼 크기를 분할하여 나눌 수 있어 원하는 위치에 원하는 개수만큼 넣어주면 m/n의 비율만큼 구성을 해줄 수 있어 레이아웃을 구성하기에는 더 편리합니다.

Spacer을 이용하면 정말 편리하고 쉽게 레이아웃을 짤 수 있는 것을 볼 수 있습니다. :)

좀 더 다양한 HStack, VStack, ZStack을 통해서 테스트해보고 다양하게 구성해보시면 좋을 것 같네요 ㅎㅎ