🐈

SwiftUIでかっちょいいカルーセルを作る

2022/06/15に公開約3,700字

こういうやつ

Unknown.gif

スワイプで流せます。

ソースコード

imageとかcolorとかは自分で定義してください。
それ以外はコピペで動くと思います。


import SwiftUI

struct Home: View {
    
    @State private var currentIndex = 0
    @State private var examples = ["1", "2", "3", "4", "5", "6"]
    @GestureState private var dragOffset: CGFloat = 0
    
    let itemPadding: CGFloat = 20
    
    var courses = coursesData
    @State var showContent = false
    
    var body: some View {
        ScrollView {
           VStack {
              HStack {
                 VStack(alignment: .leading) {
                    Text("オススメ")
                       .font(.largeTitle)
                       .fontWeight(.heavy)
                 }
                 Spacer()
              }
              .padding(.leading, 30.0)

              ScrollView(.horizontal, showsIndicators: false) {
                 HStack(spacing: 20.0) {
                    ForEach(courses) { item in
                       Button(action: { self.showContent.toggle() }) {
                          GeometryReader { geometry in
                             CourseView(title: item.title,
                                        image: item.image,
                                        color: item.color,
                                        shadowColor: item.shadowColor)
                                .rotation3DEffect(Angle(degrees:
                                   Double(geometry.frame(in: .global).minX - 30) / -40), axis: (x: 0, y: 10.0, z: 0))
                                .sheet(isPresented: self.$showContent) { ContentView() }
                          }
                          .frame(width: 246, height: 360)
                       }
                    }
                 }
                 .padding(.leading, 30)
                 .padding(.bottom, 40)
                 Spacer()
              }
           }
           .padding(.top, 18)        
        }
    }
}


struct Home_Previews: PreviewProvider {
    static var previews: some View {
        Home()
    }
}


struct CourseView: View {

   var title = "Build an app with SwiftUI"
   var image = "Illustration1"
   var color = Color("background3")
   var shadowColor = Color("backgroundShadow3")

   var body: some View {
      return VStack(alignment: .leading) {

         Image(image)
            .resizable()
            .renderingMode(.original)
            .aspectRatio(contentMode: .fit)
            .frame(width: 210, height: 340)
            .shadow(color: shadowColor, radius: 20, x: 10, y: 20)
      }

   }
}

struct Course: Identifiable {
   var id = UUID()
   var title: String
   var image: String
   var color: Color
   var shadowColor: Color
}

let coursesData = [
   Course(title: "Build an app with SwiftUI",
          image: "Illustration1",
          color: Color("background3"),
          shadowColor: Color("backgroundShadow3")),
   Course(title: "Design and animate your UI",
          image: "Illustration2",
          color: Color("background4"),
          shadowColor: Color("backgroundShadow3")),
   Course(title: "Swift UI Advanced",
          image: "Illustration3",
          color: Color("background7"),
          shadowColor: Color(hue: 0.677, saturation: 0.701, brightness: 0.788, opacity: 0.5)),
   Course(title: "Framer Playground",
          image: "Illustration4",
          color: Color("background8"),
          shadowColor: Color(hue: 0.677, saturation: 0.701, brightness: 0.788, opacity: 0.5)),
   Course(title: "Flutter for Designers",
          image: "Illustration5",
          color: Color("background9"),
          shadowColor: Color(hue: 0.677, saturation: 0.701, brightness: 0.788, opacity: 0.5)),
]

Discussion

ログインするとコメントできます