UIView not adjusting width according to subviews? - ios

I'm trying to creating a reusable UIView subclass, with a UILabel and UIImageView as subviews. My view subclass should adjust its width according to the label's width.
Here is my class-
class CustomView: UIView {
private var infoLabel: UILabel!
private var imageView: UIImageView!
override init(frame: CGRect) {
super.init(frame: frame)
infoLabel = UILabel(frame: CGRect.zero)
imageView = UIImageView(frame: CGRect.zero)
addSubview(infoLabel)
addSubview(imageView)
infoLabel.backgroundColor = .white
imageView.backgroundColor = .gray
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func updateConstraints() {
super.updateConstraints()
infoLabel.translatesAutoresizingMaskIntoConstraints = false
imageView.translatesAutoresizingMaskIntoConstraints = false
infoLabel.leadingAnchor.constraint(
equalTo: self.leadingAnchor, constant: 5).isActive = true
// infoLabel.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
infoLabel.topAnchor.constraint(equalTo: self.topAnchor, constant: 5).isActive = true
infoLabel.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 5).isActive = true
imageView.leadingAnchor.constraint(
equalTo: infoLabel.trailingAnchor, constant: 10).isActive = true
//imageView.trailingAnchor.constraint(
//equalTo: self.trailingAnchor, constant: 10).isActive = true
//imageView.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
imageView.widthAnchor.constraint(equalToConstant: 25).isActive = true
imageView.topAnchor.constraint(equalTo: self.topAnchor, constant: 5).isActive = true
imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 5).isActive = true
}
internal func setText(_ text: String, andImage image: String){
infoLabel.text = text
imageView.image = UIImage(named: image)
}
}
and here is how I'm adding it to view -
let aView: CustomView = CustomView(frame: CGRect(x: 20, y: 144, width: 120, height: 31))
view.addSubview(aView)
aView.setText("my testing label", andImage: "distanceIcon")
aView.backgroundColor = UIColor.red
I get the result like added image.(red is my custom view, white is label and gray is image)
Edit: It is working if add view in Storyboard and but if I try via code as mentioned above it is not working.

You have to call translatesAutoresizingMaskIntoConstraints = false on CustomView class instance as well:
self.translatesAutoresizingMaskIntoConstraints = false
Also add leading and top constraints on custom view to set it's position:
customView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 200).isActive = true
customView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 200).isActive = true
Don't forget to add trailing constraint on imageView:
imageView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -10).isActive = true

Related

how to make three views the same size and resized depending on the container view?

I have three views on the bottom of the view. I'm trying to make them have the same size and the size can be resized automatically depending on the size of the container view. I'd like to do it programmatically.
Here's how I want them to look
Here's how it looks by my current code
import UIKit
class ViewController: UIViewController {
var view1 = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
var view2 = UIView(frame: CGRect(x: 300, y: 300, width: 50, height: 50))
var view3 = UIView(frame: CGRect(x: 400, y: 500, width: 70, height: 70))
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(view1)
view.addSubview(view2)
view.addSubview(view3)
view1.backgroundColor = .orange
view2.backgroundColor = .black
view3.backgroundColor = .gray
view1.translatesAutoresizingMaskIntoConstraints = false
view2.translatesAutoresizingMaskIntoConstraints = false
view3.translatesAutoresizingMaskIntoConstraints = false
// view1.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
view1.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true
view1.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: -10).isActive = true
view1.widthAnchor.constraint(equalTo: view.widthAnchor, constant: view.frame.size.width*0.01).isActive = true
view2.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1).isActive = true
//view2.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
view2.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true
view2.leadingAnchor.constraint(equalTo: view1.leadingAnchor, constant: view.frame.size.width*(2/3)).isActive = true
view2.widthAnchor.constraint(equalTo: view1.widthAnchor, constant: 0).isActive = true
view2.heightAnchor.constraint(equalTo: view1.heightAnchor, constant: 0).isActive = true
// view3.topAnchor.constraint(equalTo: view.topAnchor, constant: 10).isActive = true
view3.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -10).isActive = true
view3.leadingAnchor.constraint(equalTo: view2.leadingAnchor, constant: 10).isActive = true
view3.widthAnchor.constraint(equalTo: view2.widthAnchor, constant: 0).isActive = true
view3.heightAnchor.constraint(equalTo: view2.heightAnchor, constant: 0).isActive = true
}
}
Here, you can use the concept of UIStackView. Here, you can get your desired output using the following code(sample demo)
import UIKit
class ViewController: UIViewController {
var view1 = UIView()
var view2 = UIView()
var view3 = UIView()
override func viewDidLoad() {
super.viewDidLoad()
let stackView = UIStackView(arrangedSubviews: [view1, view2, view3])
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .horizontal
stackView.distribution = .fillEqually
stackView.spacing = 50 //add amount of space between your views
view.addSubview(stackView)
view1.backgroundColor = .orange
view2.backgroundColor = .black
view3.backgroundColor = .gray
stackView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
stackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
stackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
stackView.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1).isActive = true
}
}
For more about UIStackView with example check this: https://nshipster.com/uistackview
Output:
Welcome to Stackoverflow. Please read on UIStackView. And by using that stackView, you can easily achieve what you want to achieve in your screenshot.
import UIKit
class ViewController: UIViewController {
var view1 = UIView()
var view2 = UIView()
var view3 = UIView()
lazy var stackView: UIStackView = {
return UIStackView(arrangedSubviews: [
self.view1,
self.view2,
self.view3
])
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(stackView)
view1.backgroundColor = .orange
view2.backgroundColor = .black
view3.backgroundColor = .gray
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .horizontal
stackView.distribution = .equalSpacing
stackView.alignment = .center
view1.translatesAutoresizingMaskIntoConstraints = false
view2.translatesAutoresizingMaskIntoConstraints = false
view3.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
self.stackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor, constant: 16),
self.stackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -16),
self.stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -16),
self.view1.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
self.view1.widthAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
self.view2.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
self.view2.widthAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
self.view3.heightAnchor.constraint(equalToConstant: view.frame.size.height*0.1),
self.view3.widthAnchor.constraint(equalToConstant: view.frame.size.height*0.1)
])
}
}
RESULT:

Why ImageView has was wrong location when I use anchors programmatically?

everyone. I have problems with the collection view cell which I build programmatically using anchors.
Cell
private lazy var iconView: UIImageView = {
let image = UIImageView()
image.translatesAutoresizingMaskIntoConstraints = false
image.clipsToBounds = true
return image
}()
private lazy var label: UILabel = {
let label = UILabel()
label.numberOfLines = 2
label.font = NeoSansPro.regular.of(size: 12)
label.textAlignment = .center
label.translatesAutoresizingMaskIntoConstraints = false
label.sizeToFit()
return label
}()
Config anchor
override func layoutSubviews() {
super.layoutSubviews()
setupUI()
}
func setupUI() {
NSLayoutConstraint.activate( [
iconView.heightAnchor.constraint(equalToConstant: 32),
iconView.widthAnchor.constraint(equalToConstant: 32),
iconView.centerXAnchor.constraint(equalTo: centerXAnchor, constant: 0),
iconView.centerYAnchor.constraint(equalTo: centerYAnchor, constant: -16),
label.topAnchor.constraint(equalTo: iconView.bottomAnchor, constant: 8),
label.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 4),
label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 4),
label.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 4),
])
}
as the result 1 and 9 cells has wrong image location and label width biggest that cell width.
Add views first then add constraints it will work.
private lazy var iconView: UIImageView = {
let image = UIImageView()
image.translatesAutoresizingMaskIntoConstraints = false
image.image = UIImage(named: "1")
return image
}()
override func awakeFromNib() {
super.awakeFromNib()
backView.layer.cornerRadius = 5
self.contentView.addSubview(iconView)
setUpView()
}
func setUpView() {
NSLayoutConstraint.activate( [
iconView.heightAnchor.constraint(equalToConstant: 40),
iconView.widthAnchor.constraint(equalToConstant: 40),
iconView.centerXAnchor.constraint(equalTo: self.contentView.centerXAnchor, constant: 0),
iconView.centerYAnchor.constraint(equalTo: self.contentView.centerYAnchor, constant: -16)
])
}

Add fullscreen view as subview of view controller

I want to make a view1 that I can add as a subview to my view controller that covers the whole screen. Then inside view1 I want to place a 100x100 view2 in the center.
How can I do this with swift? (not storyboard). I want to create a stand alone uiview class, not just a variable inside the view controller.
I want to make view1 userInteractionDisabled.
As you want stand alone uiview class, for two views make two classes. Thus modulating the code better, as following:
class TypeOneView: UIView {
convenience init() {
self.init(frame: UIScreen.main.bounds)
isUserInteractionEnabled = false
// more ui customization
backgroundColor = UIColor.green
// add more customization if you want
}
}
class TypeTwoView: UIView {
convenience init(_ width: Double,_ height: Double) {
let fullScreenHeight = Double(UIScreen.main.bounds.height)
let fullScreenWidth = Double(UIScreen.main.bounds.width)
self.init(frame: CGRect(x: (fullScreenWidth/2) - (width/2), y: (fullScreenHeight/2) - (height/2), width: width, height: width))
// additional ui customization
backgroundColor = UIColor.red
// add more customization if you want
}
}
Then instantiate and add these views as subview in your target view controller class as:
let view1 = TypeOneView()
let view2 = TypeTwoView(100.0, 100.0)
view.addSubview(view1)
view.addSubview(view2)
view.bringSubview(toFront: view2)
result:
var view1:UIView!
var view2:UIView!
override func viewDidLoad() {
view1.translatesAutoresizingMaskIntoConstraints = false
view1.isUserInteractionEnabled = false
self.view.addSubview(view1)
view1.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 0).isActive = true
view1.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0).isActive = true
view1.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0).isActive = true
view1.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: 0).isActive = true
view2.translatesAutoresizingMaskIntoConstraints = false
self.view1.addSubview(view2)
view2.heightAnchor.constraint(equalToConstant: 100).isActive = true
view2.widthAnchor.constraint(equalToConstant: 100).isActive = true
view2.centerXAnchor.constraint(equalTo: self.view1.centerXAnchor).isActive = true
view2.centerYAnchor.constraint(equalTo: self.view1.centerYAnchor).isActive = true
}
Check out this. It would be something like this
class MyView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
addMySubviews()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
addMySubviews()
}
func addMySubviews() {
let view = UIView(frame: CGRect.zero)
view.translatesAutoresizingMaskIntoConstraints = false
addSubview(view)
leadingAnchor.constraintEqualToSystemSpacingAfter(view.leadingAnchor, multiplier: 0).isActive = true
topAnchor.constraintEqualToSystemSpacingBelow(view.topAnchor, multiplier: 0).isActive = true
trailingAnchor.constraintEqualToSystemSpacingAfter(view.trailingAnchor, multiplier: 0).isActive = true
bottomAnchor.constraintEqualToSystemSpacingBelow(view.bottomAnchor, multiplier: 0).isActive = true
let view100x100 = UIView(frame: CGRect.zero)
view100x100.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(view100x100)
view100x100.centerXAnchor.constraintEqualToSystemSpacingAfter(centerXAnchor, multiplier: 0).isActive = true
view100x100.centerYAnchor.constraintEqualToSystemSpacingBelow(centerYAnchor, multiplier: 0).isActive = true
view100x100.heightAnchor.constraint(equalToConstant: 100).isActive = true
view100x100.widthAnchor.constraint(equalToConstant: 100).isActive = true
}
}
Use as mentioned below:
let myView = MyView(frame: CGRect(x: 0, y: 0, width: 275, height: 600))
OR
let myView = MyView(frame: view.frame)
myView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(myView)
myView.leadingAnchor.constraintEqualToSystemSpacingAfter(view.leadingAnchor, multiplier: 0).isActive = true
myView.topAnchor.constraintEqualToSystemSpacingBelow(view.topAnchor, multiplier: 0).isActive = true
myView.trailingAnchor.constraintEqualToSystemSpacingAfter(view.trailingAnchor, multiplier: 0).isActive = true
myView.bottomAnchor.constraintEqualToSystemSpacingBelow(view.bottomAnchor, multiplier: 0).isActive = true

Swift 4: Add View on top of all controllers

Conditions:
Swift 4, Xcode 9.3
Target: iOS 11.3
UI Done Programatically
Using Constraints
My Root View Controller is a Navigation
Situation:
I wanted to float an audio player that will be visible throughout the app.
I did an AudioPlayer.swift class that contains the user interface of the audio player.
AudioPlayer.swift
import Foundation
import UIKit
import FRadioPlayer
class AudioPlayer: UIView {
let screenSize: CGRect = UIScreen.main.bounds
let playerImage: UIImageView = {
let iv = UIImageView()
iv.translatesAutoresizingMaskIntoConstraints = false
iv.contentMode = .scaleAspectFill
iv.layer.masksToBounds = true
return iv
}()
let playerTitle: UILabel = {
let l = UILabel()
l.textColor = .darkGray
l.font = UIFont.boldSystemFont(ofSize: 13)
l.translatesAutoresizingMaskIntoConstraints = false
return l
}()
let playerSeriesTitle: UILabel = {
let l = UILabel()
l.textColor = .darkGray
l.font = UIFont.boldSystemFont(ofSize: 12)
l.translatesAutoresizingMaskIntoConstraints = false
return l
}()
override init(frame: CGRect) {
super.init(frame: frame)
translatesAutoresizingMaskIntoConstraints = false
setupAudioControls()
}
private func setupAudioControls(){
let appDelegate = AppDelegate.sharedInstance
self.backgroundColor = UIColor.init(hex: "#EBE4D3")
self.addSubview(playerImage)
self.addSubview(playerTitle)
self.addSubview(playerSeriesTitle)
self.heightAnchor.constraint(equalToConstant: 150).isActive = true
self.bottomAnchor.constraint(equalTo: appDelegate().rootView ).isActive = true
self.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor).isActive = true
self.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor).isActive = true
playerImage.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
playerImage.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10).isActive = true
playerImage.widthAnchor.constraint(equalToConstant: 55).isActive = true
playerImage.heightAnchor.constraint(equalToConstant: 55).isActive = true
playerTitle.topAnchor.constraint(equalTo: self.topAnchor, constant: 5).isActive = true
playerTitle.leadingAnchor.constraint(equalTo: playerImage.trailingAnchor, constant: 10).isActive = true
playerTitle.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 10).isActive = true
playerTitle.heightAnchor.constraint(equalToConstant: 25).isActive = true
playerSeriesTitle.topAnchor.constraint(equalTo: playerTitle.topAnchor, constant: 20).isActive = true
playerSeriesTitle.leadingAnchor.constraint(equalTo: playerImage.trailingAnchor, constant: 10).isActive = true
playerSeriesTitle.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 10).isActive = true
playerSeriesTitle.heightAnchor.constraint(equalToConstant: 20).isActive = true
UIView.animate(withDuration: 0.5, animations: {
self.frame.origin.y -= 150
self.playerImage.frame.origin.y -= 150
self.playerTitle.frame.origin.y -= 150
self.playerSeriesTitle.frame.origin.y -= 150
}, completion: nil)
self.setNeedsLayout()
self.reloadInputViews()
}
}
Problem:
How can I add this to the Root View Controller to stay on top in all view controllers that I have in my app? Wherever I navigate, the player must stay on the bottom part of every controller. As you can see, I need a reference to the rootviewcontroller to set the contraints for the AudioPlayer but I failed in so many attempts (like calling the rootviewcontroller using AppDelegate)
I update it for you
add singleton static let shared = AudioPlayer()
add public func showAudioPlayer () --> to display Audio player
add as subview to UIApplication.shared.keyWindow?
TODO- add HideAudioPlayer()
Use like this
AudioPlayer.shared.showAudioPlayer()
Here is updated code
import Foundation
import UIKit
class AudioPlayer: UIView {
static let shared = AudioPlayer()
let screenSize: CGRect = UIScreen.main.bounds
let playerImage: UIImageView = {
let iv = UIImageView()
iv.translatesAutoresizingMaskIntoConstraints = false
iv.contentMode = .scaleAspectFill
iv.layer.masksToBounds = true
return iv
}()
let playerTitle: UILabel = {
let l = UILabel()
l.textColor = .darkGray
l.font = UIFont.boldSystemFont(ofSize: 13)
l.translatesAutoresizingMaskIntoConstraints = false
return l
}()
let playerSeriesTitle: UILabel = {
let l = UILabel()
l.textColor = .darkGray
l.font = UIFont.boldSystemFont(ofSize: 12)
l.translatesAutoresizingMaskIntoConstraints = false
return l
}()
override init(frame: CGRect) {
super.init(frame: frame)
translatesAutoresizingMaskIntoConstraints = false
// setupAudioControls()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
public func showAudioPlayer (){
self.setupAudioControls()
}
private func setupAudioControls(){
self.backgroundColor = .red
self.addSubview(playerImage)
self.addSubview(playerTitle)
self.addSubview(playerSeriesTitle)
UIApplication.shared.keyWindow?.addSubview(self)
if let layoutGuide = UIApplication.shared.keyWindow?.layoutMarginsGuide {
self.heightAnchor.constraint(equalToConstant: 150).isActive = true
self.bottomAnchor.constraint(equalTo: layoutGuide.bottomAnchor ).isActive = true
self.leadingAnchor.constraint(equalTo: layoutGuide.leadingAnchor).isActive = true
self.trailingAnchor.constraint(equalTo: layoutGuide.trailingAnchor).isActive = true
}
playerImage.topAnchor.constraint(equalTo: self.topAnchor, constant: 10).isActive = true
playerImage.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10).isActive = true
playerImage.widthAnchor.constraint(equalToConstant: 55).isActive = true
playerImage.heightAnchor.constraint(equalToConstant: 55).isActive = true
playerTitle.topAnchor.constraint(equalTo: self.topAnchor, constant: 5).isActive = true
playerTitle.leadingAnchor.constraint(equalTo: playerImage.trailingAnchor, constant: 10).isActive = true
playerTitle.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 10).isActive = true
playerTitle.heightAnchor.constraint(equalToConstant: 25).isActive = true
playerSeriesTitle.topAnchor.constraint(equalTo: playerTitle.topAnchor, constant: 20).isActive = true
playerSeriesTitle.leadingAnchor.constraint(equalTo: playerImage.trailingAnchor, constant: 10).isActive = true
playerSeriesTitle.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: 10).isActive = true
playerSeriesTitle.heightAnchor.constraint(equalToConstant: 20).isActive = true
UIView.animate(withDuration: 0.5, animations: {
self.frame.origin.y -= 150
self.playerImage.frame.origin.y -= 150
self.playerTitle.frame.origin.y -= 150
self.playerSeriesTitle.frame.origin.y -= 150
}, completion: nil)
self.setNeedsLayout()
self.reloadInputViews()
}
}
If you want to show view in each view controller then as per view hierarchy you must have to add in UIWindow. UIWindow is base of all screen.
AppDelegate.shared.window?.addSubview(AudioPlayer)
You can add your view to UIWindow.
I am doing the same thing with below method in AppDelegate.
var window: UIWindow?
func addPlayerViewAtBottom() {
var bottomView : PlayerBottomView!
bottomView = PlayerBottomView(frame: CGRect(x: 0, y: UIScreen.main.bounds.size.height - 60, width: UIScreen.main.bounds.width, height: 60))
self.window?.addSubview(bottomView)
self.window?.bringSubview(toFront: bottomView)
}

In Swift, programmatically creating UIView and adding controls to it and using auto layout, causes the controls to appear on the view's parent

I am trying to write a simple composite component for iOS in Swift 3. It consists of a UILabel followed by an UITextField laid out horizontally followed by a line under them. But What happens is the UILabel disappears, UITextField appears on the parent view and line also disappears.
My design in sketch
What it actually looks like in the Storyboard
My component's constraints in the view controller
My intention was to use Auto Layout, anchor the label to top and leading anchors of the view, anchor the textfield to top of the view and trailing anchor of the label with a constant, so they would appear side by side.
I did do a lot of research on this, one site that looked pretty close to what I wanted was https://www.raywenderlich.com/125718/coding-auto-layout, and I think I am following more or less the same approach.
I am doing something obviously wrong, but can't figure out what. Any help is much appreciated, I have been at this for a few days now.
import UIKit
#IBDesignable
class OTextEdit: UIView {
#IBInspectable var LabelText: String = "Label"
#IBInspectable var SecureText: Bool = false
#IBInspectable var Color: UIColor = UIColor.black
#IBInspectable var Text: String = "" {
didSet {
edit.text = Text
}
}
fileprivate let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 35))
fileprivate let edit = UITextField(frame: CGRect(x: 210, y: 0, width: 200, height: 35))
fileprivate let line: UIView = UIView()
override var intrinsicContentSize: CGSize {
return CGSize(width: 300, height: 100)
}
func setup() {
label.text = LabelText
label.textColor = Color
label.font = UIFont(name: "Avenir Next Condensed", size: 24)
edit.font = UIFont(name: "Avenir Next Condensed", size: 24)
edit.borderStyle = .roundedRect
edit.isSecureTextEntry = SecureText
line.backgroundColor = UIColor.white
self.addSubview(label)
self.addSubview(edit)
self.addSubview(line)
}
override func willMove(toSuperview newSuperview: UIView?) {
super.willMove(toSuperview: newSuperview)
setup()
setupConstaints()
}
func setupConstaints() {
label.translatesAutoresizingMaskIntoConstraints = false
edit.translatesAutoresizingMaskIntoConstraints = false
line.translatesAutoresizingMaskIntoConstraints = false
label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: -10).isActive = true
label.topAnchor.constraint(equalTo: topAnchor)
edit.leadingAnchor.constraint(equalTo: label.leadingAnchor, constant: 10).isActive = true
edit.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true
edit.topAnchor.constraint(equalTo: self.topAnchor)
line.heightAnchor.constraint(equalToConstant: 2.0).isActive = true
line.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10).isActive = true
line.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true
line.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 1.0).isActive = true
}
}
You haven't got a series of constraints top to bottom, so auto layout can't determine the content size of your object. You have tried to set this via the initrinsicContentSize but you shouldn't need to do this.
You also need to set a horizontal hugging priority for your label to let auto layout know that you want the text field to expand:
I removed your override of intrinsicContentSize and changed your constraints to:
Constrain the bottom of the label to the top of the line
Constrain the bottom of the line to the bottom of the superview
Constrain the baseline of the label to the baseline of the text field
Remove the constraint between the top of the text field and the superview
Set the horizontal hugging priority of the label.
func setupConstraints() {
label.translatesAutoresizingMaskIntoConstraints = false
edit.translatesAutoresizingMaskIntoConstraints = false
line.translatesAutoresizingMaskIntoConstraints = false
label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
label.topAnchor.constraint(equalTo: topAnchor)
label.bottomAnchor.constraint(equalTo: line.topAnchor, constant: -8).isActive = true
edit.leadingAnchor.constraint(equalTo: label.trailingAnchor, constant: 10).isActive = true
edit.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true
edit.firstBaselineAnchor.constraint(equalTo: label.firstBaselineAnchor).isActive = true
line.heightAnchor.constraint(equalToConstant: 2.0).isActive = true
line.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10).isActive = true
line.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20).isActive = true
line.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 1.0).isActive = true
line.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
}
I think it is pretty close to what you are after.

Resources