How can I set a variable header of a TableView (not of a section) programmatically? - ios

How can I set a variable header of a TableView (not of a section) programmatically, without having to worry about the placement?
let headerView = UILabel()
headerView.text = x
headerView.textColor = UIColor.blueColor()
headerView.frame = CGRect(x: 0, y: 0, width: headerView.frame.width, height: 44)
tableView.tableHeaderView = headerView
I got this code, but I don't think I can place the header exactly like it is a 'real' header. Anybody knows how to do this?

As Dmitriy said, this is a normal way to do it:
tableView.tableHeaderView = headerView
Position is however defined by the frame you set in it, so if position is what you want different, you have to play with this line of your code:
headerView.frame = CGRect(x: 0, y: 0, width: headerView.frame.width, height: 44)
E.g., if you want the label to be centered, you can for example do it this way:
headerView.frame = CGRect(x: 0, y: 0, width: tableView.frame.width, height: 44)
headerView.textAlignment = .centered
This would span the label across the width of the tableView and the text alignment would place it to center. Of course, for this to work, the tableView frame has to be already calculated at this point (so maybe you would had to put the line with frame calculation in the layoutSubviews method).

I think this tableView.tableHeaderView = headerView - it's normal way to make header in UITableView.

Related

UITableView header align with cell bounds

I am generating a custom header view for my UITableView which has two horizontal lines up & down and a UILabel in between.
let lineWidth = tableView.bounds.width //This is not correct, will never align with UITableViewCell
let offset = (tableView.bounds.width - lineWidth)/2 //This will always yield 0, but my question is to compute line width that aligns with UITableViewCell as shown in the image attached to this question.
let topLine = UIView(frame: CGRect(x: offset, y: 0, width: lineWidth, height: 1))
topLine.backgroundColor = UIColor.white
let bottomLine = UIView(frame: CGRect(x: offset, y: 49.0, width: lineWidth, height: 1))
bottomLine.backgroundColor = UIColor.white
let label = UILabel(frame: CGRect(x: 0, y: 1.0, width: tableView.bounds.width, height: 48.0))
label.textColor = UIColor.white
let headerView = UIView(frame: CGRect(x: 0, y: 0, width: tableView.bounds.width, height: 50))
headerView.addSubview(topLine)
headerView.addSubview(label)
headerView.addSubview(bottomLine)
Problem: I need the top & bottom lines to align with UITableViewCell bounds in the section as shown in the picture below. What I get with the code above is horizontal lines that cover the entire width of UITableView. How do I achieve it?
EDIT: Some answers here describe an arbitrary offset value, but the heart of the problem is how to compute offset that aligns with UITableViewCell bounds in the section? In other words, I need exact width of UITableViewCell's that go into the section.
Your Offset will be practically zero as you are subtracting the same things
let lineWidth = tableView.bounds.width
let offset = (tableView.bounds.width - lineWidth)/2
let topLine = UIView(frame: CGRect(x: offset, y: 0, width: lineWidth, height: 1)) // this line gonna give offset as zero and width of full tableview width
Change this to the below code and try
let lineWidth = tableView.bounds.width - 20
let topLine = UIView(frame: CGRect(x: 10, y: 0, width: lineWidth, height: 1))
It seems the issue with the position of your top & bottom lines. As per the calculation of offset it always set to 0 for top & bottom lines. So it would be better to remove that offset calculation and you can add some desired static value as a x for CGRect of top & bottom lines.
As far as we are going to move the position of x for the top & bottom line don't forget to remove the added value for x position from the width of the top & bottom lines.
let yourLine = UIView(frame: CGRect(x: some_value, y: 0, width: Int(lineWidth - (some_value * 2)), height: 1))
The best practice is you can use some variables to achieve this.

Unable to properly configure UIScrollView (Offset on top)

I have been fighting with this all morning and can't seem to find a solution. I have created a UIImageView, filled it with red, then added it to a UIScrollView and set the contentSize to the size of the UIImageView. If I print the contentOffset i see (0, 0) and if I print the contentSize and the UIImageView.frame.size they are the same but the red "image" always appears smaller than what the scrollView thinks the contentSize is.
If I scroll all the way to the top I see a cyan stripe about 100 pixels high above the red image and the scroll bar will not make it all the way to the top of what I believe the top of my scroll view to be. Although the top of the scroll bar does line up with the top of my red window so it would seem as though the scroll view is confused as to where it actually lives. Or more likely, I'm confused
Here is my what seems like very simple code...
imgHorizon = UIImage.init(named:"horizon")!
imgBezel = UIImage.init(named:"bezel_transparent")!
imgWings = UIImage.init(named:"wings_transparent")!
imgViewHorizon = UIImageView.init()
imgViewBezel = UIImageView.init()
imgViewWings = UIImageView.init()
svHorizon = UIScrollView.init()
super.init(coder: aDecoder)
imgViewHorizon = UIImageView(frame: CGRect(x: 0, y: 0, width: imgBezel.size.width, height: imgHorizon.size.height))
imgViewHorizon.backgroundColor = UIColor.red
imgViewBezel = UIImageView(frame: CGRect(x: 0, y: 0, width: imgBezel.size.width, height: imgBezel.size.height))
imgViewBezel.contentMode = UIViewContentMode.center
imgViewBezel.clipsToBounds = true
imgViewBezel.image = imgBezel
imgViewWings = UIImageView(frame: CGRect(x: 0, y: 0, width: imgBezel.size.width, height: imgBezel.size.height))
imgViewWings.contentMode = UIViewContentMode.center
imgViewWings.clipsToBounds = true
imgViewWings.image = imgWings
svHorizon = UIScrollView(frame: CGRect(x: 0, y: 0, width: imgBezel.size.width, height: imgBezel.size.width))
svHorizon.contentSize = CGSize(width: imgBezel.size.width, height: imgHorizon.size.height)
svHorizon.contentMode = UIViewContentMode.scaleToFill
svHorizon.bounces = false
svHorizon.backgroundColor = UIColor.cyan
svHorizon.contentOffset = CGPoint(x: 0, y: 0)
svHorizon.addSubview(imgViewHorizon)
addSubview(svHorizon)
addSubview(imgViewBezel)
addSubview(imgViewWings)
From the discussion in the comments it turns out that the Adjust Scroll View Insets option was checked in the attributes inspector of the ViewController. Unchecking it resolved the problem. Have a look at the image below. You need to uncheck the highlighted option.

Are iOS "views" and HTML divs similar?

I found that placing a view in my app and sizing it to my needs is pretty similar to divs in HTML. Should I be using them this way?
Here's an example of a place I want to use a view.
I want to fill that in, should I be using a view here? or something more semantical?
End result with a view:
If you want to set a rectangle somewhere you could definitely use an UIView(), If you´re using your storyboard make sure to set the right constraint and if you´re doing it programmatically you could do the following to get it work with all phone sizes:
Swift 3.0:
let screen = UIScreen.main.bounds
let anotherView = UIView(frame: CGRect(x: 0, y: 0, width: screen.width, height: 45))
anotherView.backgroundColor = UIColor.blue
view.addSubview(anotherView)
Swift 2.x:
let screen = UIScreen.mainScreen().bounds
let anotherView = UIView(frame: CGRect(x: 0, y: 0, width: screen.width, height: 45))
anotherView.backgroundColor = UIColor.blueColor()
view.addSubview(anotherView)

Stop affine transform from applying on subview

I have a UIView that holds a UILabel inside.
After applying affine transform on the UIView using:
myView.transform = CGAffineTransformMakeScale(4, 4);
My UILabel (which is a sub view to myView) grows as well.
Is there a way to prevent this?
i tried:
1) Using the CGAffineTransformIdentity flag on the label.
2) Adding a superview to myView and adding myView as superview's subview, and the label as a subview to the superview (and not myView).
Non of them seem to be working, the label keeps growing.
Any ideas?
You answered your own question with option 2. Not sure why it's not working since you did not supply any code. The playground code below shows it will work. Uncomment out the last line to transform the subview but not the label.
import UIKit
import XCPlayground
let superview = UIView(frame: CGRect(x: 10, y: 10, width: 200, height: 200))
XCPlaygroundPage.currentPage.liveView = superview
superview.backgroundColor = UIColor.redColor()
let view = UIView(frame: CGRect(x: 10, y: 10, width: 100, height: 100))
view.backgroundColor = UIColor.greenColor()
superview.addSubview(view)
let label = UILabel(frame: CGRect(x: 20, y: 10, width: 40, height: 40))
label.text = "Hello"
superview.addSubview(label)
//view.transform = CGAffineTransformMakeScale(2, 2)

Setting UICollectionView frame at runtime

I am trying to set the frame of my UICollectionView at runtime.
I tried using
mainCollectionView.frame = CGRect(x: 20, y: 20, width: self.view.frame.width-20, height: self.view.frame.width-20)
in my viewDidLoad but unfortunately it will always stay as in IB.
I am not yet using constraints.
Otherwise resizing my cells is working in cellForItem:
collectionCell.frame.size.width = self.view.frame.width/8 * 3
Try to set frame in viewDidLayoutSubviews
you are wrong write height because you are set width at height.
try this line without navigation bar:
mainCollectionView.frame = CGRect(x: 20, y: 20, width: UIScreen.mainScreen().bounds.size.width - (20 * 2), height: UIScreen.mainScreen().bounds.size.height - (20 * 2))
Run the following in one of the LayoutSubviews overrides. This will tell collection view to update its frame.
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
mainCollectionView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
mainCollectionView.collectionViewLayout.invalidateLayout()
}

Resources