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:
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.