0

This may be a simple question but I am struggling to find an answer that explains itself on the internet. What is the swift equivalent of setting an element's "position: fixed" from CSS? I am trying to pin a UIView to the top of the screen so that even when I scroll I can still see the view at the top of the screen. Any suggestions or links to tutorials are appreciated, thanks!

edit: I probably should have mentioned that my view is originally a subview of my viewController with my tableview also being a subview of my viewController that is placed underneath it. I am using the IQKeyboardManagerSwift cocoa pod which is shifting the entire view up including my header.

mark32
  • 103
  • 1
  • 1
  • 8
  • So you want a tableView to appear below another view? – Rob C May 02 '20 at 20:14
  • I want a view that is a subview of the main view that stays at the top of the screen no matter what. Similar to a header – mark32 May 02 '20 at 20:31
  • You're going to have two views then. Your "header" and then your scrollView (or tableView or collectionView) below the header. You need to learn how to use autolayout. What you need to do is constrain the top of your scrollView to the bottom of your header and constrain the header to the top layout guide. You should be able to find plenty of tutorials for that. – Rob C May 02 '20 at 20:38

4 Answers4

1

A hassle-free way to do this would be to use a UITableView with a header. Table View Headers are sticky by default. Here is a link to the documentation.

Animesh K
  • 78
  • 6
  • Do you know if the header will be pushed off screen or remain at the top of the visible part of the tableview if I am using the IQKeyboardManagerSwift cocoa pod ? – mark32 May 02 '20 at 21:00
  • While I have never used this pod, it ideally should not break the standard table view layout. A lot of apps have their search bars built inside a table header (example: iPhone Contacts app). – Animesh K May 02 '20 at 21:06
  • Thank you Ill have to check it out, would you recommend using footers too, for text view similar to a messaging app? – mark32 May 02 '20 at 21:14
0

To pin a view to a position you can use Layout Anchors. Try:

yourView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true

If you want to learn more about it:

Adrian
  • 352
  • 1
  • 11
  • Using this method would I still have to make a frame? i.e. exampleView.frame = CGRect(x: ???, y: ???, width: view.frame.width, height: 100) – mark32 May 02 '20 at 20:35
  • No, there is no need to define the frame if you set the other anchors properly. Refer to @Fabio's answer. It should do the trick. Let me know, if you have any further questions. – Adrian May 03 '20 at 08:14
0

It sounds like you want a floating header. You can't add a view over a collectionView or tableView, so you won't be able to pin one without presenting a separate popover with passthrough views. This popover would have to be dismissed to show alerts or present other view controllers, so it's not a feasible solution in my opinion.

Perhaps this post will help you (I suspect you will want to style the header): How to make Supplementary View float in UICollectionView as Section Headers do in UITableView plain style

elliott-io
  • 1,394
  • 6
  • 9
0

No frame needed in auto layout, you can do this in viewDidLoad: first disable default constraint on yourView:

yourView.translatesAutoresizingMaskIntoConstraints = false

after present yourView in controller view:

view.addSubview(yourView)

now set position with auto layout on top safe area of your controller view, the width is the view width and the height is 100 like your frame example in the comment:

yourView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
yourView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
yourView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
yourView.heightAnchor.constraint(equalToConstant: 100).isActive = true

This is the auto layout method to put yourView on top... Adapt it to your project, replace the "yourView" with the name of the view that you want to put on top. For more precise information, enter the code in the application next time... Have a nice day :)

Fabio
  • 5,432
  • 4
  • 22
  • 24
  • unfortunately this didn't work either, Im guessing its because I used the IQKeyboardManagerSwift cocoa pod. – mark32 May 04 '20 at 01:04