Можно ли уменьшить размер витрины в SwiftUI?

Я хочу представить витрину первый раз после входа в систему. Итак, я только что нашел только одну структуру витрины в iOS под названием material-showcase-ios , но с ее помощью я могу получить очень большое представление, потому что одна витрина представлена ​​поверх другой... поэтому мне нужно уменьшить размер витрины , пожалуйста, помогите мне.

мне нужно использовать несколько витрин, поэтому вот код: добавлен этот пакет: github "aromajoin/material-showcase-ios" ~> 0.8.0 и код ниже

import SwiftUI
import MaterialShowcase

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

func makeUIView(context: Context) -> UIView {
    let view = UIView(frame: .zero)
    DispatchQueue.main.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.windows.first else { return }

    // Adjust target view position based on alignment
    targetView.translatesAutoresizingMaskIntoConstraints = false
    window.addSubview(targetView)
    
    // Adjust the size of the target view for better animations
    let targetSize: CGFloat = 50
    
    switch 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 .center:
        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(image: UIImage(systemName: "camera.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 show 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.main.asyncAfter(deadline: .now() + 0.1) {
        showcase.show(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, center
}

и использовать ShowcaseHost на главном экране вот так

struct HomeNew: View {

@State private var showShowcase = false
@State private var showShowcaseDashboard = false


var profileShowcase: ShowcaseItem {
    ShowcaseItem(
        primaryText: "Profile",
        secondaryText: "Click here to check out your profile and Transport Details",
        animation: .topLeading,
        backgroundColor: UIColor(red: 0.984, green: 0.906, blue: 0.631, alpha: 1.0), //.systemPink,
        textColor: .white
    )
}

var dashboardShowcase: ShowcaseItem {
    ShowcaseItem(
        primaryText: "Dashboard",
        secondaryText: "Click here to access Dashboards",
        animation: .center,
        backgroundColor: UIColor(red: 0.47, green: 0.75, blue: 0.78, alpha: 1.0),
        textColor: .white
    )
}

var body: some View {
    ZStack{
        Color.Neumorphic.main
            .ignoresSafeArea()
        
        VStack{
            
            VStack{
                HStack(alignment: .center) {
                    URLImageView(url: userPhoto.percentageEncoding(), placeholder: "NoProfilePic", width: 80, height: 80)
                        .cornerRadius(15)
                        .scaledToFit()
                        .overlay(
                            RoundedRectangle(cornerRadius: 15)
                                .stroke(Color.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()
                                Text("View dashboard")
                                    .font(.calibriRegular(with: 16))
                                    .foregroundColor(.appGreen)
                                
                            }
                        }
                    }
                }
                .frame(height: 40)
                
                .onTapGesture {
                    if showShowcaseDashboard {
                        showShowcaseDashboard = false
                    } else {
                        gotoDashboard = true
                    }
                }
            }
        }
        
        if showShowcase {
            ShowcaseHost(isPresented: $showShowcase, showcaseItem: profileShowcase)
                .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                        showShowcase = false
                    }
                }
        }
        
        if showShowcaseDashboard {
            ShowcaseHost(isPresented: $showShowcaseDashboard, showcaseItem: dashboardShowcase)
                .onAppear {
                    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                        showShowcaseDashboard = false
                    }
                }
        }
    }
}
}

о/п: вот как уменьшить размер, помогите пожалуйста.


51
1

Ответ:

Решено

Я сам не использовал эту структуру, но знаю, что размер в основном контролируется значением angularRadius. Согласно их документации, вы можете контролировать размер фона, определив свой собственный стиль, что, похоже, вы уже делаете. Поэтому просто добавьте строку и укажите значение showcase.backgroundRadius:

// Configure and show 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
    showcase.backgroundRadius = 200 // <-- Here, adjust this value as needed (default is 300)