I have a stackView that I fill as such:
override func awakeFromNib() {
super.awakeFromNib()
for _ in 0 ..< 31 {
let tick = UIView()
self.dayTicks?.addArrangedSubview(tick)
let arrowImage = UIImage(named: "Up Arrow")
let arrowImageView = UIImageView(image: arrowImage)
arrowImageView.clipsToBounds = false
self.arrowTicks.addArrangedSubview(arrowImageView)
}
}
basically I am adding a normal view as well as an arrowImageView from a UIImage. I am doing addArrangedSubview in both cases. With the normal View, they all show up as rectangles (the default I suppose) which works fine. The arrow ticks stackView currently looks like:
As you can see the views are narrowing themselves as not to overlap. I want them to just overlap. How can I do this? ClipsToBounds does not seem to help in this case.
Well, the main idea of the stack view is that it handles subviews arrangement by itself so you don't have to deal with it by yourself. If you want your subviews to be overlapped why not just add them to a regular view?
Related
ModernBoldButton is a subclass of UIButton, here is a snippet of it:
private func commonInit() {
insertSubview(blurView, at: 0)
if let imageView = imageView {
bringSubviewToFront(imageView)
}
if let titleLabel = titleLabel {
bringSubviewToFront(titleLabel)
}
backgroundColor = .clear
clipsToBounds = true
}
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = bounds.width / 2
}
I have four UIButton's embedeed in stack view and as you can see on the screenshot, all of the buttons have incorrect shapes, they should look like a circle.
I suspect that I should set the cornerRadius somewhere else in my code, but where?
In order for them to look like a circle, your bounds must be a square. It appears that this is not the case for your buttons (the width is larger than the height).
You could add some constraints to your buttons in order to maintain a 1/1 ratio.
Other than that, you're setting it in the right place.
Rounding to with/2 will completely rounded top and bottom sides (eye shape 👁)
Rounding to height/2 will completely rounded left and right sides (like this ())
So if you want a circle, you need to make sure both width and height sizes are the same like a square.
In order to doo it automatically, you can use autolayout and the stackView will take care of the sizing:
self.translatesAutoresizingMaskIntoConstraints = false
self.heightAnchor.constraint(equalTo: self.widthAnchor).isActive = true
Make sure to do it just once to avoid duplications.
I have come across a conundrum of sorts in regards unexpected (at least for me) sizes of UIViews.
Consider this UIViewController class. interfaceBuilderView was declared in a Storyboard file and constrained to take up the whole area of the UIView. So, I would expect to have interfaceBuilderView be the same size as programicallyCreatedView when calling *.frame.width. But they aren't.
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var interfaceBuilderView: MyCustomView!
override func viewDidLoad() {
super.viewDidLoad()
let programmicallyCreatedView = MyCustomView(frame: self.view.frame)
//commented out this to get first picture
self.view.addSubview(programmicallyCreatedView)
self.interfaceBuilderView.setAppearance()
self.programmicallyCreatedView.setAppearance()
print(self.view.frame.width)//prints 375
print(self.interfaceBuilderView.frame.width)//prints 600
print(self.programmicallyCreatedView.frame.width)//prints 375
}
}
Now, consider this implementation of the MyCustomView class.
import UIKit
class MyCustomView: UIView {
func setAppearance() {
let testViewWidth: CGFloat = 200.0
let centerXCoor = (self.frame.width - testViewWidth) / 2.0
let testView = UIView(frame: CGRectMake(centerXCoor, 0, testViewWidth, 100))
testView.backgroundColor = UIColor.redColor()
self.addSubview(testView)
}
}
As you can see, I simply draw a red rectagle of width 200.0, and it is supposed to be centered. Here are the results.
Using the Interface Builder created view.
And using the programmatically created view.
As you can see, the programmatically created view achieves the desired results. No doubt because the size printed is the same as the superview (375).
Therefore, my question is simply why is this happening? Furthermore, how can I use a view declared in interface builder and programmatically add other views to it with dimensions and placement that I expect?
A few thoughts:
This code is accessing frame values in viewDidLoad, but the frame values are not yet reliable at that point. The view hasn't been laid out yet. If you're going to mess around with custom frame values, do this in viewDidAppear or viewDidLayoutSubviews.
Nowadays, we really don't generally use frame values anymore. Instead, we define constraints to define the layout programmatically. Unlike custom frame values, you can define constraints when you add the subviews in viewDidLoad.
You have the scene's main view, the MyCustomView and then yet another UIView which is red. That strikes me as unnecessarily confusing.
I would advise that you just add your programmatically created subview in viewDidLoad and specify its constraints. Using the new iOS 9 constraints syntax, you can just specify that it should be centered, adjacent to the top of the view, half the width, and one quarter the height:
override func viewDidLoad() {
super.viewDidLoad()
let redView = UIView()
redView.backgroundColor = UIColor.redColor()
redView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(redView)
NSLayoutConstraint.activateConstraints([
redView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor),
redView.topAnchor.constraintEqualToAnchor(view.topAnchor),
redView.widthAnchor.constraintEqualToAnchor(view.widthAnchor, multiplier: 0.5),
redView.heightAnchor.constraintEqualToAnchor(view.heightAnchor, multiplier: 0.25)
])
}
Clearly, adjust these constraints as suits you, but hopefully this illustrates the idea. Don't use frame anymore, but rather use constraints.
Fixed Background image in a TableView ?
Hey guys !
My first question as a Swift nOOb !
I'm trying to set up a fixed image as a background for my Table View. So far, the best option has been to include this in my ViewDidLoad :
let uluru = UIImage(named: "Uluru")
self.view.backgroundColor = UIColor(patternImage: uluru!)
Not so great, right?
Especially because when you're scrolling, the image is tiled. Meaning, it's repeating itself. Does anyone has a solution via the IB or directly into the code to make it fixed ? Something like in CSS ?
I also tried the superview way :
override func viewDidAppear(animated: Bool) {
let uluru = UIImage(named: "Uluru")
let uluruView = UIImageView(image: uluru)
self.view.superview!.insertSubview(uluruView, belowSubview:self.view)
}
But no success at all!
And last but not least :
override func viewDidLoad() {
super.viewDidLoad()
let backgroundImage = UIImageView(frame: UIScreen.mainScreen().bounds)
backgroundImage.image = UIImage(named: "Uluru")
self.view.insertSubview(backgroundImage, atIndex: 0)
}
Thank you all!
Do not use the backgroundColor property for this, and do not add any subviews. The table view is all ready for you to do what you want to do. Like this:
Create an image view (UIImageView) whose image is the desired image.
Make that image view the table view's background view (its backgroundView property).
How can I have an UIStackView with the same space as padding and gap between views?
How can I achieve this layout:
When this one doesn't suit me:
Neither does this:
I just need the around views space to be the same as the between views space.
Why is it so hard?
Important
I'm using my fork of TZStackView to support iOS 7. So no layoutMargins for me :(
I know this is an older question, but the way I solved it was to add two UIViews with zero size at the beginning and end of my stack, then use the .equalSpacing distribution.
Note: this only guarantees equal around spacing along the main axis of the stack view (i.e. the left and right edges in my example)
let stack = UIStackView()
stack.axis = .horizontal
stack.alignment = .center
stack.distribution = .equalSpacing
// add content normally
// ...
// add extra views for spacing
stack.insertArrangedSubview(UIView(), at: 0)
stack.addArrangedSubview(UIView())
You can almost achieve what you want using a UIStackView. When you set some constraints yourself on the UIViews inside the UIStackView you can come up with this:
This is missing the left and right padding that you are looking for. The problem is that UIStackView is adding its own constraints when you add views to it. In this case you can add top and bottom constraints to get the vertical padding, but when you try to add a trailing constraint for the right padding, UIStackView ignores or overrides that constraint. Interestingly adding a leading constraint for the left padding works.
But setting constraints on UIStackView's arranged subviews is not what you want to do anyway. The whole point of using a UIStackView is to just give it some views and let UIStackView handle the rest.
To achieve what you are trying to do is actually not too hard. Here is an example of a UIViewController that contains a custom stack view that can handle padding on all sides (I used SnapKit for the constraints):
import UIKit
import SnapKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let padding: CGFloat = 30
let customStackView = UIView()
customStackView.backgroundColor = UIColor(white: 0, alpha: 0.1)
view.addSubview(customStackView)
customStackView.snp_makeConstraints { (make) -> Void in
make.top.left.equalTo(padding)
make.right.equalTo(-padding)
}
// define an array of subviews
let views = [UIView(), UIView(), UIView()]
// UIView does not have an intrinsic contentSize
// so you have to set some heights
// In a real implementation the height will be determined
// by the views' content, but for this example
// you have to set the height programmatically
views[0].snp_makeConstraints { (make) -> Void in
make.height.equalTo(150)
}
views[1].snp_makeConstraints { (make) -> Void in
make.height.equalTo(120)
}
views[2].snp_makeConstraints { (make) -> Void in
make.height.equalTo(130)
}
// Iterate through the views and set the constraints
var leftHandView: UIView? = nil
for view in views {
customStackView.addSubview(view)
view.backgroundColor = UIColor(white: 0, alpha: 0.15)
view.snp_makeConstraints(closure: { (make) -> Void in
make.top.equalTo(padding)
make.bottom.lessThanOrEqualTo(-padding)
if let leftHandView = leftHandView {
make.left.equalTo(leftHandView.snp_right).offset(padding)
make.width.equalTo(leftHandView)
} else {
make.left.equalTo(padding)
}
leftHandView = view
})
}
if let lastView = views.last {
lastView.snp_makeConstraints(closure: { (make) -> Void in
make.right.equalTo(-padding)
})
}
}
}
This produces the following results:
For those who keep getting here looking for a solution for this problem. I found that the best way (in my case) would be to use a parent UIView as background and padding, like this:
In this case the UIStackView is contrained to the edges of the UIView with a padding and separate the subviews with spacing.
So this is the weirdest thing I came across ever.
I add a simple UIView on top of an UIView on an UIViewController. I change the size to 200 x 200 and then I want to change the UIView's size by placing this line of code inside the viewDidLoad method:
self.gameBackgroundView.frame.size.height = 10
which seems perfectly normal in Swift. Though, nothing happens. I can change the color, corner radius etc...
EDIT:
I have also deleted all constraints from that view and it still does not work.
Ok, So I found a solution here on stack ..
Change frame programmatically with auto layout
The correct answer, that works is, that:
I need to create an IBOutlet of my heightConstraint
Change the value of that constraint accordingly
Thank you all!
It is because of Auto Layout, however, you could do it after Auto Layout is done its work or change constraints of it. Set it your frame in your viewDidAppear() instead. It should work.
I hope this helps you.
Try this code, it will work on any device
let BackImage = UIImage(named: "backGrndImg#2x.png")!
var imageView: UIImageView!
override func loadView() {
super.loadView()
self.imageView = UIImageView(frame: CGRectZero)
self.imageView.contentMode = .ScaleAspectFill
self.imageView.image = BackImage
self.view.insertSubview(imageView, atIndex: 0)
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
self.imageView.frame = self.view.bounds
}