0

I'm trying to load image async using AsyncImage - but the results is that the image is very big and covers all the screen.

        TabView { 
         CreateView()
            .tabItem {
                Image(systemName: "plus.circle")
            }
        
         AccountView()
            .tabItem {
                let imageUrl = LoginManager.shared.profile!.profileImageUrl
                
                ZStack {
                    AsyncImage(url: URL(string: imageUrl)) { phase in
                        switch phase {
                        case .empty:
                            ProgressView()
                        case .success(let image):
                            image.resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(maxWidth: 56, maxHeight: 56)
                        case .failure:
                            Image(systemName: "person.circle")
                        @unknown default:
                            // Since the AsyncImagePhase enum isn't frozen,
                            // we need to add this currently unused fallback
                            // to handle any new cases that might be added
                            // in the future:
                            EmptyView()
                        }
                    }
                    .frame(width: 50, height: 50)
                }
                .frame(maxWidth: 56, maxHeight: 56)
            }
    }

Tried to put .frame bounds in every single place but the image is extremely big!

What am I doing wrong?

Thanks for assisting!

Udi Oshi
  • 6,787
  • 7
  • 47
  • 65
  • Correct me if I am wrong, but doesn't a `.tabItem` take a label? I know you can initialize it without the `Label` init, but underneath, I think it is just a label. That may be the root of your issue. – Yrb Oct 19 '21 at 13:46
  • @Yrb it takes a label and according to docs you can put any View, and it works well with the other tabs that are showing system image, only the one with AsyncImage causes issues. – Udi Oshi Oct 19 '21 at 13:54
  • That was kind of my point. You need to be focused on how to put a downloaded image into a label. You may need to create a different view that you then put into the `Label`. SF Symbols (system images) are made to go into the labels. I have put in custom SF Symbols into tabs, but never an image. – Yrb Oct 19 '21 at 14:13

1 Answers1

0

I solved this issue by using ZStack. Although it's tricky, but working completely.

GeometryReader { geometry in
    ZStack(alignment: .bottomLeading) {
        TabView(selection: $myViewModel.tabSelection) {
            View0().tabItem {
                Image("image1")
                Text("image1")
            }.tag(0)
            View1().tabItem {
                Image("image2")
                Text("image2")
            }.tag(1)
            View2().tabItem {
                Text("AsyncImage image3 ")
            }.tag(2)
        }

        ZStack {
            Button(action: {
                myViewModel.tabSelection = 2
            }) {
                AsyncImage(url: URL(string: "https://sample.com/a.png")){ image in
                    image.resizable()
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　.scaledToFit()
                                .clipShape(Circle())
                                .shadow(radius: 10)
                                .opacity(myViewModel.tabSelection == 2 ? 0.8 : 0.4)
                } placeholder: {
                    ProgressView()
                }
            }
            .frame(width: 30)
        }
        .offset(x: (geometry.size.width / 3 * 2 + geometry.size.width / 6 - 15), y: -15)
    }
}
kimihom
  • 45
  • 6