<p><span lang="CS" dir="ltr">Pokud chcete použít preview, jednoduše vytvořte funkci composable funkci s anotací @Preview. Pokud je composable funkce opatřena anotací @Preview, měl by se preview vykreslit v designovém okně Android Studio (integrace v AS zatím není dokonalá, ale vývojáři ji neustále vylepšují. Někdy je k vykreslení preview potřeba víc buildů).</span></p><p><span lang="CS" dir="ltr">Anotace preview poskytuje řadu způsobů, jak preview nakonfigurovat a tím zvýšit produktivitu (např. produktivitu lidí, kteří se k projektu připojí později). Níže je uvedený minimální příklad @Preview bez použití některého z příslušných parametrů. Funkci je možné napsat ručně nebo pomocí šablony prev live template.</span></p><pre><code class="language-kotlin">@Preview
@Composable
fun ExamplePreview() {
  Button(
    modifier = Modifier.fillMaxWidth(),
    onClick = {},
    content = { Text(text = "Button") })
}</code></pre><div class="raw-html-embed"><figure style="max-width:826pxpx" class="w-richtext-align-fullwidth w-richtext-figure-type-image"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/5dff7f32-6759-4c1f-b592-53f68817e92c.png" loading="lazy" alt=""></div></figure></div><h2><span lang="CS" dir="ltr">Parametry preview</span></h2><p><span lang="CS" dir="ltr">Anotace preview nacházející se v balíčku ui.tooling má mnoho parametrů, které určují, jak se bude composable renderovat.</span></p><pre><code class="language-kotlin">val name: String = "",
val group: String = "",
@IntRange(from = 1) val apiLevel: Int = -1,
val widthDp: Int = -1,
val heightDp: Int = -1,
val locale: String = "",
@FloatRange(from = 0.01) val fontScale: Float = 1f,
val showSystemUi: Boolean = false,
val showBackground: Boolean = false,
val backgroundColor: Long = 0,
@UiMode val uiMode: Int = 0,
@Device val device: String = Devices.DEFAULT</code></pre><h3><span lang="CS" dir="ltr">name</span></h3><p><span lang="CS" dir="ltr">Každé preview je možné rozpoznat podle názvu, který je standardně názvem funkce preview. Ve výše uvedeném příkladu je název ukázky ExamplePreview.</span></p><pre><code class="language-kotlin">@Preview(name = "Some preview name")
@Composable
fun ExamplePreview() {
  ...
}</code></pre><div class="raw-html-embed"><figure style="max-width:824pxpx" class="w-richtext-align-fullwidth w-richtext-figure-type-image"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/a2940fc4-b47a-4d51-b195-82fb10e3b031.png" loading="lazy" alt=""></div></figure></div><h3><span lang="CS" dir="ltr">group</span></h3><p><span lang="CS" dir="ltr">Podobná preview lze v zájmu lepší čitelnosti seskupit. Může to být opravdu užitečné, pokud existuje množství composable previews.</span></p><pre><code class="language-kotlin">@Preview(group = "Buttons")
@Composable
fun ButtonEnabledPreview() {...}

@Preview(group = "Buttons")
@Composable
fun ButtonDisabledPreview() {...}

@Preview(group = "Texts")
@Composable
fun TextBigPreview() {...}

@Preview(group = "Texts")
@Composable
fun TextSmallPreview() {...}</code></pre><div class="raw-html-embed"><figure style="max-width:707pxpx" class="w-richtext-align-fullwidth w-richtext-figure-type-image"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/fbf43270-8bd7-44b2-a74e-dd2d1143052f.gif" loading="lazy" alt=""></div></figure></div><h3><span lang="CS" dir="ltr">apiLevel</span></h3><p><span lang="CS" dir="ltr">Úroveň API použitá při renderování preview.</span></p><h3><span lang="CS" dir="ltr">widthDP a heightDp</span></h3><p><span lang="CS" dir="ltr">Standardně má okno preview šířku a výšku použité composable položky (chování je podobné jako u wrap_content v layoutech xml). To je možné změnit pomocí widthDp a heightDp. Maximální hodnota pro šířku i výšku je 2000. Nastavením vyššího čísla se šířka preview nezvětší.</span></p><pre><code class="language-kotlin">@Preview(widthDp = 100, heightDp = 100)
@Composable
fun ExamplePreview() {...}</code></pre><div class="raw-html-embed"><figure style="max-width:582pxpx" class="w-richtext-align-fullwidth w-richtext-figure-type-image"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/734699bd-7699-460e-8c8d-f122c5b2c6b5.png" loading="lazy" alt=""></div></figure></div><h3><span lang="CS" dir="ltr">locale</span></h3><p><span lang="CS" dir="ltr">Určuje, které místní nastavení se má použít k vykreslení preview (parametr akceptuje</span><a href="https://developer.android.com/guide/topics/resources/providing-resources.html#LocaleQualifier"><span lang="EN" dir="ltr">&nbsp;</span><span lang="CS" dir="ltr">tento formát místního nastavení</span></a><span lang="CS" dir="ltr">). Pokud se nepoužije, použijí se předvolené zdroje. Tento parametr může být užitečný, pokud je vaše aplikace vícejazyčná.</span></p><p><span lang="CS" dir="ltr">V níže uvedeném příkladu je třeba se zaměřit na několik věcí. Pro jednu sestavu composable lze použít víc anotací preview, což vede k vícenásobným previews. Druhé preview využívá francouzské zdroje.</span></p><pre><code class="language-kotlin">@Preview
@Preview(locale = "fr")
@Composable
fun ButtonPreview() {
  Button(
    ...
    content = { Text(text = stringResource(id = R.string.day_monday)) })
}</code></pre><div class="raw-html-embed"><figure style="max-width:1218pxpx" class="w-richtext-align-fullwidth w-richtext-figure-type-image"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/689eb31c-7f0e-4f3b-a880-3ff8004c6475.png" loading="lazy" alt=""></div></figure></div><h3><span lang="CS" dir="ltr">fontScale</span></h3><p><span lang="CS" dir="ltr">Lze použít k testování škálovatelnosti měřítka písma.</span></p><h3><span lang="CS" dir="ltr">showSystemUi</span></h3><p><span lang="CS" dir="ltr">Boolean, který určuje, jestli se má v preview zobrazit status bar a navigation bar.</span></p><h3><span lang="CS" dir="ltr">showBackground a backgroundColor</span></h3><p><span lang="CS" dir="ltr">Pokud má showBackground boolean hodnotu true, použije se pro náhled předvolená barva pozadí. Tuto barvu jde přizpůsobit parametrem backgroundColor. Měla by se použít barva ARGB int.</span></p><pre><code class="language-kotlin">@Preview(showBackground = true, backgroundColor = 0xff0000)
@Composable
fun ExamplePreview() {...}</code></pre><div class="raw-html-embed"><figure style="max-width:756pxpx" class="w-richtext-align-fullwidth w-richtext-figure-type-image"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/0bf68af0-494f-417f-8053-d3831bceadde.png" loading="lazy" alt=""></div></figure></div><h3><span lang="CS" dir="ltr">uiMode</span></h3><p><span lang="CS" dir="ltr">Konfigurace režimu uživatelského rozhraní se používá, když potřebujete zobrazit preview určitých podmínek uživatelského rozhraní. To je nejužitečnější, pokud chcete composable vidět ve světlém nebo v tmavém režimu (nebo v obou).</span></p><pre><code class="language-kotlin">@Preview(uiMode = UI_MODE_NIGHT_NO)
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun ExamplePreview() {...}</code></pre><h3><span lang="CS" dir="ltr">device</span></h3><p><span lang="CS" dir="ltr">Zařízení, které se má použít v preview. Třída Devices obsahuje seznam použitelných konstant (většinou zařízení Nexus a Pixel).</span></p><pre><code class="language-kotlin">@Preview(device = Devices.PIXEL_3A)
@Composable
fun ExamplePreview() {...}</code></pre><h2><span lang="CS" dir="ltr">Interactive Mode</span></h2><p><span lang="CS" dir="ltr">Interaktivní režim lze zapnout tlačítkem nad preview. Umožňuje vám pracovat s preview stejně jako na zařízení. Jedná se o jednoduchý a rychlý způsob testování prvků s více stavy, jako je zaškrtnutí políčka nebo použití přepínače. Interaktivní režim běží přímo uvnitř AS, což vede k omezením, jako je zakázaný přístup k síti nebo zakázaný přístup k souborům.</span></p><div class="raw-html-embed"><figure style="max-width:695pxpx" class="w-richtext-align-fullwidth w-richtext-figure-type-image"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/7f0c9153-2fab-4b01-90ee-3c9af9013c3f.gif" loading="lazy" alt=""></div></figure></div><div class="raw-html-embed"><figure style="max-width:1200pxpx" class="w-richtext-align-fullwidth w-richtext-figure-type-image"><a href="https://www.goodrequest.com/open-positions/android-developer-sk" target="_blank" class="w-inline-block"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/46771de9-27ba-4a75-a86c-d44dbd81bf44.jpg" loading="lazy" alt=""></div></a></figure></div><h3><span lang="CS" dir="ltr">Další články ze série Jetpack Compose Basics:</span></h3><ul><li><a href="https://www.goodrequest.com/blog/jetpack-compose-basics-scaffold"><span lang="CS" dir="ltr">Vyzkoušejte Scaffold a sestavte několik materiálových komponent se správným rozložením!</span></a></li><li><a href="https://www.goodrequest.com/blog/jetpack-compose-basics-snackbar"><span lang="CS" dir="ltr">Naučte se správně používat Snackbar</span></a></li><li><a href="https://www.goodrequest.com/blog/jcb-showing-image"><span lang="CS" dir="ltr">Jak načítat obrázky z Bitmapy, Vectoru, Painteru nebo URL pomocí funkce Coil</span></a></li><li><a href="https://www.goodrequest.com/blog/jetpack-compose-text-input"><span lang="CS" dir="ltr">Jak používat text field composables v zájmu splnění specifikace Material designu</span></a></li><li><a href="https://www.goodrequest.com/blog/jetpack-compose-basics-series-ako-pouzivat-backdrop-scaffold-composable"><span lang="CS" dir="ltr">Jak používat Backdrop Scaffold composable</span></a></li><li><a href="https://www.goodrequest.com/blog/jetpack-compose-modal-bottom-sheet"><span lang="CS" dir="ltr">Hledáte alternativu k menu nebo dialogům? Vyzkoušejte Modal Bottom Sheet</span></a></li><li><a href="https://www.goodrequest.com/blog/jetpack-compose-compositionlocal"><span lang="CS" dir="ltr">Jak používat a vytvořit vlastní CompositionLocal</span></a></li></ul>

Every android developer who writes UI needs to see the results of their efforts at some point, whether for check, debugging or polishing code. One of the options available in Jetpack Compose is to use compose preview built into the Android studio (other options can be building app into device, layout inspector etc.).

Jetpack Compose Basics - Preview and it’s parameters

Každý Android developer, ktorý píše používateľské rozhranie, potrebuje v určitom okamihu vidieť výsledky svojho úsilia, či už ide o kontrolu, ladenie alebo polishing kódu. Jednou z možností dostupných v Jetpack Compose je použitie preview zostavy zabudovanej do Android Studio (ďalšími možnosťami môže byť zabudovanie aplikácie do zariadenia, layout inspector atď.).

Jetpack Compose Basics - Preview a jeho parametre

62611d2226f190e8e65f8263_Jetpack%20Compose%20Basics%20Preview.jpg

62611d164cd12ca7070d21b8_Preview%20Jetpack%20Compose%20Basics.png

Peter Šuly

Každý vývojář v systému Android, který píše uživatelské rozhraní, potřebuje v určitém okamžiku vidět výsledky svého úsilí, ať už jde o kontrolu, ladění nebo uhlazení kódu. Jednou z možností, které jsou k dispozici v Jetpack Compose, je použití sestavy preview integrované do Android Studio (dalšími možnostmi může být zabudování aplikace do zařízení, layout inspector atd.).

Jetpack Compose Basics – Preview a jeho parametry

<div class="raw-html-embed"><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:600pxpx"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/0aadbfa8-65ac-4a05-afbf-79023b5f7add.gif" loading="lazy" alt=""></div></figure></div><h2><span lang="CS" dir="ltr">Krok 1. Přidání drag gesta</span></h2><p><span lang="CS" dir="ltr">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í.</span></p><p>&nbsp;</p><div class="raw-html-embed"><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:600pxpx"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/dc5113f2-fe76-4451-9336-80ad49c06348.gif" loading="lazy" alt=""></div></figure></div><p><span lang="CS" dir="ltr">Prvním krokem k vytvoření zobrazení UnlockButton je DraggingComponent obsahující gesture modifier.</span></p><pre><code class="language-swift">‍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 &gt; 0 {
              width = min(max(value.translation.width + minWidth, minWidth), maxWidth)
            }
        }
      )
      .animation(.spring(response: 0.5, dampingFraction: 1, blendDuration: 0), value: width)
  }

}</code></pre><p>&nbsp;</p><h2><span lang="CS" dir="ltr">Krok 2. Použití limitů a vizuálních detailů</span></h2><p><span lang="CS" dir="ltr">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.</span></p><pre><code class="language-swift">struct UnlockButton: View {

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

}</code></pre><p><span lang="CS" dir="ltr">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.</span></p><pre><code class="language-swift">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 &lt; maxWidth {
              width = minWidth
              UINotificationFeedbackGenerator().notificationOccurred(.warning)
          } else {
              UINotificationFeedbackGenerator().notificationOccurred(.success)
              withAnimation(.spring().delay(0.5)) {
                isLocked = false
              }
          }
      }
    )

...

  private func image(name: String, isShown: Bool) -&gt; 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)
  }

}</code></pre><div class="raw-html-embed"><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:600pxpx"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/7dee0339-2a80-48ba-b96f-1d9e9311f834.gif" loading="lazy" alt=""></div></figure></div><h2><span lang="CS" dir="ltr">Krok 3. Staging background</span></h2><p><span lang="CS" dir="ltr">Tlačítko UnlockButton by nebylo kompletní bez pozadí a hintu. BackgroundComponent musí být umístěna za vrstvou DraggingComponent.</span></p><pre><code class="language-swift">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)
        }
    }

}</code></pre><p>&nbsp;</p><div class="raw-html-embed"><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:600pxpx"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/f78d3072-2f38-4037-b2db-ca9de9a51bc0.gif" loading="lazy" alt=""></div></figure></div><pre><code class="language-swift">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()
    }

}</code></pre><p><span lang="CS" dir="ltr">Výborně! Tlačítko odemknutí je připraveno k použití 🚀</span></p><h2><span lang="CS" dir="ltr">Golden Touches ✨</span></h2><p><span lang="CS" dir="ltr">Pozor! Následující kroky mohou způsobit výbuch tvořivosti.</span></p><div class="raw-html-embed"><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1633pxpx"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/ee2b7a81-f120-4aaa-aa6b-ee332ca80db9.png" loading="lazy" alt=""></div></figure></div><h2><span lang="CS" dir="ltr"><strong>Krok 4. Nastavení intenzity barev</strong></span></h2><p style="margin-left:0cm;"><span lang="CS" dir="ltr">SwiftUI má poměrně dobré modifiers pro práci s barvami a přizpůsobení zobrazení požadovanému designu. Modifikátor <strong>hueRotation()</strong> 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.</span></p><p>‍</p><div class="raw-html-embed"><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:600pxpx"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/5e7f0de2-f673-4754-ad42-22c40021fda1.gif" loading="lazy" alt=""></div></figure></div><p style="margin-left:0cm;"><span lang="CS" dir="ltr">Přidejme tento modifikátor do komponenty BackgroundComponent.</span></p><pre><code class="language-swift">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()
      }
    }
  }

}</code></pre><p style="margin-left:0cm;"><span lang="CS" dir="ltr">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.</span></p><pre><code class="language-swift">struct DraggingComponent: View {

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

}</code></pre><p>&nbsp;</p><div class="raw-html-embed"><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:600pxpx"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/d4245195-9504-45be-8be6-f2459186456a.svg" loading="lazy" alt=""></div></figure></div><h2><span lang="CS" dir="ltr"><strong>Krok 5. Podpora simultánních gest</strong></span></h2><p style="margin-left:0cm;"><span lang="CS" dir="ltr">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 <strong>.buttonStyle()</strong>. V neposlední řadě podpoříme obě gesta.</span></p><p style="margin-left:0cm;"><span lang="CS" dir="ltr"><strong>A. Vytvoření stylu tlačítka</strong></span></p><pre><code class="language-swift">struct BaseButtonStyle: ButtonStyle {

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

}</code></pre><p style="margin-left:0cm;"><span lang="CS" dir="ltr"><strong>B. Zabalení komponenty do tlačítka a použití stylu tlačítka</strong></span></p><pre><code class="language-swift">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
          )
  	...
	
	 }

}</code></pre><p style="margin-left:0cm;"><span lang="CS" dir="ltr"><strong>C. Podpora simultánních gest</strong></span></p><pre><code class="language-swift">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
          )
  	...
	
	 }

}</code></pre><div class="raw-html-embed"><figure class="w-richtext-figure-type-image w-richtext-align-center"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/98d27ecb-dbc2-44a7-a035-76bd3c9103ec.gif" loading="lazy" alt=""></div></figure></div><h2><span lang="CS" dir="ltr"><strong>Krok 6. Asynchronicita</strong></span></h2><p style="margin-left:0cm;"><span lang="CS" dir="ltr">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.</span></p><p style="margin-left:0cm;">&nbsp;</p><pre><code class="language-swift">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
    }
  }
}</code></pre><p><span lang="CS" dir="ltr">A na závěr zbývá přidat další stav zobrazení tlačítka do DraggingComponent.</span></p><pre><code class="language-swift">‍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 &amp;&amp; !isLoading)
        }
        .animation(.easeIn(duration: 0.35).delay(0.55), value: !isLocked &amp;&amp; !isLoading)
      }
      .buttonStyle(BaseButtonStyle())
      .disabled(!isLocked || isLoading),
      alignment: .trailing
    )

  ...

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

}</code></pre><p>&nbsp;</p><div class="raw-html-embed"><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:600pxpx"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/972ceb48-63a5-414c-af46-b1744b424795.gif" loading="lazy" alt=""></div></figure></div><h2><span lang="CS" dir="ltr"><strong>Dokončili jste cvičení. Dobrá práce! 🥳</strong></span></h2><p style="margin-left:0cm;"><span lang="CS" dir="ltr">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.</span></p><p style="margin-left:0cm;"><span lang="CS" dir="ltr">‍</span></p><h2><span lang="CS" dir="ltr"><strong>Zdroje</strong></span></h2><blockquote><p style="margin-left:30.0pt;"><span lang="CS" dir="ltr"><strong>💡 Zdrojový kód najdete na</strong></span><a href="https://github.com/vaIerika/Slide-to-Unlock-Button"><span style="color:windowtext;"><span lang="EN" dir="ltr"><strong>&nbsp;</strong></span><span lang="CS" dir="ltr"><strong>GitHubu</strong></span></span></a><span lang="CS" dir="ltr"><strong>.</strong></span></p></blockquote><pre><code class="language-swift">‍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)

}</code></pre>

The tutorial doesn’t require adding any third party. The button is built with native SF Symbols and Views. Presented components & modifiers are available for the iOS 13. There is one exception — an improvement mentioned in the 6th step that requires iOS 15. Used colors can be found at the end of the article.

How to Make a Slide to Unlock Button in SwiftUI

Návod nevyžaduje pridanie žiadneho add-onu. Tlačidlo obsahuje natívne SF symboly a zobrazenia. Prezentované komponenty a modifikátory sú dostupné pre iOS 13. Existuje jedna výnimka — vylepšenie uvedené v 6. kroku, ktoré vyžaduje iOS 15. Použité farby nájdete na konci článku.

Ako vytvoriť Slide to Unlock button vo SwiftUI

62c7ef4d14689f3e97f43eec_Slide%20to%20unlock%20button%20tutorial%20Swift%20UI.png

62c7ef4b865382b7a5ad2693_Swift%20unlock%20button%20tutorial.png

Valeriia Abelovska

Návod nevyžaduje přidání žádného add-onu. Tlačítko obsahuje nativní symboly SF a zobrazení. Prezentované komponenty a modifikátory jsou k dispozici pro iOS 13. Existuje jedna výjimka – vylepšení uvedené v 6. kroku, které vyžaduje iOS 15. Použité barvy najdete na konci článku.

Jak vytvořit button Slide to Unlock ve SwiftUI

<p><a href="https://www.mazars.sk/"><span lang="CS" dir="ltr">Mazars</span></a><span lang="CS" dir="ltr"> je mezinárodní integrované partnerství, které se specializuje na audit, účetnictví, poradenství, ale i daňové a právní služby. Společnost působí ve víc než 90 zemích a zaměstnává 42 400 odborníků – víc než 26 000 v integrovaném partnerství a víc než 16 000 v rámci Mazars North America Alliance. Díky neustálému rozvoji znalostí, dovedností a technologií a citu pro kulturní specifika poskytuje služby šité na míru.</span></p><div class="raw-html-embed"><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1200pxpx"><div><img src="https://goodrequest-web-development.s3.eu-central-1.amazonaws.com/blog-migration/b39171c8-f5b4-4f33-a3de-3ad54fa40935.jpg" loading="lazy" alt="Partnestvo s Mazars založené na tvorbe dizajnu a frontend pre informačný systém"></div></figure></div><h2><span lang="CS" dir="ltr">Design UX pro webovou aplikaci</span></h2><p><span lang="CS" dir="ltr">Cílem naší spolupráce je </span><a href="https://www.goodrequest.com/sk/informacne-systemy"><span lang="CS" dir="ltr">vývoj webové aplikace</span></a><span lang="CS" dir="ltr"> PayMap, která má za úkol zpracovávat širokou škálu dat pro mzdové podklady nadnárodních společností. Důležitou součástí spolupráce je taky design webové aplikace, který jsme zahájili důkladnou analýzou UX a definicí problému, který má PayMap řešit, a poznáním požadavků budoucích uživatelů. Díky výstupům z analýz bylo možné efektivně přejít k tvorbě informační architektury a&nbsp;</span><a href="https://www.goodrequest.com/sk/dizajn"><span lang="CS" dir="ltr">designu UI informačního systému</span></a><span lang="CS" dir="ltr">.</span></p><p><span lang="CS" dir="ltr">Hlavním přínosem produktu je zpracování podkladů pro mzdy i navzdory specifickým vstupním datům v různých zemích. A dále jejich přehledná grafická interpretace, která uživateli uleví od nepřehledné práce s obrovskými tabulkami. Dalším z cílů informačního systému je taky zachytit a upozornit na chybějící informace nebo chyby vzniklé při zpracování.</span></p><p><span lang="CS" dir="ltr">Popis platformy:</span></p><ul><li><span lang="CS" dir="ltr">Design UX/UI –&nbsp;</span><a href="https://www.figma.com/"><span lang="CS" dir="ltr">Figma</span></a></li><li><span lang="CS" dir="ltr">Frontend –&nbsp;</span><a href="https://reactjs.org/"><span lang="CS" dir="ltr">React</span></a></li></ul>

We are launching UI / UX design and frontend development in June with a team of professionals from Mazars. Together we create an advanced digital product PayMap.

#grpartners: UI / UX design & frontend for internal information system by MAZARS

Do UI / UX dizajnu a frontend vývoja sa v júni púšťame s tímom profesionálov zo spoločnosti Mazars. Spoločne vytvárame pokročilý digitálny produkt PayMap.

#grpartners: UI / UX design a frontend pre interný informačný systém od MAZARS

60cb3433b8a6f522a594f536_mazars-partners.jpg

63185a4d0a8faf5a06615b23_PayMap%20Design%20and%20development%20for%20Mazars.png

Tomáš Kurať

V červnu se spolu s týmem profesionálů ze společnosti Mazars pustíme do designu UI/UX a vývoje frontendu. Společně vytváříme pokročilý digitální produkt PayMap.

#grpartners: design UI/UX a frontend pro interní informační systém od MAZARS

<p><span lang="cs" dir="ltr">Objevujeme příležitosti a&nbsp;přinášíme digitální inovace.&nbsp;</span><br><span lang="cs" dir="ltr">Nezáleží, v&nbsp;jaké fázi se nacházíte, rozumíme vám a&nbsp;pomůžeme.</span></p>

Budujeme digitální byznysy

<p>Jsme produktové studio GoodRequest. Již 10 let vytváříme dlouhodobě udržitelné digitální produkty, které jsou efektivní, postupně rostou a generují přidanou hodnotu. S ohledem na společnost a planetu.</p>

Naše projekty

Tvoríme produkty od nápadu k rastu.

Testimonials

Co děláme

Produkt

<p>Chcete vytvořit produkt, který si lidé zamilují? Nejlepší produkty vznikají kombinací lidských potřeb, správných technologií a byznysu. Nejprve se zaměříme na pochopení vaší cílové skupiny a vašich obchodních cílů.</p>

Design

<p>Naši certifikovaní designéři UX/UI vám pomohou pochopit potřeby vašich uživatelů. Promluvíme si s vašimi uživateli, analyzujeme data, provedeme audit UX vašeho stávajícího produktu a provedeme testování. Na základě zjištění vytvoříme uživatelské prostředí nebo upravíme to, co je potřeba pro každou digitální platformu, na které produkt budujete.</p>

Vývoj

<p><span lang="cs" dir="ltr">Jsme tým zkušených vývojářů, analytiků, testerů a&nbsp;produktových manažerů. Od roku 2013&nbsp;jsme dodali více než 200&nbsp;úspěšných mobilních a&nbsp;webových aplikací. Vytváříme aplikace na míru potřebám vašeho byznysu a&nbsp;uživatelů, s&nbsp;dokonalou zkušeností, postavené na bezpečné a&nbsp;stabilní architektuře.</span></p>

Růst

<p><span lang="cs" dir="ltr">Proces nekončí implementací. Pokud chceme zůstat jedničkou na trhu, musíme být aktivní. Společně s&nbsp;našimi klienty pokračujeme v&nbsp;neustálé optimalizaci systému a&nbsp;zavádění vylepšení.</span></p>

Budujeme digitální byznysy

Tvoríme produkty od nápadu k rastu.

Tatra banka

3

Forbes

-35 %

Fitshaker

Bistro.sk

Kia mobile

Co děláme

Co přesně děláme?

Klienti se na nás obracejí, když:

Naše příběhy, články a pohled do zákulisí.

Jetpack Compose Basics – Preview a jeho parametry

Jak vytvořit button Slide to Unlock ve SwiftUI

#grpartners: design UI/UX a frontend pro interní informační systém od MAZARS