I have a UICollectionView that is the entire view but it lives inside "view" (it is not UICollectionViewController). Adding a cell to this collection view shows it in the following order in storyboard:
This is how it looks in the emulator:
I don't understand how to get rid of that view. All the insets are at zero in Storyboard Size Inspector for collection view. Just to be sure, I also have the following code:
override func viewWillLayoutSubviews() {
let layout = self.collectionViewProducts.collectionViewLayout as! UICollectionViewFlowLayout
let containerWidth = UIScreen.main.bounds.size.width - 40.0
let itemWidth = (containerWidth / 3.0)
let itemHeight = (itemWidth / 0.75) + 30
layout.sectionInset = UIEdgeInsets(top: 0.0, left: 0.0, bottom: 0.0, right: 0.0)
layout.itemSize = CGSize(width: itemWidth, height: itemHeight)
}
How can I get rid of that top padding?
You can fix top padding issue by considering one of the following method.
Method 1: Natural way to fix your problem by setting up your collectionView dimensions properly from StoryBoard.
Method 2: **Updated**
You can validate collection frame in viewDidLayoutSubviews or viewWillLayoutSubviews
override func viewDidLayoutSubviews() {
collectionView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
}
Method 3: You can Adjust Scroll View Insets from your StoryBoard Attributes Inspector.
Method 4: You can fix this issue programatically by adjusting CollectionView contentInset.
collectionView.contentInset = UIEdgeInsets(top: **Any Value**, left: 0, bottom: 0, right: 0)
Output with top padding 5:
Output with top padding 44:
Output with top padding 64:
I think because this viewController is embedded in a navigationController. Let select this viewController in the storyboard and uncheck Adjust Scroll View Insets:
There is one more way to resolve this issue and that is selecting collectionView -> scrollView Content Insets -> "Automatic" to "Never".
By default scrollView Content Insets value is Automatic. Please check the below image.
For more details check: UIScrollView.ContentInsetAdjustmentBehavior
https://developer.apple.com/documentation/uikit/uiscrollview/2902261-contentinsetadjustmentbehavior
Make your Navigation Controller > NavigationBar translucent by unchecking the Translucent check box in IB > Attribute Inspector, and it will work.
I also had the same problem, and i fixed it with a way totally ridiculous solution.
My collectionView contained several sections which had no title & no item cells.
The top, bottom inset values of the section insets were 10 respectively.
so each empty section charged height of 20 pixels.
I had 4 empty sections, and therefore, 80 top margins in the collection view.
Hope you check this as well if none of the above solutions works.
Related
I have a bottom border that I generated after following the answer here.
This works absolutely great except the border isn't the right width. It's set with constraints to match the width of the button below it but as you can see is coming up short.
What am I missing?
Code :
extension UITextField
{
func setBottomBorder(withColor color: UIColor)
{
self.borderStyle = UITextBorderStyle.none
self.backgroundColor = UIColor.clear
let width: CGFloat = 3.0
let borderLine = UIView(frame: CGRect(x: 0, y: self.frame.height - width, width: self.frame.width, height: width))
borderLine.backgroundColor = color
self.addSubview(borderLine)
}
}
then in the VC :
override func viewDidLoad() {
authorNameOutlet.setBottomBorder(withColor: UIColor.lightGray)
}
Then Xcode shows...
but the simulator shows...
I've tried this both setting the width of the text field to be 0.7 x the superview width (same as the button below it) and also setting the width of the text field to be equal width of the button but neither works.
This is because of AutoLayout.
You can add autoresizingMask to your line.
borderLine.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
You are working with with a static frame for the border line view. After viewDidLoad your view controller's view gets resized.
Option 1: (Fast and dirty)
Move your code from viewDidLoad() to viewWillAppear(_ animated: Bool). viewWillAppear gets called after the first layout of your view controller's view
Option 2:
Add constraint for your border line view. So that your border line view will resize automatically.
Importent hint:
Do not forget super calls in overrides or you will get strange bugs!
E.g:
override func viewDidLoad() {
super.viewDidLoad()
// your code
}
I'm trying to add a custom UIView after adding a UICollectionView because I wanna show the custom bar view above the collection view. This is my code:
func loadFilters() {
let categoriesFlowLayout = UICollectionViewFlowLayout()
categoriesFlowLayout.scrollDirection = .vertical
categoriesCollection = UICollectionView(frame: CGRect(x: 10, y: getY(yAxis: searchField) + 10, width: view.frame.size.width - 20, height: (view.frame.size.height * 9 / 10) - getY(yAxis: searchField) - 10), collectionViewLayout: categoriesFlowLayout)
categoriesCollection.register(categoriesCell.self, forCellWithReuseIdentifier: "categoriesCell")
categoriesCollection.delegate = self
categoriesCollection.dataSource = self
categoriesCollection.backgroundColor = UIColor.clear
categoriesCollection.showsVerticalScrollIndicator = false
categoriesCollection.showsHorizontalScrollIndicator = false
view.addSubview(categoriesCollection)
addBar()
categoriesCollection.isUserInteractionEnabled = true
}
The addBar() function is declared in the custom superclass ViewController
if addBar() is called before view.addSubview(categoriesCollection) it looks like the image below but if it is called after then my collection view does not scroll or recognize touches. Is there anyway that will make the collection view scroll and bring the custom bar to front?
I've used sendSubviewToBack() and bringSubviewToFront() functions as well but the result is the same
When you insert a view above another view, the top view gets all touch events. So the UICollectionView does not receive any touch events anymore since another view is above it.
As I see from your post, you just want the bar at the bottom of the screen. So check the size of your custom UIView. It probably fills the entire screen and is completely above the UICollectionView. Just give the UIView some sort of background color and see, how much space it fills.
If this doesn't work, you can use a UIGestureRecognizer on the custom UIView and forward the touch events to the UICollectionView.
I'm having trouble with the contentInset property. I have a UITableView, with dynamic cell sizes (AutoLayout). I'm setting the contentInset property to leave some space above the top of the content. But I'm getting the following result:
The content is in blue, the content inset in purple. When the table view first appears, it is in the left situation. I can scroll to get to the right situation, that is working, but I would like the table view to appears directly as in the right illustration — which I thought would be the default behavior.
How can I achieve that?
Not sure if it's the best way but I fixed it by adding:
tableView.contentOffset.y = -70
after the line:
tableView.contentInset = UIEdgeInsets(top: 70, left: 0, bottom: 50, right: 0)
you can scroll programmatically when the view loads.
tableView.setContentOffset(CGPoint(x: 0, y: -70), animated: false)
This is how it can be fixed easily from the Storyboard:
Table View > Size Inspector > Content Insets: Never
You provide an UIEdgeInset object,
UIEdgeInsets(top: 50, left: 0, bottom: 0, right: 0)
The top property shows the distance from top of content to top border of the area.
I have a NSCollectionView using sections and flow layout. Initial layout is fine but resizing the window causes the vertical position of the collection view items to move (relative to the top window boundary). The section breaks stay stationary relative to the top window boundary (good). But the items moving up causes them to overlap with the sections and eventually move up out of the window area as I decrease the height of the window.
I think this is related to how the mac uses the bottom as the origin of the coordinates. Resizing the window causes the bottom window boundary to move.
For reference here's where I configure my collection view, including standard flow layout.
fileprivate func configureCollectionView() {
let nib = NSNib(nibNamed: "MonitorViewItem", bundle: nil)
mapCollectionView.register(nib, forItemWithIdentifier: NSUserInterfaceItemIdentifier("MonitorViewItem"))
let flowLayout = NSCollectionViewFlowLayout()
flowLayout.itemSize = NSSize(width: 100.0, height: 40.0)
flowLayout.sectionInset = NSEdgeInsets(top: 25.0, left: 10.0, bottom: 10.0, right: 10.0)
flowLayout.minimumInteritemSpacing = 10.0
flowLayout.minimumLineSpacing = 10.0
mapCollectionView.collectionViewLayout = flowLayout
}
I tried invalidating the layout in my window resizing delegate function. My print statement confirms its being called as the window resizes, but invalidating the layout is not solving the issue.
extension MapWindowController: NSWindowDelegate {
func windowDidResize(_ notification: Notification) {
print("got resize")
mapCollectionView.collectionViewLayout!.invalidateLayout()
}
}
So far I have not attempted to subclass my view and override isFlipped.
Here's my window hierarchy in my .xib:
Window
View
Bordered Scroll View - Collection View
Clip View
Map Collection view
Collection View Flow layout
scroller
scroller
Any suggestions to fix the collection view item vertical positions as the nswindow is resized?
Goal: To have a table view scroll so that it shows semitransparent under the status bar while not displaying a navigation bar.
Right now, I have my tableView set to the top anchor (so technically underneath the status bar). This sets the status bar to a solid looking color as you scroll up on the table view. I've set the navigationAppearance's barTintColor and translucent to YES with no luck.
Any ideas? The view is instantiated in a storyboard
Your question is hard to guess without any code.I believe you trying to achieve a translucent status bar when tableview content scroll like you mentioned in Apple Music app.
Try below code inside your viewdidLoad method.
Step 1: To hide navigation bar. If your controller embedded with navigationController.
navigationController?.navigationBar.isHidden = true
Step 2: Place a statusBar size UIView to your controller to act as a translucent status Bar with adjusting alpha value.
let statusBarView = UIView(frame: CGRect(x:0, y:0, width:view.frame.size.width, height: UIApplication.shared.statusBarFrame.height))
statusBarView.backgroundColor=UIColor.white
statusBarView.alpha = 0.8 // set any value between 0 to 1
view.addSubview(statusBarView)
Above code will produce the following output.Let me know the code works for you.
For more information how to set tableView frame and contentView take a look at my answer in the following link.
Update:
Improved Answer:
You can use UIBlurEffectView to achieve better translucent effect.
let statusBarView = UIView(frame: CGRect(x:0, y:0, width:view.frame.size.width, height: UIApplication.shared.statusBarFrame.height))
let blurEffect = UIBlurEffect(style: .extraLight) // Set any style you want(.light or .dark) to achieve different effect.
let blurEffectView = UIVisualEffectView(effect: blurEffect)
blurEffectView.frame = statusBarView.bounds
blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
statusBarView.addSubview(blurEffectView)
view.addSubview(statusBarView)
Output:
As you described, your UITableView is right underneath the status bar. When you scroll down, the tableView's frame remains the same size and origin and won't go underneath the status bar. What you want to do is to set the constraint for your tableView to the top of the superview (not the Top Layout Guide) which means it would sit right under the status bar.
Because the status bar now hides the top 20px of your tableView you want to make a content offset:
tableView.contentInset = UIEdgeInsetsMake(top: 20, left: 0, bottom: 0, right: 0)
To make the scroll indicator start right under the status bar you also want to set an offset for it:
tableView.scrollIndicatorInsets = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)