How to create a radio buttons inside the floating panel with close button on top of the floating panel in swift?

Question

I need a design, which has a radio buttons inside the floating panel with close button.I need something like this as shown in image Can someone please help me

Answer 1

Even without many of the necessary information, for those who are interested, as far as I know, there is no out-of-the-box Apple solution - Without further information (UIKit or SwiftUI, etc...) I can imagine to have something like the following in SwiftUI:

//
//
//  RadioButton.swift
//  RadioButton
//
//  Created by Sebastian on 16.08.22.
//

import SwiftUI

var bounds = UIScreen.main.bounds

struct ContentView: View {
    
    @State var selectedItem: String = ""
    @State var showMenu = false
    
    var body: some View {
        ZStack() {
            BackgroundView(selectedItem: $selectedItem, showMenu: $showMenu)
                .blur(radius: showMenu ? 3 : 0)
            Color.black
                .opacity(showMenu ? 0.5 : 0)
            RadioButtonView(selectedItem: $selectedItem, showMenu: $showMenu)
                .offset(y: showMenu ? 480 : bounds.height)
        }
        .edgesIgnoringSafeArea(.all)
    }
}

struct BackgroundView: View {
    
    @Binding var selectedItem: String
    @Binding var showMenu: Bool
    
    var body: some View {
        HStack(){
            Spacer()
            VStack() {
                Spacer()
                Text("Selected Option: \(selectedItem == "" ? "nothing selected" : selectedItem)")
                    .foregroundColor(.white)
                    .padding()
                
                    Button(action: {
                        withAnimation(.linear(duration: 0.2)) {
                            self.showMenu.toggle()
                        }
                    }) {
                        Text("Show Menu")
                            .font(.system(size: 20, weight: .medium))
                            .foregroundColor(.white)
                    }
                
                
                Spacer()
            }
            Spacer()
        }.background(Color.blue)
    }
}


struct RadioButtonView: View {
    
    @Binding var selectedItem: String
    @Binding var showMenu: Bool
    
    var buttonItems: [String] = ["Score", "Run-Up", "Jump", "Back-Foot Contact", "Front-Foot Contact", "Release"]
    
    var body: some View {
        VStack() {
            HStack() {
                Spacer()
                Button(action: {
                    withAnimation(.linear(duration: 0.2)) {
                        self.showMenu.toggle()
                    }
                }) {
                    Text("Close Menu")
                        .font(.system(size: 20, weight: .medium))
                        .foregroundColor(.white)
                }
                .padding()
                
                Spacer()
            }
        VStack(alignment: .leading) {
            Text("Sort By")
                .font(.system(size: 20, weight: .medium))
            
            ForEach(buttonItems, id: \.self){ item in
                RadioButton(selectedItem: $selectedItem, item: item)
            }
            
            
            Spacer()
        }
        .padding()
        .background(Color.white)
        .cornerRadius(20)
        }
        
    }
}

struct RadioButton: View {
    
    @Binding var selectedItem: String
    var item: String
    
    func setSelectItem(item: String) {
        selectedItem = item
    }
    
    var body: some View {
        HStack() {
            Button(action: {
                self.setSelectItem(item: item)
            }) {
                Image(systemName: selectedItem == item ? "circle.inset.filled" : "circle")
                    .font(.system(size: 20, weight: .medium))
                    .frame(width: 20, height: 20)
                Text(item)
                    .font(.system(size: 18, weight: .regular))
            }
            Spacer()
        }
        .foregroundColor(.black)
    }
}

Please keep in mind, the background view as well as the array of strings that is used for the radio buttons are just examples. The background view, could be anything else and instead of strings you can create other types of objects.

And that is for you would get (it is a gif, so the animation doesn't look as smooth as it is in reality: