I am trying to create a small reusable view for the "tags" at the bottom ("PC-12 Restricted" and "PC-24 Restricted").
This is the code I have, and mostly it's working.
class TagView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
private let label = UILabel()
func setup() {
translatesAutoresizingMaskIntoConstraints = false
label.text = "Placeholder"
label.translatesAutoresizingMaskIntoConstraints = false
label.font = .preferredFont(forTextStyle: .caption2)
addSubview(label)
NSLayoutConstraint.activate([
label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
label.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8),
label.topAnchor.constraint(equalTo: topAnchor, constant: 4),
label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -4),
])
}
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = bounds.height / 2
}
func configure(tag: Tag) {
label.text = tag.label
backgroundColor = tag.backgroundColor
}
}
However, when I place it inside a UIStackView inside of a UITableViewCell, it moves outside of the stackview? Also, I added two of these TagViews, but they are showing on top of each other!
When I use the view debugger in Xcode, I get some exclamation marks with the following info:
Why is the position ambiguous? What am I missing? When I print the TagViews that I am adding to my view hierarchy, I do see that they have a frame with everything set to 0, but when I look in the view debugger, they do have a frame.
let tagViews = airport.tags.map { tag -> TagView in
let tagView = TagView()
tagView.configure(tag: tag)
return tagView
}
print(tagViews)
for view in tagViews {
tagsStackView.addSubview(view)
}
[<MyApp.TagView: 0x7f81ac449570; frame = (0 0; 0 0); layer = <CALayer: 0x600001afaba0>>, <MyApp.TagView: 0x7f81ac449c70; frame = (0 0; 0 0); layer = <CALayer: 0x600001afae60>>]
Edit:
If I add two TagViews to my the UIStackView inside of my UITableViewCell .xib file, it works fine:
But when I instantiate and add them programmatically, I have the layout problems as described.
Edit 2:
I have a very small test project so you can reproduce the problem: https://github.com/kevinrenskers/TagViewTest
Finally found the problem. And I feel stupid 🤦♂️
tagsStackView.addSubview(tagView)
should of course be
tagsStackView.addArrangedSubview(tagView)
Related
Greetings stack overflow.
I am trying to build a "bullseye" type view, using coloured subviews and the corner radius. The problem I have is, only my first subview's corners are getting rounded and the inner views are still squares. The black view is a subview of my custom view. The red view is it's subview, and they yellow view the subview of that. Pretty simple hierarchy.
The result looks like this:
I add the views and set their constraints manually. My test app just has the ThreeCircleView dead center of a view controller with the X,Y centered and the width, height constant. I do the actual rounding of the corners in didLayoutSubViews because the size of the view might change, so the corners would have to be resized.
I wrote a test view to isolate this, here it is
class ThreeCircleView: UIView {
var outerCircle: UIView = UIView()
var middleCircle: UIView = UIView()
var innerCircle: UIView = UIView()
override init(frame: CGRect) {
super.init(frame: frame)
translatesAutoresizingMaskIntoConstraints = false
addSubViews()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
translatesAutoresizingMaskIntoConstraints = false
addSubViews()
}
func addSubViews() {
outerCircle.backgroundColor = .black
middleCircle.backgroundColor = .red
innerCircle.backgroundColor = .yellow
self.addSubview(outerCircle)
outerCircle.addSubview(middleCircle)
middleCircle.addSubview(innerCircle)
let outerCenterY = outerCircle.centerYAnchor.constraint(equalTo: self.centerYAnchor)
let outerCenterX = outerCircle.centerXAnchor.constraint(equalTo: self.centerXAnchor)
let outerCenterWidth = outerCircle.widthAnchor.constraint(equalTo: self.widthAnchor, constant: -50.0 )
let outerCenterHeight = outerCircle.heightAnchor.constraint(equalTo: self.heightAnchor, constant: -50.0 )
outerCircle.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([outerCenterY,outerCenterX,outerCenterWidth,outerCenterHeight])
self.setNeedsLayout()
let middleCenterY = middleCircle.centerYAnchor.constraint(equalTo: self.centerYAnchor)
let middleCenterX = middleCircle.centerXAnchor.constraint(equalTo: self.centerXAnchor)
let middleCenterWidth = middleCircle.widthAnchor.constraint(equalTo: self.widthAnchor, constant: -100.0 )
let middleCenterHeight = middleCircle.heightAnchor.constraint(equalTo: self.heightAnchor, constant: -100.0 )
middleCircle.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([middleCenterY,middleCenterX,middleCenterWidth,middleCenterHeight])
let innerCenterY = innerCircle.centerYAnchor.constraint(equalTo: self.centerYAnchor)
let innerCenterX = innerCircle.centerXAnchor.constraint(equalTo: self.centerXAnchor)
let innerCenterWidth = innerCircle.widthAnchor.constraint(equalTo: self.widthAnchor, constant: -150.0 )
let innerCenterHeight = innerCircle.heightAnchor.constraint(equalTo: self.heightAnchor, constant: -150.0 )
innerCircle.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([innerCenterY,innerCenterX,innerCenterWidth,innerCenterHeight])
}
func makeCircle(v:UIView) {
v.layer.cornerRadius = v.frame.size.width * 0.50
v.clipsToBounds = true
}
override func layoutSubviews() {
super.layoutSubviews()
makeCircle(v: outerCircle)
makeCircle(v: middleCircle)
makeCircle(v: innerCircle)
}
}
An easy way to make it look as expected is to add layoutIfNeeded() call inside your makeCircle(v:UIView) method. This will make you sure that all views' frames are updated correctly before applying visual changes:
func makeCircle(v:UIView) {
v.layoutIfNeeded()
v.layer.cornerRadius = v.frame.size.width * 0.50
v.clipsToBounds = true
}
I'm trying to create a view like below using storyboard in Xcode.
For this, I've added a button and a label with constraints but this is the result I get. The text doesn't start below the checkbox. One way to achieve this would be to create 2 labels and add the strings that start after this string to 2 label and place it under the first label.
Is there any better way to do this? Also, when you click on Read more the text can expand as well.
You can make the leading of the button and the label the same ( button above label ) and insert some empty characters at the beginning of the label text
You can do a way. Take the button and the label in a view
then sub divide the view into two views, left one holds the button and right one holds the label. make a gap between left and right
button's constraint will be leading , top and trailing to zero and height as your wish
label's constraint will be leading , top, trailing and bottom.
You can accomplish this by using a UITextView and setting an ExclusionPath.
The ExclusionPath (or paths) defines an area within the text view's textContainer around which the text should wrap.
If you disable scrolling, selection and editing of the UITextView it will behave just like a UILabel but will also give you the benefit of ExclusionPath
Here is a simple example - lots of hard-coded values, so you'd probably want to make it a custom class - but this should get you on your way:
class TextViewLabel: UITextView {
override init(frame: CGRect, textContainer: NSTextContainer?) {
super.init(frame: frame, textContainer: textContainer)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit() -> Void {
isScrollEnabled = false
isEditable = false
isSelectable = false
textContainerInset = UIEdgeInsets.zero
textContainer.lineFragmentPadding = 0
}
}
class ExclusionViewController: UIViewController {
let checkBox: UIButton = {
let v = UIButton()
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
let theTextViewLabel: TextViewLabel = {
let v = TextViewLabel()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .yellow
v.text = "I agree to receive information about this application and all the updates related to this..."
v.font = UIFont.systemFont(ofSize: 20.0)
return v
}()
var isChecked: Bool = false
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(theTextViewLabel)
theTextViewLabel.addSubview(checkBox)
let cbWidth = CGFloat(20)
NSLayoutConstraint.activate([
theTextViewLabel.topAnchor.constraint(equalTo: view.topAnchor, constant: 100.0),
theTextViewLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40.0),
theTextViewLabel.widthAnchor.constraint(equalToConstant: 240.0),
checkBox.topAnchor.constraint(equalTo: theTextViewLabel.topAnchor, constant: 2.0),
checkBox.leadingAnchor.constraint(equalTo: theTextViewLabel.leadingAnchor, constant: 0.0),
checkBox.widthAnchor.constraint(equalToConstant: cbWidth),
checkBox.heightAnchor.constraint(equalToConstant: cbWidth),
])
theTextViewLabel.textContainer.exclusionPaths = [
UIBezierPath(rect: CGRect(x: 0, y: 0, width: cbWidth + 8.0, height: cbWidth))
]
updateCheckboxImage()
checkBox.addTarget(self, action: #selector(checkBoxTapped), for: .touchUpInside)
}
func updateCheckboxImage() -> Void {
if isChecked {
checkBox.setImage(UIImage(named: "SmallChecked"), for: .normal)
} else {
checkBox.setImage(UIImage(named: "SmallUnChecked"), for: .normal)
}
}
#objc func checkBoxTapped() -> Void {
isChecked = !isChecked
updateCheckboxImage()
}
}
Result:
(I used these two images for the checkBox):
I have created a simple UIView that contains a red box (UIImage) at its centre. When all the constraints are constants the code works fine. However, if I replace the height constraint with one that makes the box half the height of the view then the box disappears.
I assume that this is either because I am doing it wrong (obviously) or I need to do something more to force the constraint to realise the UIView height is greater than zero.
How do I set the redBox height constraint so that it is always half the height of the BoxView?
import UIKit
class BoxView: UIView {
public var redBox: UIImageView
public override init(frame: CGRect) {
redBox = UIImageView(frame: .zero)
redBox.backgroundColor = .red
super.init(frame: frame)
self.backgroundColor = .yellow
addSubview(redBox)
redBox.translatesAutoresizingMaskIntoConstraints = false
let margins = layoutMarginsGuide
redBox.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
redBox.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
redBox.widthAnchor.constraint(equalToConstant: 100).isActive = true
//redBox.heightAnchor.constraint(equalToConstant: 100).isActive = true
redBox.heightAnchor.constraint(equalTo: self.heightAnchor, constant: 0.5)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view = BoxView()
}
}
Replace
redBox.heightAnchor.constraint(equalTo: self.heightAnchor, constant: 0.5)
with
redBox.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 0.5).isActive = true
NSLayoutConstraint.activate([
redBox.centerXAnchor.constraint(equalTo: self.centerXAnchor),
redBox.centerYAnchor.constraint(equalTo: self.centerYAnchor),
redBox.widthAnchor.constraint(equalToConstant: 100),
redBox.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 0.5)
])
In your current code first you miss the .isActive = true which has the same effect as if the line doesn't exist , and if specified this will make the box height equal to the view's height + constant ( = 0.5 )
box height = view height * multiplier + constant
and since default multiplier = 1 and you set constant = 0.5 this will be
box height = view height * 1.0 + 0.5
But instead you need
box height = view height * 0.5 + 0 // omit consatnt in constraint and it will be zero
class BoxView: UIView {
public var redBox: UIImageView
public override init(frame: CGRect) {
super.init(frame: frame)
redBox = UIImageView(frame: .zero)
redBox.backgroundColor = .red
self.backgroundColor = .yellow
addSubview(redBox)
redBox.translatesAutoresizingMaskIntoConstraints = false
let margins = layoutMarginsGuide
NSLayoutConstraint.activate([
redBox.centerXAnchor.constraint(equalTo: self.centerXAnchor),
redBox.centerYAnchor.constraint(equalTo: self.centerYAnchor),
redBox.widthAnchor.constraint(equalToConstant: 100),
redBox.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 0.5)
])
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
I have a simple UICollectionViewCell which is full width and I'm using SnapKit to layout its subviews. I'm using SnapKit for my other view and it's working great but not within the collectionViewCell. This is the layout I'm trying to achieve:
collectionViewCell layout
The code for the collectionViewCell is:
lazy var imageView: UIImageView = {
let img = UIImageView(frame: .zero)
img.contentMode = UIViewContentMode.scaleAspectFit
img.backgroundColor = UIColor.lightGray
return img
}()
override init(frame: CGRect) {
super.init(frame: frame)
let imageWidth = CGFloat(frame.width * 0.80)
let imageHeight = CGFloat(imageWidth/1.77)
backgroundColor = UIColor.darkGray
imageView.frame.size.width = imageWidth
imageView.frame.size.height = imageHeight
contentView.addSubview(imageView)
imageView.snp.makeConstraints { (make) in
make.top.equalTo(20)
//make.right.equalTo(-20)
//make.right.equalTo(contentView).offset(-20)
//make.right.equalTo(contentView.snp.right).offset(-20)
//make.right.equalTo(contentView.snp.rightMargin).offset(-20)
//make.right.equalToSuperview().offset(-20)
}
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
Without applying any constraints the imageView is displayed top left in the cell but applying any constraints makes the image disappear. Inspecting the collectionViewCell in debug view shows the imageView and constraints but the 'Size and horizontal position are ambiguous for UIImageView'.
I have also tried setting contentView.translatesAutoresizingMaskIntoConstraints = false amongst other things but the same results.
I'm using all code and no storyboard UI or layouts.
Thanks for any help!
You can't use both auto layout (SnapKit) and manual layout (set frame). Usually, using auto layout will cause manual layout to fail. However, your code of the constraints in snp closure is not complete. Whether using auto layout or manual layout, finally the view should get the position and size.
So, you can try like this:
imageView.snp.makeConstraints { make in
// set size
make.size.equalTo(CGSize(width: imageWidth, height: imageHeight))
// set position
make.top.equalTo(20)
make.centerX.equalTo(contentView)
}
I don't know much about SnapKit but it looks like you're missing a constraint. You need height, width, x and y. Works nicely with IOS 9 constraints.
let imageView: UIImageView = {
let view = UIImageView()
view.translatesAutoresizingMaskIntoConstraints = false
view.contentMode = .scaleAspectFit
view.backgroundColor = .lightGray
return view
}()
override init(frame: CGRect) {
super.init(frame: frame)
setupViews()
}
func setupViews() {
self.addSubview(imageView)
imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
imageView.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -10).isActive = true
imageView.widthAnchor.constraint(equalTo: self.widthAnchor, multiplier: 2/3, constant: -10).isActive = true
imageView.heightAnchor.constraint(equalTo: self.heightAnchor, multiplier: 1/2, constant: -10).isActive = true
}
I have the following UIView:
It is a UIView which contains three subviews. A regular UILabel (Hello World) at the top, a custom UIViewController (CategoryList) which contains a CollectionView with buttons (alpha,beta, ...) and another custom UIViewController with just a label (SALUT).
I do auto-layout programmatically and position SALUT (var sCtrl) below the CategoryList (var catList) with
sCtrl.view.topAnchor.constraint(equalTo: catList.view.bottomAnchor).isActive = true
This results in the picture above, where SALUT is not positioned below the category list as I would like it to be. I sort of understand why since when I set the constraint the buttons are not yet laid out properly in the CollectionView and thus the bottom anchor of the catList is not set.
In the CategoryList:UIVIewController I have the following in order to get the collection view to get the correct height.
override public func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
heightConstraint = collectionView.heightAnchor.constraint(equalToConstant: collectionView.collectionViewLayout.collectionViewContentSize.height)
self.view.addConstraint(heightConstraint)
}
This works but since viewDidLayoutSubviews() is called after the constraint is set on SALUT the SALUT position is wrong. How can I get it right in an easy way? (I guess I could make a controller for my main view and check there when subviews are laid out and then update subview positions but this seems overly complicated to me).
The full code for the main view is below so you can see the layout positioning code. If needed I can also provide the subviews code but I suppose it shouldn't be needed since they should be considered black boxes...
class MyView: UIView {
let label = UILabel()
var sCtrl : SubController
var catList : CategoryList
var topConstraint = NSLayoutConstraint()
override init(frame: CGRect) {
sCtrl = SubController()
catList = CategoryList()
super.init(frame: frame)
setup()
}
private func setup() {
self.backgroundColor = UIColor.green
label.translatesAutoresizingMaskIntoConstraints = false
label.backgroundColor = UIColor.yellow
label.text = "Hello world"
label.textAlignment = .center
self.addSubview(label)
catList.view.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(catList.view)
sCtrl.view.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(sCtrl.view)
let margins = self.layoutMarginsGuide
label.leadingAnchor.constraint(equalTo: margins.leadingAnchor, constant: 0).isActive = true
label.trailingAnchor.constraint(equalTo: margins.trailingAnchor, constant: 0).isActive = true
label.topAnchor.constraint(equalTo: margins.topAnchor, constant: 0).isActive = true
label.heightAnchor.constraint(equalToConstant: 100.0).isActive=true
catList.view.leadingAnchor.constraint(equalTo: margins.leadingAnchor, constant: 0).isActive = true
catList.view.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 1.0).isActive = true
catList.view.widthAnchor.constraint(equalTo: margins.widthAnchor, multiplier: 1.0).isActive = true
catList.view.trailingAnchor.constraint(equalTo: margins.trailingAnchor, constant:0).isActive = true
sCtrl.view.topAnchor.constraint(equalTo: catList.view.bottomAnchor).isActive = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
let v = MyView(frame: CGRect(x: 0, y: 0, width: 400, height: 600))
Ok, I found the issue. I had missed to add the height constraint to the CategoryList's own view. Adding this it works just fine.
override public func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
heightConstraint = collectionView.heightAnchor.constraint(equalToConstant: collectionView.collectionViewLayout.collectionViewContentSize.height)
self.view.addConstraint(heightConstraint)
//THE MISSING LINE!!
self.view.heightAnchor.constraint(equalTo: self.collectionView.heightAnchor, constant: 0).isActive = true
}