0

I am looking to create a view in SwiftUI with a UITableView (inside a UIViewControllerRepresentable) taking up most of the screen, and a sidebar on the right. I would like to have the UIViewControllerRepresentable which contains the UITableView fill all remaining space, except for the sidebar. I have tried using an HStack to accomplish this, but in my current approach, the sidebar appears on top of the UITableView, overlapping: Screenshot showing the sidebar overlapping the UITableView

I can tell the sidebar is overlapping the UIViewControllerRepresentable because the lines of the reorder controls are almost entirely covered by the sidebar on the right.

Relevant section of the UIViewControllerRepresentable:

class EventListController: UIViewController, UITableViewDataSource, UITableViewDelegate, UITableViewDragDelegate, UITableViewDropDelegate {

    ...

    var tableView = UITableView()

    override func viewDidLoad() {
        super.viewDidLoad()

        tableView.dataSource = self
        tableView.delegate = self
        tableView.dragDelegate = self
        tableView.dropDelegate = self

        tableView.frame = view.bounds
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")
        tableView.dragInteractionEnabled = true
        
        // Turn on editing mode
        tableView.setEditing(true, animated: true)

        view.addSubview(tableView)
    }
    
    ...
}

struct EventList: UIViewControllerRepresentable {    
    func makeUIViewController(context: Context) -> EventListController {
        let eventList = EventListController()
        eventList.tableView.bounds = eventList.view.bounds
        return eventList
    }

    func updateUIViewController(_ uiViewController: EventListController, context: Context) {
        uiViewController.tableView.reloadData()
    }
}

And the actual SwiftUI view:

struct ContentView: View {
    @Environment(\.managedObjectContext) private var viewContext

    @FetchRequest(
        sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)],
        animation: .default)
    private var items: FetchedResults<Item>
        
    var body: some View {
        VStack {
            HStack { // Top toolbar
                Spacer().frame(width: 3)
                ForEach(theme.colors, id: \.self) { color in
                    ColorSelectButton(backgroundColor: color, foregroundColor: Color.black, buttonSize: UIScreen.main.bounds.width * 0.077) {}
                }
                Spacer()
            }
            HStack {
                EventList(theme: Theme(colors: [Color.white, Color.red, Color.orange, Color.yellow, Color.green, Color.teal, Color.blue, Color.black]))
                Sidebar()
            }
        }
    }

    ...
}

struct Sidebar: View {
    ...
    
    var body: some View {
        ZStack {
            ScrollView {
                ForEach(dayButtonNames, id: \.self) { name in
                    DayButton(title: name, buttonSize: UIScreen.main.bounds.width * 0.077) {}
                }
                Spacer()
            }
            .frame(maxHeight: .infinity)
            .background(Color(red: 0.827, green: 0.827, blue: 0.827), ignoresSafeAreaEdges: Edge.Set.bottom)
        }
        .overlay(Rectangle().frame(width: 1, height: nil, alignment: .leading).foregroundColor(Color.gray).edgesIgnoringSafeArea(Edge.Set.bottom), alignment: .leading)
        .overlay(Rectangle().frame(width: nil, height: 1, alignment: .top).foregroundColor(Color.gray), alignment: .top)
    }
}


I am assuming this has something to do with how I set the frame bounds for the table view or the ViewController. Please let me know if you have any suggestions to fix this issue, or if there is any more information or code I should provide.

Timmy
  • 4,098
  • 2
  • 14
  • 34
cwt1078
  • 25
  • 4

0 Answers0