How to create a View that reveals hidden buttons when slid in SwiftUI

Hide ⛄ — Sat, 21 May 2022 12:01:48 +0000

Introduction

This article introduces how to implement a View in SwiftUI, in which a hidden button appears from the right when the view is slid to the left.

Implementation

This can be accomplished by changing the offset of the x-axis of the View as the user drags the view.

The code executable in Xcode's Playground is as follows

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            SlideButtons()
                .frame(width: 300, height: 40)
            SlideButtons()
                .frame(width: 300, height: 40)
            SlideButtons()
                .frame(width: 300, height: 40)
        }
    }
}

struct SlideButtons: View {
    // The current x offset of the view.
    @State private var xOffset = CGFloat.zero

    // The default x offset when a drag ends.
    @State private var defaultXOffset = CGFloat.zero

    // Initialize it on `.onAppear()`.
    @State private var hiddenButtonWidth: CGFloat = 0

    @State private var hiddenButtonMaxWidth: CGFloat = 50

    // Ratio of a hidden button width to the entire View.
    private let buttonSizeRatio = 6

    private var dragGesture: some Gesture {
        DragGesture(minimumDistance: 30, coordinateSpace: .local)
            .onChanged { value in
                self.xOffset += value.translation.width
                if self.hiddenButtonMaxWidth * -2 <= self.xOffset && self.xOffset <= 0 {
                    self.hiddenButtonWidth = min(self.xOffset / -2, self.hiddenButtonMaxWidth)
                }
            }
            .onEnded { value in
                withAnimation() {
                    if self.areHiddenButtonsShowed() {
                        if (self.xOffset - self.defaultXOffset) > self.getMinDistanceToChangeDefaultXOffset() {
                            self.hideButtons()
                        } else {
                            // Return to the current default position.
                            self.xOffset = self.defaultXOffset
                            // Reset the button size
                            self.hiddenButtonWidth = self.hiddenButtonMaxWidth
                        }

                    } else {
                        if (self.defaultXOffset - self.xOffset) > self.getMinDistanceToChangeDefaultXOffset() {
                            self.showHiddenButtons()
                        } else {
                            // Return to the current default position.
                            self.xOffset = self.defaultXOffset
                            // Reset the button size
                            self.hiddenButtonWidth = 0
                        }
                    }
                }
            }
    }

    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 0) {
                // Main button
                Rectangle()
                    .foregroundColor(.black)
                    .overlay {
                        HStack {
                            Text("Read a book")
                                .foregroundColor(.white)
                                .padding()
                            Spacer()
                        }
                    }
                    .frame(width: geometry.size.width,
                           height: geometry.size.height)
                    .gesture(
                        self.dragGesture
                    )
                    .onTapGesture {
                        withAnimation() {
                            if self.areHiddenButtonsShowed() {
                                self.hideButtons()
                            } else {
                                self.showHiddenButtons()
                            }
                        }
                    }

                // 1st hidden button
                Rectangle()
                    .frame(width: self.hiddenButtonWidth, height: geometry.size.height)
                    .foregroundColor(Color.yellow)
                    .overlay {
                        Text("Skip")
                            .foregroundColor(.white)
                    }

                // 2nd hidden button
                Rectangle()
                    .frame(width: self.hiddenButtonWidth, height: geometry.size.height)
                    .foregroundColor(Color.red)
                    .overlay {
                        Text("Done")
                            .foregroundColor(.white)
                    }
            }
            .onAppear() {
                self.hiddenButtonWidth = 0
                self.hiddenButtonMaxWidth = geometry.size.width / CGFloat(self.buttonSizeRatio)
                self.hideButtons()
            }
            .frame(width: geometry.size.width, height: geometry.size.height, alignment: .leading)
            .offset(x: self.xOffset)
        }
    }

    private func areHiddenButtonsShowed() -> Bool {
        return self.defaultXOffset == self.getXOffsetToShowHiddenButtons()
    }

    private func hideButtons() {
        self.hiddenButtonWidth = 0
        self.xOffset = CGFloat.zero
        self.defaultXOffset = .zero
    }

    private func getMinDistanceToChangeDefaultXOffset() -> CGFloat {
        return self.hiddenButtonMaxWidth / 2
    }

    private func getXOffsetToShowHiddenButtons() -> CGFloat {
        return (self.hiddenButtonMaxWidth * 2) * -1
    }

    private func showHiddenButtons() {
        self.hiddenButtonWidth = self.hiddenButtonMaxWidth
        self.xOffset = self.getXOffsetToShowHiddenButtons()
        self.defaultXOffset = self.getXOffsetToShowHiddenButtons()
    }
}

PlaygroundPage.current.liveView = UIHostingController(rootView: ContentView())

Reference

What to do if AdMob cannot find my app for linking

Hide ⛄ — Sat, 15 May 2021 08:44:53 +0000

Background

When using Google AdMob, you first need to link your app to AdMob.

According to the AdMob help page, it may take up to a week after your app is published in the app store (e.g. App Store for iOS apps) before your app can be linked.

Problem

However, three weeks after publishing my iOS app, my app was still not found in AdMob and could not be linked to AdMob.

This problem has occurred many times in the past, and you can find many people's reports on the Internet.

See Stack Overflow: App is not visible in appstore on Admob search
- One person reported that they could not find the app even after more than two months.

Solution

Ask in the Google forums for AdMob developers.

Google Mobile Ads SDK Developers: https://groups.google.com/g/google-admob-ads-sdk

If you report a problem and ask for help on the above forum, Google's AdMob staff will help you solve the problem right away.

In my case, after reporting the problem in the above forum, I was able to get my app to show up in AdMob and link to it just 30 minutes later.

Forem: Hide ⛄