Center multiple independent items in swift - ios

Question

As you can see, two's a label , two images and two labels, all independent. I need to center all of these items,
i am doing this job programmatically. please suggest
try with way but failed :
func setupViews(){
view.addSubview(orderLocation)
orderLocation.addSubview(ownOrderTagImage)
orderLocation.addSubview(ownOrderTagLabel)
orderLocation.addSubview(ownOrderLocationImage)
orderLocation.addSubview(ownOrderLocationLabel)
//Change the width and height accordingly
view.addConstraintsWithFormat(format: "H:|[v0]|", views: orderLocation)
view.addConstraintsWithFormat(format: "V:|-50-[v0(20)]|", views: orderLocation)
orderLocation.addConstraintsWithFormat(format: "H:|[v0(18)][v1(70)]-20-[v2(18)][v3(80)]|", views: ownOrderTagImage, ownOrderTagLabel,ownOrderLocationImage,ownOrderLocationLabel)
orderLocation.addConstraintsWithFormat(format: "V:|[v0(20)]", views: ownOrderTagImage)
orderLocation.addConstraintsWithFormat(format: "V:|[v0(20)]", views: ownOrderTagLabel)
orderLocation.addConstraintsWithFormat(format: "V:[v0(20)]|", views: ownOrderLocationImage)
orderLocation.addConstraintsWithFormat(format: "V:[v0(20)]|", views: ownOrderLocationLabel)
}

Answer 1

You have a group of four views that you want to lay out in a row, and you want to center the group as a whole within a superview.
There is no anchor at the center of the group for you to use in a constraint. All of the anchors available are at the centers or edges of the individual subviews.
You cannot constrain “distance from leftmost item to superview” to be equal to “distance from rightmost item to superview”, because that constraint would involve four anchors, and an auto layout constraint can only involve two anchors.
One solution is to add a helper view that tightly surrounds the group of views. Then you can constrain the helper view's center anchor to the superview's center anchor.
The simplest way to do it is to put the group of views in a stack view, and center the stack view. If you use a stack view, you'll also need a “spacer” view to separate your “tag” views from your “location” views.
Here's my test result:
Here's my test playground:
import UIKit
import PlaygroundSupport
let rootView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 100))
rootView.backgroundColor = #colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1)
PlaygroundPage.current.liveView = rootView
let tagImageView = UIImageView(image: UIImage(named: "Toggle"))
tagImageView.contentMode = .scaleAspectFit
let tagLabel = UILabel()
tagLabel.text = "#YUIO9N"
let locationImageView = UIImageView(image: UIImage(named: "Gear"))
locationImageView.contentMode = .scaleAspectFit
let locationLabel = UILabel()
locationLabel.text = "Garmany"
let spacer = UIView()
let rowView = UIStackView(arrangedSubviews: [tagImageView, tagLabel, spacer, locationImageView, locationLabel])
rowView.axis = .horizontal
rowView.translatesAutoresizingMaskIntoConstraints = false
rootView.addSubview(rowView)
NSLayoutConstraint.activate([
tagImageView.widthAnchor.constraint(equalToConstant: 18),
spacer.widthAnchor.constraint(equalToConstant: 20),
locationImageView.widthAnchor.constraint(equalToConstant: 18),
rowView.heightAnchor.constraint(equalToConstant: 20),
rowView.centerXAnchor.constraint(equalTo: rootView.centerXAnchor),
rowView.topAnchor.constraint(equalTo: rootView.topAnchor, constant: 20)])

Answer 2

addConstraintsWithFormat is not inherently a part of swift, it's a an extension on the Visual Format Language.
I believe you are using the following code as your extension.
extension UIView {
func addConstraintsWithFormat(_ format: String, views : UIView...) {
var viewsDictionary = [String: UIView]()
for(index, view) in views.enumerated(){
let key = "v\(index)"
viewsDictionary[key] = view
view.translatesAutoresizingMaskIntoConstraints = false
}
addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewsDictionary))
}
You must remember to include information like that in future questions.
Anyways, you are missing the view you are adding the views to.
In your case you should have an ImageView as your superview
First create the ImageView object which in your case is going to be that bar
let imageView: UIImageView = {
let imgV = UIImageView()
//put the name of the image you are using in the quotes
imgV.image = UIImage(named: "")
imgV.layer.masksToBounds = true
imgV.contentMode = .scaleAspectFill
return imgV
}()
Make sure the photo you use is properly formatted and add barView as the super view of your sub views and their constraints.
Try
//here you add the view
view.addSubview(imageView)
imageView.addSubview(ownOrderTagImage)
imageView.addSubview(ownOrderTagLabel)
imageView.addSubview(ownOrderLocationImage)
imageView.addSubview(ownOrderLocationLabel)
//Change the width and height accordingly
view.addConstraintsWithFormat(format: "H:|[v0(100)]|", views: imageView)
view.addConstraintsWithFormat(format: "V:|[v0(10)]|", views: imageView)
imageView.addConstraintsWithFormat(format: "H:|[v0][v1]|", views: ownOrderTagImage, ownOrderTagLabel)
imageView.addConstraintsWithFormat(format: "H:|[v0][v1]|", views: ownOrderLocationImage, ownOrderLocationLabel)
imageView.addConstraintsWithFormat(format: "V:|[v0(44)]", views: ownOrderTagImage)
imageView.addConstraintsWithFormat(format: "V:|[v0(44)]", views: ownOrderTagLabel)
imageView.addConstraintsWithFormat(format: "V:[v0(30)]|", views: ownOrderLocationImage)
imageView.addConstraintsWithFormat(format: "V:[v0(30)]|", views: ownOrderLocationLabel)