Swift HStack

Swift HStack

HStack을 이용한 이미지와 텍스트를 나타내는 SectionView

• SwiftUI로 굉장히 간단하게 구현이 가능하다.
• 이미지와 메뉴의 이름을 담아줄 모델을 만들어준다.

import SwiftUI

struct CoffeeMenu: Identifiable {
    let image: Image // UIImage
    let name: String
    
    let id = UUID()
    
    static let sample: [CoffeeMenu] = [
        CoffeeMenu(image: Image("coffee"), name: "아메리카노"),
        CoffeeMenu(image: Image("coffee"), name: "콜드 브루"),
        CoffeeMenu(image: Image("coffee"), name: "돌체 라떼"),
        CoffeeMenu(image: Image("coffee"), name: "아이스 카페 라떼"),
        CoffeeMenu(image: Image("coffee"), name: "나이트 콜드 브루"),
        CoffeeMenu(image: Image("coffee"), name: "돌체 콜드 브루"),
        CoffeeMenu(image: Image("coffee"), name: "요거트 스무디")
    ]
}

• LazyHStack 구현

import SwiftUI

struct MenuSuggestionSectionView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack {
                ForEach(CoffeeMenu.sample) { menu in
                    MenuSuggestionItemView(coffeeMenu: menu)
                }
            }
        }
    }
}

struct MenuSuggestionItemView: View {
    let coffeeMenu: CoffeeMenu
    
    var body: some View {
        VStack {
            Image("coffee")
                .resizable()
                .clipShape(Circle()) // 프레임을 원 모양으로 만들어줌 굉장히 간단함.
                .frame(width: 100.0, height: 100.0)
            Text(coffeeMenu.name)
                .font(.caption)
        }
    }
}

struct MenuSuggestionSectionView_Previews: PreviewProvider {
    static var previews: some View {
        MenuSuggestionSectionView()
    }
}

다른 예제

• 모델

import SwiftUI

struct Event: Identifiable {
    let id = UUID()
    
    let image: Image
    let title: String
    let description: String
    
    static let sample: [Event] = [
        Event(image: Image("event"), title: "미션 e-스티커 추가 증정 이벤트", description: "스타벅스 리프레셔와 함께 22 서머e-프리퀀시를 즐겨보세요."),
        Event(image: Image("event"), title: "22 서머 e-프리퀀시 이벤트 안내", description: "즐거운 여행 속 '나에게 기대감과 즐거움을 주는 스타벅스의 여름 이야기")
    ]
}

• View

import SwiftUI

struct EventSectionView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHStack(spacing: 16.0) {
                ForEach(Event.sample) { event in
                    EventSectionItemView(event: event)
                }
            }.padding(.horizontal, 16.0)
        }
    }
}

struct EventSectionItemView: View {
    let event: Event
    
    var body: some View {
        VStack {
            event.image
                .resizable() // 순서 중요함
                .scaledToFill()
                .frame(height: 200.0)
                .clipped()
            Text(event.title)
                .frame(maxWidth: .infinity, alignment: .leading)
                .font(.headline)
            Text(event.description)
                .lineLimit(1)
                .font(.callout)
                .frame(maxWidth: .infinity, alignment: .topLeading)
        }.frame(width: UIScreen.main.bounds.width - 32.0)
    }
}

struct EventSectionView_Previews: PreviewProvider {
    static var previews: some View {
        EventSectionView()
    }
}