ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • SwiftUI ScrollView 와 ForEach 로 구현한 영화 포스트 리스트
    SwiftUI 2020. 8. 25. 08:12
    import SwiftUI
    
    struct ContentView: View {
        var userData = posts
        var body: some View {
            //HStack 에 스크롤 뷰를 생성 - 수평 방향의 스크롤 뷰에는 인티케이터 비활성화 
            ScrollView(.horizontal, showsIndicators: false) {
                HStack {
                    //userData 를 순환하면서 PostView 들을 HStack 에 넣고 ScrollView 생성 
                    ForEach(userData) { post in
                        PostView(post: post)
                    }
                }
            }
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
    
    //영화 정보 구조체 - ForEach 를 통해 루핑을 하기 위해서는 Identifiable 프로토콜을 구현해야 함
    //여기서는 UUID를 통해서 식별 객체 id를 정의 
    struct Post : Identifiable {
        let id = UUID()
        let title : String
        let genre : String
        let runningTime: String
        let producer : String
        let casting : String
        let posterName: String
    }
    //테스트용 영화 정보 
    let posts = [
        Post(title: "다만 악에서 구하소서", genre: "범죄 액션", runningTime: "108분" , producer: "홍원찬", casting: "황정민, 이정재", posterName: "movie_image"),
        Post(title: "오케이 마담", genre: "코미디, 액션", runningTime: "108분" , producer: "이철하", casting: "엄정화, 박성웅", posterName: "movie_image2"),
        Post(title: "테넷", genre: "액션 SF", runningTime: "150분" , producer: "크리스토퍼 놀란", casting: "존 데이비드 워싱턴, 로버트 패틴슨", posterName: "movie_image3"),
    ]
    
    
    
    struct PostView: View {
        let post : Post
        var body: some View {
            VStack {
                HStack{
                    Image(post.posterName)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                    
                    VStack(alignment: .leading) {
                        Text(post.title)
                            .font(.system(size: 16, weight: .bold))
                        HStack {
                            Text("개요: \(post.genre)")
                                .font(.system(size: 12, weight: .light))
                            Text(post.runningTime)
                                .font(.system(size: 12, weight: .light, design: .default))
                        }
                        Text("감독: \(post.producer)")
                            .font(.system(size: 12, weight: .light))
                        Text("출연: \(post.casting)")
                            .font(.system(size: 12, weight: .light))
                        Spacer()
                    }.padding(.top, 10)
                    //.padding()
                }
            }
            .padding()
            .frame(height: 150)
            .background(
                LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.3742149392, green: 0.3621929838, blue: 0.919604783, alpha: 0.8244663292)), Color.blue]), startPoint: .topLeading, endPoint: .bottomTrailing)
            )
            .foregroundColor(.white)
            .cornerRadius(15.0)
        }
    }
    

     

     

    댓글

Designed by Tistory.