swift ui 기본

들어가기에 앞서

1. swift UI 는 실행시키는 prototype의 순서에 따라 UI 형태가 완전히 달라진다.
   예를들어 TEXT 객체로 설명하자면, padding()를 먼저 실행시키는지, background()을 먼저 실행시키는지에 따라 글자의 여백이 다르게 보인다.
   (아래 예시 사진 1-1, 사진 1-2 참고)
   (사진 1-1 : TEXT 객체 padding()을 먼저 실행시킨 사진)
   (사진 1-2 : TEXT 객체 background()을 먼저 실행시킨 사진)

---

객체간 공용 속성

• frame(): width, height, align 을 조정할 수 있다.
• cornerRadius(): 테두리의 굴곡
• background() : 배경
• padding() : 여백
• foregroundColor(): 글자 색 또는 이미지 아이콘 색상을 변경
• edgesIgnoringSafeArea() : 노치영역을 가득채울지, 위 또는 아래부분만 채울지 정하는 속성

---

Stack

화면을 구성할때 가장 기본이 되는 구조이다. HStack, VStack, ZStack 세 가지가 존재한다.

사용 예시코드)

HStack() {
	...
}

• HStack() : 가로 STACK
• VStack() : 세로 STACK
• ZStack() : Z축 STACK

화면 전체를 색으로 감싸기 위해선 ZStack 을 주로 사용한다.
edgesIgnoringSafeArea(.all) 를 이용하면 아이폰 노치영역까지 채울 수 있다.
예시코드)

ZStack {
            Color.blue
                .edgesIgnoringSafeArea(.top)
            Text("hello bro")
}

---

Text

사용 예시코드)

Text("Hello Swift")
	.bold()
    .lineSpacing(1)

• font() : 글자 크기
• bold(): 글자 굵기를 bold 로 지정
• underline(): 밑줄
• truncationMode(): 글자가 frame 값 보다 초과하는 경우 글자를 ...형태로 표시함, .head, .middle, .tail 의 속성이 있음
• lineLimit(): 문단의 줄을 최대 몇줄로 표시할지 지정
• lineSpacing(): 문단의 줄 간격

---

Image

사용 예시코드)

Image("bg1")
	.mask(VStack{
                    Circle()
                    Circle()
                })

• aspectRatio() : 이미지 비율 조정
• mask() : 이미지 마스킹 처리 (보통 원을 그릴때 cornerRadius()를 사용하지 않고 mask(Circle())를 사용)

Swift UI XCode 내에 시스템 아이콘들을 간단하게 불러올 수도 있다.
검색시 'SF Symbols' 검색
wifi 아이콘 이미지 불러오는 예시코드)

Image(systemName: "wifi")

이미지는 이미지간 간격이 보통 spacing 8 정도의 값으로 간격이 떨어져서 나오게 된다.
간격 조절 Tip)
1. Stack 내부에 이미지가 존재하는 경우 stack parameter값에 spacing으로 조정
2. 각 이미지별 padding 값으로 조정

---

Shape

사용 예시코드)

circle()
	.fill(Color.blue)

도형 속성들

• fill() : 도형의 색을 지정
• stroke() : 도형의 테두리 선을 지정 (선굵기, 선종류, 선색상 등)

도형의 종류

1. Rectangle() : 사각형
2. RoundedRectangle() : 둥근 사각형
3. Circle() : 원
4. Capsule() : 캡슐형태의 타원
5. Ellipse() : 원형태를 유지하면서 변하는 원

---

Button

사용 예시코드)

    @State private var isTest = true;
    
    var body: some View {
        VStack(){
            Button(
                action: {
                    isTest.toggle()
                },
                label: {
                    /*@START_MENU_TOKEN@*/Text("Button")/*@END_MENU_TOKEN@*/
                }
            )
            
            Text("isTest = \(isTest.description)")
        }
    }

---

Toggle

Toggle 사용 예시코드)

Toggle(
	"toogle = \(isTest.description)",
	isOn: $isTest
)

---

List

list 사용 예시코드)

List{
    Text("Hello")
    Text("Hello")
    Text("Hello")
    Text("Hello")
    Text("Hello")
}

LIST-SECTION

list-section 사용예시 코드)

List{
	Section(header:Text("HEAD"), footer: Text("FOOT")) {
		Text("item1")
		Text("item2")
	}
}

• list-section의 header,footer 결과