18.4 C
New York
Monday, March 10, 2025

ios – Learn how to cut back the scale of Materials Showcase in SwiftUI?


I wish to current showcase first time after login. so i simply discovered just one showcase framework in iOS known as material-showcase-ios however with this i can getting very large view due to that one showcase presents on high of one other… so i would like to scale back the scale of showcase, please assist me.

i would like to make use of a number of showcases so right here is the code: added this package deal: github “aromajoin/material-showcase-ios” ~> 0.8.0 and under code

import SwiftUI
import MaterialShowcase

struct ShowcaseHost: UIViewRepresentable {
@Binding var isPresented: Bool
var showcaseItem: ShowcaseItem

func makeUIView(context: Context) -> UIView {
    let view = UIView(body: .zero)
    DispatchQueue.predominant.async {
        if isPresented {
            showShowcase(on: view, showcaseItem: showcaseItem)
        }
    }
    return view
}

func updateUIView(_ uiView: UIView, context: Context) {}

func showShowcase(on targetView: UIView, showcaseItem: ShowcaseItem) {
    guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
          let window = windowScene.home windows.first else { return }

    // Alter goal view place primarily based on alignment
    targetView.translatesAutoresizingMaskIntoConstraints = false
    window.addSubview(targetView)
    
    // Alter the scale of the goal view for higher animations
    let targetSize: CGFloat = 50
    
    swap showcaseItem.animation {
    case .topLeading:
        NSLayoutConstraint.activate([
            targetView.topAnchor.constraint(equalTo: window.topAnchor, constant: 50),
            targetView.leadingAnchor.constraint(equalTo: window.leadingAnchor, constant: 50),
            targetView.widthAnchor.constraint(equalToConstant: targetSize),
            targetView.heightAnchor.constraint(equalToConstant: targetSize)
        ])
   
    case .middle:
        NSLayoutConstraint.activate([
            targetView.centerXAnchor.constraint(equalTo: window.centerXAnchor),
            targetView.centerYAnchor.constraint(equalTo: window.centerYAnchor),
            targetView.widthAnchor.constraint(equalToConstant: targetSize),
            targetView.heightAnchor.constraint(equalToConstant: targetSize)
        ])
    }

    let imageView = UIImageView(picture: UIImage(systemName: "digicam.fill"))
    imageView.contentMode = .scaleAspectFit
    imageView.translatesAutoresizingMaskIntoConstraints = false
    targetView.addSubview(imageView)

    NSLayoutConstraint.activate([
        imageView.centerXAnchor.constraint(equalTo: targetView.centerXAnchor),
        imageView.centerYAnchor.constraint(equalTo: targetView.centerYAnchor),
        imageView.widthAnchor.constraint(equalTo: targetView.widthAnchor, multiplier: 0.8),
        imageView.heightAnchor.constraint(equalTo: targetView.heightAnchor, multiplier: 0.8)
    ])
    
    // Configure and present the showcase
    let showcase = MaterialShowcase()
    showcase.setTargetView(view: targetView)
    showcase.primaryText = showcaseItem.primaryText
    showcase.secondaryText = showcaseItem.secondaryText
    showcase.backgroundPromptColor = showcaseItem.backgroundColor
    showcase.primaryTextColor = showcaseItem.textColor
    showcase.secondaryTextColor = showcaseItem.textColor
    showcase.targetHolderColor = UIColor.white

    DispatchQueue.predominant.asyncAfter(deadline: .now() + 0.1) {
        showcase.present(completion: {
            isPresented = false
            targetView.removeFromSuperview()
        })
    }
}
}

struct ShowcaseItem {
let primaryText: String
let secondaryText: String
let animation: AnimationTypeShowcase
let backgroundColor: UIColor
let textColor: UIColor
}

enum AnimationTypeShowcase {
case topLeading, bottomTrailing, bottomLeading, topTrailing, middle
}

and utilizing that in display screen like this

struct HomeNew: View {

@State personal var showShowcase = false
@State personal var showShowcaseDashboard = false


var profileShowcase: ShowcaseItem {
    ShowcaseItem(
        primaryText: "Profile",
        secondaryText: "Click on right here to take a look at your profile and Transport Particulars",
        animation: .topLeading,
        backgroundColor: UIColor(pink: 0.984, inexperienced: 0.906, blue: 0.631, alpha: 1.0), //.systemPink,
        textColor: .white
    )
}

var dashboardShowcase: ShowcaseItem {
    ShowcaseItem(
        primaryText: "Dashboard",
        secondaryText: "Click on right here to entry Dashboards",
        animation: .middle,
        backgroundColor: UIColor(pink: 0.47, inexperienced: 0.75, blue: 0.78, alpha: 1.0),
        textColor: .white
    )
}

var physique: some View {
    ZStack{
        Coloration.Neumorphic.predominant
            .ignoresSafeArea()
        
        VStack{
            
            VStack{
                HStack(alignment: .middle) {
                    URLImageView(url: userPhoto.percentageEncoding(), placeholder: "NoProfilePic", width: 80, peak: 80)
                        .cornerRadius(15)
                        .scaledToFit()
                        .overlay(
                            RoundedRectangle(cornerRadius: 15)
                                .stroke(Coloration.appGreen, lineWidth: 2)
                        )
                    
                        .onTapGesture {
                            if showShowcase {
                                showShowcase = false
                            } else {
                                gotoProfile = true
                            }
                        }
                }
                Spacer()
                
            }
            .padding(16)
        }
        
        ScrollView {
            VStack(spacing: 0) {
                VStack(spacing: 0) {
                    HStack(spacing: 10) {
                        ZStack {
                            
                            HStack {
                                Spacer()
                                Textual content("View dashboard")
                                    .font(.calibriRegular(with: 16))
                                    .foregroundColor(.appGreen)
                                
                            }
                        }
                    }
                }
                .body(peak: 40)
                
                .onTapGesture {
                    if showShowcaseDashboard {
                        showShowcaseDashboard = false
                    } else {
                        gotoDashboard = true
                    }
                }
            }
        }
        
        if showShowcase {
            ShowcaseHost(isPresented: $showShowcase, showcaseItem: profileShowcase)
                .onAppear {
                    DispatchQueue.predominant.asyncAfter(deadline: .now() + 1) {
                        showShowcase = false
                    }
                }
        }
        
        if showShowcaseDashboard {
            ShowcaseHost(isPresented: $showShowcaseDashboard, showcaseItem: dashboardShowcase)
                .onAppear {
                    DispatchQueue.predominant.asyncAfter(deadline: .now() + 1) {
                        showShowcaseDashboard = false
                    }
                }
        }
    }
}
}

o/p: right here how one can cut back the scale, please assist.

enter image description here

enter image description here

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles