SwiftUI ] 카드 UI 예제 -2 List, NavigationView

지난번 포스트에 이어 List와 NavigationView를 조합해 보겠다.

 

 

* cardData : CardView에 바인드될 데이터

앞서 정의한 CardView를 List로 출력하기 위해서는 CardView에 바인드될 데이터 구조체를 정의하여야 한다. 이때 Identifiable 프로토콜을 채택한다. 

 

struct cardData: Identifiable{
    var id = UUID()
    var image: String
    var category: String
    var heading: String
    var author: String
}

프로토콜이 무엇인가..

https://blog.yagom.net/531

 

Swift - 프로토콜 지향 프로그래밍

 

 

 

* cardData Array 선언하기

Main뷰로 선언된 ContentView의 멤버 변수로 cardData Array를 선언한다.

 

struct ContentView: View {
    let data: [cardData] = [
        cardData(image: "IMG_5781", category: "helllloo", heading: "왜 구멍이 뚫려있지?", author:"세종 사람"),
          cardData(image: "IMG_5790", category: "카페 기행", heading: "가재는 누구편인가?", author:"세종 사람"),
            cardData(image: "IMG_5775", category: "맛집 기행", heading: "돈까스는 맛이 없어", author:"세종 사람")
    ]
  ... 이하생략

 

 

* List 선언

 

NavigationView 안에 List를 할당하고 cardData array를  다음과 같이 출력한다.

 var body: some View {
        NavigationView() {
            List(data){ card in
                CardView(
                    image: card.image,
                    category: card.category,
                    heading: card.heading,
                    author: card.author)
                   
            }.font(.title)
                .navigationBarTitle(Text("세종시 둘러보기"))
        }
        
    }

 

* 미리보기

아래와 같이 리스트에 카드형태의 뷰가 출력된다. 

 

 

* 추가: SwiftUI List에서 Seperator 없애기

 

현재 상태에서 미리보기를 보면 List에 Seperator가 출력되는 것을 볼 수 있다. 이를 없애려면 ContentView에 아래와 같은 init 함수를 추가 해주면 된다. 

  init() {
        UITableView.appearance().separatorColor = .clear
    }

 

* 전체 코드

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

//

import SwiftUI

struct cardData: Identifiable{
    var id = UUID()
    var image: String
    var category: String
    var heading: String
    var author: String
}

struct ContentView: View {
    let data: [cardData] = [
        cardData(image: "IMG_5781", category: "helllloo", heading: "왜 구멍이 뚫려있지?", author:"세종 사람"),
          cardData(image: "IMG_5790", category: "카페 기행", heading: "가재는 누구편인가?", author:"세종 사람"),
            cardData(image: "IMG_5775", category: "맛집 기행", heading: "돈까스는 맛이 없어", author:"세종 사람")
    ]
  
   init() {
        UITableView.appearance().separatorColor = .clear
    }
    
    var body: some View {
        NavigationView() {
            List(data){ card in
                CardView(
                    image: card.image,
                    category: card.category,
                    heading: card.heading,
                    author: card.author)
                   
            }.font(.title)
                .navigationBarTitle(Text("세종시 둘러보기"))
        }
        
    }
}

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.6), lineWidth: 1)
        )
        .padding([.top, .horizontal])
        
    }

    
}

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