DEV Community: ShoheOhtani

[SwiftUI] Animate placeholder modifier for View

ShoheOhtani — Sat, 22 Oct 2022 01:41:28 +0000

How to use

// prepare `isLoading: Bool` variable.
VStack { ... }
    .redacted(reason: viewModel.isLoading ? .placeholder : [])
    .animatePlaceholder(isLoading: $isLoading)

2 Steps

Create AnimatePlaceholderModifier
Add extension method to View

Step1: Create AnimatePlaceholderModifier

struct AnimatePlaceholderModifier: AnimatableModifier {
    @Binding var isLoading: Bool

    @State private var isAnim: Bool = false
    private var center = (UIScreen.main.bounds.width / 2) + 110
    private let animation: Animation = .linear(duration: 1.5)

    init(isLoading: Binding<Bool>) {
        self._isLoading = isLoading
    }

    func body(content: Content) -> some View {
        content.overlay(animView.mask(content))
    }

    var animView: some View {
        ZStack {
            Color.black.opacity(isLoading ? 0.09 : 0.0)
            Color.white.mask(
                Rectangle()
                    .fill(
                        LinearGradient(gradient: .init(colors: [.clear, .white.opacity(0.48), .clear]), startPoint: .top , endPoint: .bottom)
                    )
                    .scaleEffect(1.5)
                    .rotationEffect(.init(degrees: 70.0))
                    .offset(x: isAnim ? center : -center)
            )
        }
        .animation(isLoading ? animation.repeatForever(autoreverses: false) : nil, value: isAnim)
        .onAppear {
            guard isLoading else { return }
            isAnim.toggle()
        }
        .onChange(of: isLoading) { _ in
            isAnim.toggle()
        }
    }
}

Step2: Add extension method to View

extension View {
    func animatePlaceholder(isLoading: Binding<Bool>) -> some View {
        self.modifier(AnimatePlaceholderModifier(isLoading: isLoading))
    }
}

[ReactNative] How to control view orientation for Native Module

ShoheOhtani — Wed, 21 Sep 2022 10:46:08 +0000

3 Steps

Modify AppDelegate.h / AppDelegate.m
Create AppUtility.swift for update orientation easily
Fix view's position for ReactNative

Step1: Modify AppDelegate

AppDelegate.h

// add property
@property (nonatomic, assign) UIInterfaceOrientationMask orientationLock;

AppDelegate.m

- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window
{
  return _orientationLock;
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{ ...
// default value
_orientationLock = UIInterfaceOrientationMaskPortrait; 
...
}

Step2: Create AppUtility.swift

struct AppUtility {
  static func lockOrientation(_ orientation: UIInterfaceOrientationMask) {
    if let delegate = UIApplication.shared.delegate as? AppDelegate {
      delegate.orientationLock = orientation
    }
  }

  /// OPTIONAL Added method to adjust lock and rotate to the desired orientation
  static func lockOrientation(_ orientation: UIInterfaceOrientationMask, andRotateTo rotateOrientation:UIInterfaceOrientation) {
    self.lockOrientation(orientation)

    UIDevice.current.setValue(rotateOrientation.rawValue, forKey: "orientation")
    UINavigationController.attemptRotationToDeviceOrientation()
  }
}

Step3: Fix view's position for ReactNative
When you update orientation, view's position will move wrong position. So, when it's happened call this function.

private func fixViewPosition() {
    // Wait 0.1 sec and fix position.
    // It wont be fixed position in some case, so fix twice with 0.1 sec delay for that wired bug.
    DispatchQueue.main.asyncAfter(deadline: .now()+0.1) { [self] in
      let fixedPosition = CGPoint(x: -UIScreen.main.bounds.midX + targetView.bounds.midX, y: -UIScreen.main.bounds.midY + targetView.bounds.midY)
      view.bounds.origin = fixedPosition
      DispatchQueue.main.asyncAfter(deadline: .now()+0.1) { [self] in view.bounds.origin = fixedPosition }
    }
  }

[SwiftUI] How to set custom font to NavigationBarTitle

ShoheOhtani — Sun, 04 Sep 2022 04:36:05 +0000

You need to install Introspect library.

How to use

It should be used on root of navigationView. If you use



NavigationView {
    VStack { ... }
        // ↓ set custom font
        .navigationTitleFont(font: UIFont.custom.extraBold(ofSize: 20))
}

3 Steps

Create ViewModifier
Add extension method to UIFont
Add extension method to View

Step1: Create ViewModifier



import SwiftUI
import Introspect

public struct NavigationTitleFontModifier: ViewModifier {
    public var font: UIFont

    public func body(content: Content) -> some View {
        content
            .introspectNavigationController {
                $0.navigationBar.titleTextAttributes = [.font:font]
            }
    }
}

Step2: Add extension method to UIFont
This is unnecessary. It just for make call custom font easily.



extension UIFont {
    public struct custom {
        static func extraBold(ofSize size: CGFloat) -> UIFont {
            return UIFont(name: "BoldCustomFontName", size: size) ?? UIFont.systemFont(ofSize: size, weight: .bold)
        }
    }
}

Step3: Add extension method to View



public extension View {
    func navigationTitleFont(font: UIFont) -> some View {
        self.modifier(NavigationTitleFontModifier(font: font))
    }
}

[Swift/SwiftUI] How to fix "Attempt to present which is already presenting"

ShoheOhtani — Fri, 12 Aug 2022 15:59:57 +0000

When you implement present ViewController like Modal, some of case you'd see "Attempt to present which is already presenting".

Before code

uiView.window?.rootViewController?.present(viewController, animated: true)

Error log

[Presentation] Attempt to present <UIViewController: 0x10c72d050> on <_TtGC7SwiftUI19UIHostingControllerGVS_15ModifiedContentVS_7AnyViewVS_12RootModifier__: 0x10c60ab30> (from <_TtGC7SwiftUI19UIHostingControllerGVS_15ModifiedContentVS_7AnyViewVS_12RootModifier__: 0x10c60ab30>) which is already presenting <UIViewController: 0x1201f72b0>.

After code

guard let rootViewController = 
uiView.window?.rootViewController else { return }
if rootViewController.presentedViewController == nil {
    rootViewController.present(viewController, animated: true)
}

[SwiftUI] How to create Toast View

ShoheOhtani — Sat, 16 Jul 2022 03:23:25 +0000

How to use

struct ContentView: View {
    @State var presentTop: Bool = false

    var body: some View {
        VStack {
            TPButton(title: "☝️", action: {
                presentTop = true
            })
        }
        .navigationBarTitleDisplayMode(.inline) // if it's needed
        .toast(isPresented: $presentTop, edge: .top) { toastContent }
    }

    var toastContent: some View {
        HStack {
            Image(systemName: "checkmark.circle").font(.headline)
            Text("Toast!").font(.headline)
        }
        .frame(maxHeight: .infinity)
        .padding()
        .background(RoundedRectangle(cornerRadius: 8.0).foregroundColor(.random)) // set color whatever you want
    }

3 Steps

Create ToastView
Create ViewModifier
Create ViewModifier

Step1: Create ToastView

struct Toast<Content:View>: View {
    @Binding var isPresented: Bool
    @State var edge: Edge
    var content: Content
    let action: (() -> Void)?

    private var alignment: Alignment {
        switch edge {
        case .top: return .top
        case .leading: return .leading
        case .bottom: return .bottom
        case .trailing: return .trailing
        }
    }

    init(isPresented: Binding<Bool>, edge: Edge, action: (() -> Void)? = nil, @ViewBuilder content: () -> Content) {
        _isPresented = isPresented
        _edge = State(wrappedValue: edge)
        self.action = action
        self.content = content()
    }

    var body: some View {
        ZStack(alignment: alignment) {
            Spacer().frame(maxWidth: .infinity, maxHeight: .infinity)
            content
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .padding()
        .animation(.spring(), value: isPresented)
        .transition(.move(edge: edge).combined(with: .opacity))
        .onTapGesture {
            withAnimation {
                isPresented = false
                action?()
            }
        }
    }
}

Step2: Create ViewModifier

struct ToastModifier<ToastContent: View>: ViewModifier {

    @Binding var isPresented: Bool
    var toast: Toast<ToastContent>

    init(isPresented: Binding<Bool>, edge: Edge, action: (() -> Void)? = nil, @ViewBuilder toastContent: () -> ToastContent) {
        _isPresented = isPresented
        toast = Toast(isPresented: isPresented, edge: edge, action: action, content: toastContent)
    }

    public func body(content: Content) -> some View {
        ZStack {
            content
            if isPresented { toast }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.clear.ignoresSafeArea(.all, edges: .all))
        .animation(.spring(), value: isPresented)
    }
}

Step3: View Extension

public extension View {
    func toast<Content:View>(isPresented: Binding<Bool>, edge: Edge, action: (() -> Void)? = nil, @ViewBuilder content: () -> Content) -> some View {
        self.modifier(ToastModifier(isPresented: isPresented, edge: edge, action: action, toastContent: content))
    }
}

[ReactNative] How to solve "Unable to resolve module xxx"

ShoheOhtani — Wed, 13 Jul 2022 05:23:02 +0000

1: rm -rf ios/build
2: rm -rf node_modules
3: npm cache clean --force
4: npm install
5: npm start -- --reset-cache
6: npx react-native run-ios

[SwiftUI] Change background color of NavigationView & Form

ShoheOhtani — Mon, 04 Jul 2022 00:19:31 +0000

We need to modify NavigationView & Form.

NavigationView {
    VStack(alignment: .leading, spacing: 0.0) {
        Form {
            Section {
                NavigationLink(destination: EmptyView()) {
                    Text("-")
                }
                ...
            }
        }.backgroundColor(.black) 👈
    }
    .navigationBarTitle("Settings", displayMode: .inline)
    .navigationBarColor(.black, tintColor: .white) 👈
}

Modify NavigationView

struct NavigationBarModifier: ViewModifier {
    var backgroundColor: UIColor?

    init(backgroundColor: UIColor?, tintColor: UIColor?) {
        self.backgroundColor = backgroundColor

        let coloredAppearance = UINavigationBarAppearance()
        coloredAppearance.configureWithTransparentBackground()
        coloredAppearance.backgroundColor = .clear
        coloredAppearance.titleTextAttributes = [.foregroundColor: tintColor as Any]
        coloredAppearance.largeTitleTextAttributes = [.foregroundColor: tintColor as Any]

        UINavigationBar.appearance().standardAppearance = coloredAppearance
        UINavigationBar.appearance().compactAppearance = coloredAppearance
        UINavigationBar.appearance().scrollEdgeAppearance = coloredAppearance
        UINavigationBar.appearance().tintColor = tintColor

    }

    func body(content: Content) -> some View {
        ZStack{
            content
            VStack {
                GeometryReader { geometry in
                    Color(self.backgroundColor ?? .clear)
                        .frame(height: geometry.safeAreaInsets.top)
                        .edgesIgnoringSafeArea(.top)
                    Spacer()
                }
            }
        }
    }
}

extension View {

    func navigationBarColor(_ backgroundColor: Color?, tintColor: Color?) -> some View {
        self.modifier(NavigationBarModifier(backgroundColor: UIColor(backgroundColor ?? .white), tintColor: UIColor(tintColor ?? .black)))
    }

}

Modify Form

struct FormModifier: ViewModifier {

    init(backgroundColor: UIColor?) {
        UITableView.appearance().backgroundColor = backgroundColor
    }

    func body(content: Content) -> some View {
        content
    }
}

extension Form {

    func backgroundColor(_ backgroundColor: Color?) -> some View {
        self.modifier(FormModifier(backgroundColor: UIColor(backgroundColor ?? .white)))
    }

}

[Swift] How to fetch only screenShot & screenRecording from photo library

ShoheOhtani — Wed, 29 Jun 2022 06:46:05 +0000

Apple doesn't prepare enum for screenRecording like .photoScreenshot in PHAssetMediaSubtype. However screenRecording asset has mediaSubtype which is 524288.

import SwiftUI
import Photos

...
var photos: [Asset] = []

func fetchPhotos() {
    let options = PHFetchOptions()
    options.sortDescriptors = [NSSortDescriptor(key: "creationDate", ascending: false)]
    options.predicate = NSPredicate(format: "((mediaSubtype & %d) != 0 || (mediaSubtype & %d) != 0)", PHAssetMediaSubtype.photoScreenshot.rawValue, 524288)
    options.includeHiddenAssets = false

    let result = PHAsset.fetchAssets(with: options)
    result.enumerateObjects { asset, index, _ in
        Task {
            guard let image: UIImage = await self.getImageFromAsset(asset: asset, size: CGSize(width: self.assetSize, height: self.assetSize)) else { return }
            DispatchQueue.main.async { [weak self] in
                self?.photos.append(Asset(asset: asset, image: image))
            }
        }
    }
}

private func getImageFromAsset(asset: PHAsset, size: CGSize) async -> UIImage? {
    return await withCheckedContinuation { continuation in
        let manager = PHCachingImageManager()
        manager.allowsCachingHighQualityImages = true

        let options = PHImageRequestOptions()
        options.deliveryMode = .highQualityFormat
        options.isSynchronous = false
        manager.requestImage(for: asset, targetSize: size, contentMode: .aspectFill, options: options) { image, _ in
            continuation.resume(returning: image)
        }
    }
}

[Kotlin] How to create CustomView reusable

ShoheOhtani — Tue, 28 Jun 2022 10:13:31 +0000

1. RightClick > UiComponent > Custom View
There will be 3 new files created CustomView.kt, view_custom.xml, attrs_custom_view.xml(You can delete if you want).

2. Edit view_custom.xml
Delete views no need and convert Layout to LinearLayout (vertical or horizontal)

3. Edit CustomView.kt

class CustomView: LinearLayout {
    constructor(context: Context?) : super(context)
    constructor(context: Context?, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context?, attrs: AttributeSet?, defStyle: Int) : super(context, attrs, defStyle)

    init {
        LayoutInflater.from(context).inflate(R.layout.view_custom, this)
    }
}

If you want to get object on layout.

private val someTextView: TextView by lazy { findViewById(R.id.some_text_view) }