Anpassade ark för SwiftUI

Har du någonsin velat skapa ett anpassat ark med dynamisk höjd i SwiftUI? Eftersom Apple tillhandahåller en inbyggd Sheet-komponent är det enkelt att använda den för att designa alla typer av anpassade ark vi behöver i vår iOS-app.

Det har dock inte alltid varit så. Äldre versioner av iOS, som iOS 14, stöder inte den här funktionen. Så om din app stöder dessa iOS-versioner har du inte lyxen att lösa problemet sömlöst. Men oroa dig inte! När du har läst den här artikeln kommer du att kunna skapa ark med dynamisk höjd i alla iOS-enheter som stöder SwiftUI! Nu testar vi.

Att skapa anpassade ark är inte alls komplicerat. Följ bara mina steg.

Steg 1: Skapa en ny vy för det nedersta arket

Vi behöver först skapa en ny SwiftUI View-fil, så vi delar upp vår kod i olika filer. Jag kallade min för "BottomSheetView", du kan kalla din vad du vill.

//
//  BottomSheetVie.swift
//  BottomSheet
//
//  Created by Faris Hurić on 10. 10. 2022..
//

import SwiftUI

struct BottomSheetView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct BottomSheetVie_Previews: PreviewProvider {
    static var previews: some View {
        BottomSheetView()
    }
}

Du borde se något liknande som utgångspunkt. Nu börjar vi skapa.

Steg 2: Kodningsvy

Låt oss skapa en enkel VStack och lägga till några vymodifierare i den.

VStack {
	Text("Hello sheet!")
}
.frame(maxWidth: .infinity)
.background(.white)

Det är också viktigt att notera att denna VStack måste bäddas in i en annan stackvy eftersom vårt nedersta ark måste fylla hela skärmen. Jag kommer att bädda in det i ZStack. Glöm inte heller att lägga till vit bakgrund på vår VStack.

ZStack(alignment: .bottom) {
    VStack {
        Text("Hello sheet!")
    }
    .frame(maxWidth: .infinity)
    .background(.white)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
.ignoresSafeArea()

Steg 3: Skapa bindande variabel i föräldravyn och skicka den till vårt nedre ark

Vårt nedersta ark ska bara vara synligt när det utlöses av någon åtgärd.
Så, låt oss lägga till lite kod i vårt ark.

Lägg till följande rad i början av View:

@Binding var isShowing: Bool

Och om vårt “ isShowing ” är sant, visa vårt innehåll i ZStack.

struct BottomSheetView: View {
    
    @Binding var isShowing: Bool
    
    var body: some View {
            ZStack(alignment: .bottom) {
                if isShowing {
                    VStack {
                        Text("Hello sheet!")
                    }
                    .frame(maxWidth: .infinity)
                    .background(.white)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
            .ignoresSafeArea()
    }
}

Steg 4: Anropa vår BottomSheetView i den överordnade vyn

Det är viktigt att nämna att alla föräldravyer där du vill anropa vår bottenvy måste ha ZStack som rotvystack. Med hjälp av ZStack kommer vårt bottenark att "åsidosätta innehållet under det".

I ZStack, i din överordnade vy, anropa bara din BottomSheetView. Som du minns från steg 3 behöver vi tillhandahålla en bindande bool till vår BottomSheetView. Så skapa en bindande variabel i början av den överordnade vyn.

@State var isShowingBottomSheet: Bool = false

Jag har också skapat en knapp som växlar mellan den här boken. Du kan också göra det.

Button {
    isShowingBottomSheet = true
} label: {
    Text(“Show bottom sheet”)
}
.buttonStyle(.borderedProminent)

Steg 5: Lägga till animationer, bakgrundsöverlägg och hörnradie

Som ni kan se på skärmdumpen ovan ser vårt ark hemskt ut. Låt oss förbättra det.

I vår BottomSheetView ZStack ovanför VStack, lägg till följande kod

Color.black
    .opacity(0.3)
    .ignoresSafeArea()
    .onTapGesture {
        isShowing = false
    }

Med hjälp av det här lilla knepet kommer vi att uppnå vår bakgrundsöverlagring och genom att trycka på arket utanför stängs arket.
Låt oss också lägga till animationer. Lägg till följande modifierare i vår ZStack:

.animation(.easeInOut)
och lägg till följande övergång i vår VStack:
.transition(.move(edge: .bottom))

Jag kommer nu att presentera en UI-hjälp för rundade hörn i SwiftUI.
Tack vare den här hjälpen kan vi bara ställa in kantradier för de övre hörnen.

// https://stackoverflow.com/a/58606176

struct RoundedCorner: Shape {

    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners

    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

extension View {
    func cornerRadius(_ radius: CGFloat, corners: UIRectCorner) -> some View {
        clipShape( RoundedCorner(radius: radius, corners: corners) )
    }
}

Användningen är väldigt enkel, anropa den bara som en vanlig ViewModifier och skicka en annan parameter, "corners". Låt oss lägga till den i vår kod.

.cornerRadius(8, corners: [.topLeft, .topRight])

Om vi inte anger någon höjd för vårt ark, kommer dess höjd att baseras på innehållet i det. Så för den här artikelns skull, låt oss ange lite höjd på vårt ark.

.ram(höjd: 250)

Slutsats

Och där har du det! Nu kan du skapa vilken typ av ark du vill för alla SwiftUI-stödda iOS och anpassa det efter dina önskemål.

Det finns gott om utrymme att redigera. Du kan lägga till en titel och en stängningsknapp högst upp.

Jag vill uttrycka min tacksamhet för all den kunskap och hjälp jag fått med den här berättelsen till den ende och unikeDino Trnka! Go – kolla in hansMedium-sida.

Du hittar hela startprojektet här: https://github.com/farishuric/BottomSheet

Tack för din uppmärksamhet och lycka till med kodningen! :)