How to add a fixed bar on the mapView on iOS - ios

Question

Recently, I have made a simple project which needs to use GoogleMap Api.
I think that my Question is so simple and easy,
but i don't know how to complete it.
Well this is my problem
i want to add a just simple bar on the View.(up 1, bottom 1)
these 2 bars are fixed. and also there is a button(like moving back button) on the bars that i can presse
Except 2 bar position, if i drag/swipe on mapView than change and show the location information.
please check the following image.(This is what i want to make.)
How can i put the bars on the view and let the bars can be seen in the simulator? plz let me know
(i dont upload code cuz it's not the problem about the code, just want to know about the concept of how to insert view(or layer?) like that)

Answer 1

First, let say you have a map view:
let camera = GMSCameraPosition.camera(withLatitude: 11.5449, longitude: 104.8922, zoom: 12)
let map = GMSMapView.map(withFrame: .zero, camera: camera)
map.isMyLocationEnabled = true
self.view = map
Then, you can just add your top and bottom views to the view as normal
let topBar = UIView()
view.addSubview(topBar)
let bottomBar = UIView()
view.addSubview(bottomBar)
And if you want to add other views such as texts and buttons, you can add them as subviews to the topBar or bottomBar view
let button = UIButton()
topBar.addSubview(button)
Noted: to put the views in the exact locations as in the image, you need to specify their locations.
For example:
bottomBar.frame = CGRect(x: 0, y: view.bounds.height - 200, width: view.bounds.width, height: 200)
In storyboard:
I didn't use google maps so here I'm using the default MKMapView as an example.
First, let's say we have a map view covering the entire view controller:
Then for the top bar, let's add a view and give it some constraints:
Now for the back button and the title:
Now, for the bottom bar: first we need a view to hold all the things:
For the texts, we use 4 uilabels, embed them into a stack to make them lined-up. Give some spacing as well to make them look good:
Finally, for the image on the right, we can use uiimageview or uibutton:
Don't forget to add constraints to the stackview and the uiimageview/uibutton