article

Monday, July 5, 2021

SwiftUI Horizontal and Vertical Paging using TabView

SwiftUI Horizontal and Vertical Paging using TabView
ContentView.swift
 
//
//  ContentView.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI


struct ContentView: View {

    var body: some View {
        GeometryReader { proxy in
            TabView {
                ForEach(data){profilepic in
                    Image(profilepic.image)
                        .resizable()
                        .clipped()
                }
                .frame(
                    width: proxy.size.width,
                    height: proxy.size.height
                )
            }
            .tabViewStyle(PageTabViewStyle())
        }
    }
}

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

ContentView.swift
 
//
//  ContentView.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI


struct ContentView: View {

    var body: some View {
        GeometryReader { proxy in
            TabView {
                ForEach(data){profilepic in
                    Image(profilepic.image)
                        .resizable()
                        .clipped()
                }
                .rotationEffect(.degrees(-90)) // Rotate content
                .frame(
                    width: proxy.size.width,
                    height: proxy.size.height
                )
            }
            .frame(
                width: proxy.size.height, // Height & width swap
                height: proxy.size.width
            )
            .rotationEffect(.degrees(90), anchor: .topLeading) // Rotate TabView
            .offset(x: proxy.size.width) // Offset back into screens bounds
            .tabViewStyle(
                PageTabViewStyle(indexDisplayMode: .never)
            )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
Model.swift
 
//
//  Model.swift
//  Test
//
//  Created by Cairocoders
//

import Foundation
struct Profile : Identifiable {
     
    var id : Int
    var name : String
    var image : String
}
 
var data = [
 
    Profile(id: 0, name: "Photo1", image: "photo1"),
    Profile(id: 1, name: "Photo2", image: "photo2"),
    Profile(id: 2, name: "Photo3", image: "photo3"),
    Profile(id: 3, name: "Photo4", image: "photo4"),
    Profile(id: 4, name: "Photo5", image: "photo5"),
]

Related Post