0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-06-15

こういうやつ

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)),
]

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?