SwiftUI ] 카드 UI 예제

오늘 공부해볼 SwiftUI는 카드 UI이다.

 

앱스토어에서 흔히 볼 수 있는 카드 UI

 

우리나라는 확실히 새로운 기술 적용에 보수적이어서 그런지 SwiftUI에 대해 설명을 하거나 예제를 써놓은 글이 별로 없다. 

반면 외국의 블로그를 찾아보면 이미 유뷰브와 블로그에 많은 예제를 올려놓고 있다. 

 

오늘 참고한 예제는 아래 사이트에서

https://www.appcoda.com/swiftui-card-view/

SwiftUI Tip: How to Create a Flexible Card View with Stacks

 

 

* 소스코드

//
//  ContentView.swift
//  SwiftUITest
//

//

import SwiftUI

struct ContentView: View {
    var body: some View {
        CardView()
    }
}

struct CardView: View{
    var body: some View{
       
        VStack(alignment: .leading){
           Image("IMG_5781")
                      .resizable()
                      .aspectRatio(contentMode: .fit)
            HStack{
                VStack(alignment: .leading){
                    Text("세종시의 이상한 아파트")
                        .font(.headline)
                        .foregroundColor(.secondary)
                    
                    Text("나성동 아파트 전국적으로 유명한 아파트입니다.")
                        .font(.title)
                        .fontWeight(.black)
                        .foregroundColor(.primary)
                        .lineLimit(3)
                    
                    Text("왜 구멍이 뚫려 있을까요?".uppercased())
                        .font(.caption)
                        .foregroundColor(.secondary)
                    }
                .layoutPriority(100)
                Spacer()
                              
                }
        .padding()
          
        }
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color(.sRGB,red: 150/255, green: 150/255, blue: 150/255, opacity: 0.5), lineWidth: 1)
        )
        .padding([.top, .horizontal])
        
    }

    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

* 출력 결과 

 

 

 

 

위에서는 뷰를 정의 하였다. 하지만 뷰의 내용이 하드코딩 되어있어 뷰의 내용을 동적으로 지정하기엔 어렵다. 

 

이럴때 SwiftUI는 변수를 할당 할 수 있다.

 

import SwiftUI

...


struct CardView: View{
    var image: String
    var category: String
    var heading: String
    var author: String
    
    var body: some View{
       
        VStack(alignment: .leading){
           Image(image)
                      .resizable()
                      .aspectRatio(contentMode: .fit)
            HStack{
                VStack(alignment: .leading){
                    Text(category)
                        .font(.headline)
                        .foregroundColor(.secondary)
                    
                    Text(heading)
                        .font(.title)
                        .fontWeight(.black)
                        .foregroundColor(.primary)
                        .lineLimit(3)
                    
                    Text(author.uppercased())
                        .font(.caption)
                        .foregroundColor(.secondary)
                    }
                .layoutPriority(100)
                Spacer()
                              
                }
        .padding()
          
        }
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color(.sRGB,red: 150/255, green: 150/255, blue: 150/255, opacity: 0.5), lineWidth: 1)
        )
        .padding([.top, .horizontal])
        
    }

    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

정의한 View의 Struct안에 변수를 지정한다.

 

선언은 아래와 같이 하여 변수를 동적으로 지정 할 수 있다.

struct ContentView: View {
    var body: some View {
        CardView(image:"IMG_5781", category:"세종시의 이상한 아파트",heading: "왜 구멍이 뚫려 있을까요?", author:"왜 뚫렸나요" )
    }
}