Jak vytvořit button Slide to Unlock ve SwiftUI

Krok 1. Přidání drag gesta

Efektu potáhnutí můžeme dosáhnout přidáním rozpoznávání gesta přetažení. Modifikátor .gesture(DragGesture() připojí k zobrazení gesto přetažení. Pokud chcete získat přístup k hodnotám gesta a provádět akce, použijte metodu instance .onChanged(:). Její closure parametr zahrnuje CGSize od počátečního bodu gesta přetažení do aktuální pozice – value.translation, kde šířka představuje horizontální osu. Následující animace znázorňují změnu velikosti zobrazení v závislosti na vzdálenosti přetažení.

Prvním krokem k vytvoření zobrazení UnlockButton je DraggingComponent obsahující gesture modifier.

‍struct DraggingComponent: View {

  let maxWidth: CGFloat
	
  private let minWidth = CGFloat(50)
  @State private var width = CGFloat(50)
	
  var body: some View {
    RoundedRectangle(cornerRadius: 16)
      .fill(Color.blueDark)
      .frame(width: width)
      .gesture(
        DragGesture()
          .onChanged { value in
            if value.translation.width > 0 {
              width = min(max(value.translation.width + minWidth, minWidth), maxWidth)
            }
        }
      )
      .animation(.spring(response: 0.5, dampingFraction: 1, blendDuration: 0), value: width)
  }

}

Krok 2. Použití limitů a vizuálních detailů

Kromě minimální šířky musíme omezit i maximální velikost komponenty DraggingComponent, kterou lze definovat z parent kontejneru. GeometryReader změní velikost zobrazení na maximální dostupnou hodnotu. Toto chování není pro child zobrazení potřeba.

struct UnlockButton: View {

    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                DraggingComponent(maxWidth: geometry.size.width)
            }
        }
        .frame(height: 50)
        .padding()
    }

}

DragGesture má metodu instance .onEnded(_:), která přidává akci spuštěnou po dokončení gesta. Kromě toho umožňuje přidat například haptic feedback a obrázek, který se vrství před aktuální view se zarovnáním na trailing.

struct DraggingComponent: View {

  @Binding var isLocked: Bool

  ...

    .frame(width: width)
    .overlay(
      ZStack {
        image(name: "lock", isShown: isLocked)
        image(name: "lock.open", isShown: !isLocked)
      },
      alignment: .trailing
    )
    .gesture(
      DragGesture()
        .onChanged { 
          guard isLocked else { return }
        ...
        }
        .onEnded { value in
          guard isLocked else { return }
          if width < maxWidth {
              width = minWidth
              UINotificationFeedbackGenerator().notificationOccurred(.warning)
          } else {
              UINotificationFeedbackGenerator().notificationOccurred(.success)
              withAnimation(.spring().delay(0.5)) {
                isLocked = false
              }
          }
      }
    )

...

  private func image(name: String, isShown: Bool) -> some View {
    Image(systemName: name)
      .font(.system(size: 20, weight: .regular, design: .rounded))
      .foregroundColor(Color.blueDark)
      .frame(width: 42, height: 42)
      .background(RoundedRectangle(cornerRadius: 14).fill(.white))
      .padding(4)
      .opacity(isShown ? 1 : 0)
      .scaleEffect(isShown ? 1 : 0.01)
  }

}

Krok 3. Staging background

Tlačítko UnlockButton by nebylo kompletní bez pozadí a hintu. BackgroundComponent musí být umístěna za vrstvou DraggingComponent.

struct BackgroundComponent: View {

    var body: some View {
        ZStack(alignment: .leading)  {
            RoundedRectangle(cornerRadius: 16)
                .fill(Color.blueBright.opacity(0.4))

            Text("Slide to unlock")
                .font(.footnote)
                .bold()
                .foregroundColor(.white)
                .frame(maxWidth: .infinity)
        }
    }

}

struct UnlockButton: View {

    @State private var isLocked = true

    var body: some View {
        GeometryReader { geometry in
            ZStack(alignment: .leading) {
                BackgroundComponent()
                DraggingComponent(isLocked: $isLocked, maxWidth: geometry.size.width)
            }
        }
        .frame(height: 50)
        .padding()
    }

}

Výborně! Tlačítko odemknutí je připraveno k použití 🚀

Golden Touches ✨

Pozor! Následující kroky mohou způsobit výbuch tvořivosti.

Krok 4. Nastavení intenzity barev

SwiftUI má poměrně dobré modifiers pro práci s barvami a přizpůsobení zobrazení požadovanému designu. Modifikátor hueRotation() umožňuje upravovat a animovat dominantní barvy. V teorii barev může být odstín prezentovaný jako kruh a úhly slouží jako indikátory změn barev.

‍

Přidejme tento modifikátor do komponenty BackgroundComponent.

struct BackgroundComponent: View {

  @State private var hueRotation = false

  var body: some View {
    ZStack(alignment: .leading)  {
    RoundedRectangle(cornerRadius: 16)
      .fill(
        LinearGradient(
          colors: [Color.blueBright.opacity(0.6), Color.blueDark.opacity(0.6)], 
          startPoint: .leading,  
          endPoint: .trailing
        )
      )
      .hueRotation(.degrees(hueRotation ? 20 : -20))

      ...

    }
    .onAppear {
      withAnimation(.linear(duration: 3).repeatForever(autoreverses: true)) {
        hueRotation.toggle()
      }
    }
  }

}

DraggingComponent je taky třeba trochu upravit. V závislosti na hodnotě drag gesta můžeme změnit průhlednost pro background view tak, aby se pozadí spolu s přibližováním k poloze „odemčeno“ postupně stávalo méně průhledným.

struct DraggingComponent: View {

  ...
      RoundedRectangle(cornerRadius: 16)
        .fill(Color.blueDark)
        .opacity(width / maxWidth)
        .frame(width: width)
  ...

}

Krok 5. Podpora simultánních gest

Aktuální vzhled zobrazení UnlockButton nemá klasické atributy tlačítek – rozpoznávání gest poklepáním a vizuální odezvu na stav stisknuto. Nejlepším a nativním způsobem, jak přistupovat k vlastnostem tlačítek a jejich úpravám, je použití ButtonStyleConfiguration. Pro dokončení tohoto kroku vytvoříme základní styl tlačítka, zabalíme DragComponent do zobrazení Button a aplikujeme na ni vytvořený styl pomocí modifikátoru .buttonStyle(). V neposlední řadě podpoříme obě gesta.

A. Vytvoření stylu tlačítka

struct BaseButtonStyle: ButtonStyle {

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .scaleEffect(configuration.isPressed ? 0.95 : 1)
            .opacity(configuration.isPressed ? 0.9 : 1)
            .animation(.default, value: configuration.isPressed)
    }

}

B. Zabalení komponenty do tlačítka a použití stylu tlačítka

struct DraggingComponent: View {

  ...

  var body: some View {
       RoundedRectangle(cornerRadius: 16)
           .fill(Color.blueDark)
           .opacity(width / maxWidth)
           .frame(width: width)
           .overlay(
               Button(action: { }) {
                   ZStack {
                        image(name: "lock", isShown: isLocked)
                        image(name: "lock.open", isShown: !isLocked)
                    }
                }
                .buttonStyle(BaseButtonStyle())
                .disabled(!isLocked),
                alignment: .trailing
          )
  	...
	
	 }

}

C. Podpora simultánních gest

struct DraggingComponent: View {

  ...

  var body: some View {
       RoundedRectangle(cornerRadius: 16)
           .fill(Color.blueDark)
           .opacity(width / maxWidth)
           .frame(width: width)
           .overlay(
               Button(action: { }) {
                   ZStack {
                        image(name: "lock", isShown: isLocked)
                        image(name: "lock.open", isShown: !isLocked)
                    }
                }
                .buttonStyle(BaseButtonStyle())
                .disabled(!isLocked),
                alignment: .trailing
          )
  	...
	
	 }

}

Krok 6. Asynchronicita

Pokud akce odemknutí vyžaduje odpověď z backendu, přidejte stav načítání. Pro zjednodušení budu simulovat request přímo ve view. V projektech se radši držte architektonických patternů, například MVVM.

struct UnlockButton: View {

  @State private var isLocked = true
  @State private var isLoading = false
  
  var body: some View {
    GeometryReader { geometry in
	    ZStack(alignment: .leading) {
        BackgroundComponent()
        DraggingComponent(isLocked: $isLocked, isLoading: isLoading, maxWidth: geometry.size.width)
      }
    }
    .frame(height: 50)
    .padding()
    .onChange(of: isLocked) { isLocked in
      guard !isLocked else { return }
      simulateRequest()
    }
  }
  private func simulateRequest() {
    isLoading = true

    DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
      isLoading = false
    }
  }
}

A na závěr zbývá přidat další stav zobrazení tlačítka do DraggingComponent.

‍struct DraggingComponent: View {

  @Binding var isLocked: Bool
  let isLoading: Bool
  let maxWidth: CGFloat

  ...

    .overlay(
      Button(action: { }) {
        ZStack {
          image(name: "lock", isShown: isLocked)
          progressView(isShown: isLoading)
          image(name: "lock.open", isShown: !isLocked && !isLoading)
        }
        .animation(.easeIn(duration: 0.35).delay(0.55), value: !isLocked && !isLoading)
      }
      .buttonStyle(BaseButtonStyle())
      .disabled(!isLocked || isLoading),
      alignment: .trailing
    )

  ...

  private func progressView(isShown: Bool) -> some View {
    ProgressView()
      .progressViewStyle(.circular)
      .tint(.white)
      .opacity(isShown ? 1 : 0)
      .scaleEffect(isShown ? 1 : 0.01)
  }

}

Dokončili jste cvičení. Dobrá práce! 🥳

Ačkoli je SwiftUI nový framework a stále ještě má jistá omezení, umožňuje poměrně rychle vytvářet krásné designové komponenty mnoha různými způsoby.

‍

Zdroje

💡 Zdrojový kód najdete na GitHubu.

‍extension Color {

    static let pinkBright = Color(red: 247/255, green: 37/255, blue: 133/255)
    static let blueBright = Color(red: 67/255, green: 97/255, blue: 238/255)
    static let blueDark = Color(red: 58/255, green: 12/255, blue: 163/255)

}