[SwiftUI] Preview, Text, Shape

 

안녕하세요. 1000JI입니다!

전 글에 이어서 바로 SwiftUI! 달려볼까요?

 

---

Preview

SwiftUI에서는 코드로 구성한 화면을 시뮬레이터 또는 디바이스에 빌드 하지 않고 바로 프리뷰를 통해 볼 수 있습니다.

Xcode 14 이전, Xcode 15 이후 버전에 따라 구현 방법이 다른데요~!

// Xcode 14 이전 버전에서 사용된 Preview 방식
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDisplayName("Xcode 14 이전")
//			 .preferredColorScheme(.dark) // DARK 모드로 변환 가능
    }
}

// XCode 15 (iOS 17) 이후 PreView 변경 적용
#Preview("Xcode 15 이후") {
    ContentView()
//        .preferredColorScheme(.dark)
}

 

위와 같은 방법으로 코드를 입력한다면 캡처 된 화면처럼 사용 할 수 있습니다.

 

---

Text

Text 특징

• 사용자 인터페이스에 텍스트를 표시하기 위해 사용되는 기본적인 뷰입니다.
• Text 뷰는 다양한 스타일과 속성으로 텍스트를 쉽게 꾸밀 수 있도록 해줍니다.
• 예를 들어, 글꼴, 크기, 색상, 정렬, 줄 간격 등을 설정할 수 있으며, 여러 줄의 텍스트도 지원합니다.

https://lickability.com/blog/dynamic-type-and-in-app-font-scaling/

위 Style을 지정한다면 Apple Device 해상도에 맞게 테스트 사이즈가 바뀌게 됩니다.

 

Text 예제 코드

struct TextBasic: View {
	var body: some View {
        // 하위 뷰들 간의 간격을 20으로 설정
		VStack(spacing: 20) {
            Text("Hello World! JIWOON!")
                .font(.title) // Font 사이즈를 title, body, footnote 등 정하면 reponsive
            //				.fontWeight(.semibold) // Font 굵기
                .bold()
                .italic()
                .strikethrough(true, color: Color.green)
			
			// 이 방법으로 하게 되면 text 크기를 지정할 수 있습니다. font 12, 40 단점 고정식
            Text("Hellow world2".uppercased())
                .font(.system(size: 25, weight: .semibold, design: .serif))
                .underline(true, color: Color.red)
			
			// multiline text alignment
            Text(
            """
            멀티라인 텍스트 정렬입니다. 멀티라인 텍스트 정렬입니다. 멀티라인 텍스트 정렬입니다. 멀티라인 텍스트 정렬입니다. 멀티라인 텍스트 정렬입니다. 멀티라인 텍스트 정렬입니다.
            멀티라인 텍스트 정렬입니다. 멀티라인 텍스트 정렬입니다. 멀티라인 텍스트 정렬입니다.
            """
            )
            .multilineTextAlignment(.center) // 어느 방향으로 정렬 해줄지?
            .foregroundColor(.purple)
		}
	}
}

 

---

Shape

Shape 특징

• 사각형, 원, 타원, 캡슐 등과 같은 기본 도형을 그리기 위해 사용되는 프로토콜입니다.
• Shape를 구현하는 다양한 기본 제공 도형들이 있으며, 이 도형들은 사용자 인터페이스에서 시각적 요소로 사용할 수 있습니다.
  또한, Shape를 사용하여 커스텀 도형을 정의할 수도 있습니다.
• Shape는 path(in:)라는 메서드를 구현해야 하며, 이 메서드는 주어진 사각형 안에 그릴 경로(Path)를 반환합니다.

Shape 예제코드(1)

struct ShapeBasic1: View {
    var body: some View {
		VStack(spacing: 20) {
			// circle 원형
			Text("원형")
				.font(.title)
            
			Circle()
//                .fill(Color.blue) // fill이 먼저 앞면에 위치한다고 생각하면 됨.
//                .foregroundColor(.pink)
//                .stroke(Color.red, lineWidth: 20)
//                .stroke(Color.purple, style: StrokeStyle(lineWidth: 30, lineCap: .butt, dash: [30])) // dash: 간격마다 {dash}씩 벌어짐.
				.trim(from: 0.2, to: 1.0)
				.stroke(Color.purple, lineWidth: 50) // 색상과 굵기 지정
				.frame(width: 200, height: 100)
				.padding() // 텍스트와 서클 간의 간격을 나타낼 수 있음
			
			// Ellipse 타원형
			Text("타원형")
				.font(.title)
			Ellipse() // 자체적으로 지원하는 타원형
				.fill(Color.green)
				.frame(width: 200, height: 100, alignment: .center)
			
			// 캡슐형
			Text("캡슐형")
				.font(.title)
            Capsule(style: .circular)
				.stroke(Color.blue, lineWidth: 30)
				.frame(width: 200, height: 100, alignment: .center)
		}
    }
}

 

• .fill은 도형 내부를 특정 색상이나 패턴으로 채우는 데 사용됩니다.
• .foregroundColor는 주로 텍스트, 이미지, 그리고 도형과 같은 시각적 요소의 기본 색상을 설정하는 데 사용됩니다.

차이점 요약

• 적용 범위
  • .fill은 도형의 내부를 특정 색상이나 패턴으로 채우는 데 중점을 두고 있습니다.
  • .foregroundColor는 텍스트, 이미지, 도형 등 다양한 시각적 요소의 기본 색상을 설정하는 데 사용됩니다.
• 우선 순위
  • .fill이 설정된 경우, .foregroundColor보다 우선하여 도형의 색상을 결정합니다. 즉, 둘 다 설정된 경우 .fill이 적용되고, .foregroundColor는 무시됩니다.

.fill은 도형 내부를 채우는 데 사용하는 구체적인 방법이며,

.foregroundColor는 도형뿐만 아니라 텍스트나 이미지 등 여러 요소에 색상을 적용하는 보다 일반적인 방법입니다.

도형에서는 보통 .fill을 더 많이 사용합니다.

 

Shape 예제코드(2)

struct ShapeBasic2: View {
    var body: some View {
        VStack(spacing: 20) {
            
            // 직사각형
            Text("직사각형")
                .font(.title)
            Rectangle()
                .fill(Color.red)
                .frame(width: 200, height: 100, alignment: .center)
            
            // 둥근직사각형
            Text("둥근직사각형")
                .font(.title)
            RoundedRectangle(cornerRadius: 20)
                .trim(from: 0.4, to: 1.0)
                .frame(width: 300, height: 200, alignment: .center)
        }
    }
}

 

 

이상으로 궁금하신 점 댓글 부탁드립니다! :)