How to add a fixed bar on the mapView on iOS

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

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)

1 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

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.