Adding a partial mask over an UIImageView - swift

I want to add a 0.5 alpha mask over just one part of an image (that I will calculate in code).
Basically, it's a 5-star rating control, but the stars are not one color, but some nice images like this:
The image has a transparent background that I need to respect. So I'd like to be able to add a mask or to somehow set the alpha of just half of the image for example, when your rating is 3.5. (2 full stars and one with half of it with less alpha)
I can't just put a UIView over it with 0.5 alpha, because that will also impact with the background where the stars are displayed.
Any ideas?

You can use a CAGradientLayer as a mask:
gLayer.startPoint = CGPoint.zero
gLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
gLayer.locations = [
0.0, 0.5, 0.5, 1.0,
]
gLayer.colors = [
UIColor.black.cgColor,
UIColor.black.cgColor,
UIColor.black.withAlphaComponent(0.5).cgColor,
UIColor.black.withAlphaComponent(0.5).cgColor,
]
This would create a horizontal gradient, with the left half full alpha and the right half 50% alpha.
So, a white view with this as a mask would look like this:
If we set the image to your star, it looks like this:
If we want the star to be "75% filled" we change the locations:
gLayer.locations = [
0.0, 0.75, 0.75, 1.0,
]
resulting in:
Here is an example implementation for a "Five Star" rating view:
#IBDesignable
class FiveStarRatingView: UIView {
#IBInspectable
public var rating: CGFloat = 0.0 {
didSet {
var r = rating
stack.arrangedSubviews.forEach {
if let v = $0 as? PercentImageView {
v.percent = min(1.0, r)
r -= 1.0
}
}
}
}
#IBInspectable
public var ratingImage: UIImage = UIImage() {
didSet {
stack.arrangedSubviews.forEach {
if let v = $0 as? PercentImageView {
v.image = ratingImage
}
}
}
}
#IBInspectable
public var tranparency: CGFloat = 0.5 {
didSet {
stack.arrangedSubviews.forEach {
if let v = $0 as? PercentImageView {
v.tranparency = tranparency
}
}
}
}
override var intrinsicContentSize: CGSize {
return CGSize(width: 100.0, height: 20.0)
}
private let stack: UIStackView = {
let v = UIStackView()
v.axis = .horizontal
v.alignment = .center
v.distribution = .fillEqually
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
private func commonInit() -> Void {
addSubview(stack)
// constrain stack view to all 4 sides
NSLayoutConstraint.activate([
stack.topAnchor.constraint(equalTo: topAnchor),
stack.leadingAnchor.constraint(equalTo: leadingAnchor),
stack.trailingAnchor.constraint(equalTo: trailingAnchor),
stack.bottomAnchor.constraint(equalTo: bottomAnchor),
])
// add 5 Percent Image Views to the stack view
for _ in 1...5 {
let v = PercentImageView(frame: .zero)
stack.addArrangedSubview(v)
v.heightAnchor.constraint(equalTo: v.widthAnchor).isActive = true
}
}
private class PercentImageView: UIImageView {
var percent: CGFloat = 0.0 {
didSet {
setNeedsLayout()
}
}
var tranparency: CGFloat = 0.5 {
didSet {
setNeedsLayout()
}
}
private let gLayer = CAGradientLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() -> Void {
gLayer.startPoint = CGPoint.zero
gLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
layer.mask = gLayer
}
override func layoutSubviews() {
super.layoutSubviews()
// we don't want the layer's intrinsic animation
CATransaction.begin()
CATransaction.setDisableActions(true)
gLayer.frame = bounds
gLayer.locations = [
0.0, percent as NSNumber, percent as NSNumber, 1.0,
]
gLayer.colors = [
UIColor.black.cgColor,
UIColor.black.cgColor,
UIColor.black.withAlphaComponent(tranparency).cgColor,
UIColor.black.withAlphaComponent(tranparency).cgColor,
]
CATransaction.commit()
}
}
}
class StarRatingViewController: UIViewController {
let ratingView = FiveStarRatingView()
let slider = UISlider()
let valueLabel = UILabel()
override func viewDidLoad() {
super.viewDidLoad()
guard let starImage = UIImage(named: "star") else {
fatalError("Could not load image named \"star\"")
}
// add a slider and a couple labels so we can change the rating
let minLabel = UILabel()
let maxLabel = UILabel()
[slider, valueLabel, minLabel, maxLabel].forEach {
view.addSubview($0)
$0.translatesAutoresizingMaskIntoConstraints = false
if let v = $0 as? UILabel {
v.textAlignment = .center
}
}
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
valueLabel.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
valueLabel.centerXAnchor.constraint(equalTo: g.centerXAnchor),
slider.topAnchor.constraint(equalTo: valueLabel.bottomAnchor, constant: 8.0),
slider.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 32.0),
slider.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -32.0),
minLabel.topAnchor.constraint(equalTo: slider.bottomAnchor, constant: 8.0),
minLabel.centerXAnchor.constraint(equalTo: slider.leadingAnchor, constant: 0.0),
maxLabel.topAnchor.constraint(equalTo: slider.bottomAnchor, constant: 8.0),
maxLabel.centerXAnchor.constraint(equalTo: slider.trailingAnchor, constant: 0.0),
])
minLabel.text = "0"
maxLabel.text = "5"
ratingView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(ratingView)
NSLayoutConstraint.activate([
// constrain the rating view centered in the view
// 300-pts wide
// height will be auto-set by the rating view
ratingView.topAnchor.constraint(equalTo: minLabel.bottomAnchor, constant: 20.0),
ratingView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
ratingView.widthAnchor.constraint(equalToConstant: 240.0),
])
// use the star image
ratingView.ratingImage = starImage
// start at rating of 0 stars
updateValue(0.0)
slider.value = 0
slider.addTarget(self, action: #selector(self.sliderChanged(_:)), for: .valueChanged)
}
#objc func sliderChanged(_ sender: UISlider) {
// round the slider value to 2 decimal places
updateValue((sender.value * 5.0).rounded(digits: 2))
}
func updateValue(_ v: Float) -> Void {
valueLabel.text = String(format: "%.2f", v)
ratingView.rating = CGFloat(v)
}
}
extension Float {
func rounded(digits: Int) -> Float {
let multiplier = Float(pow(10.0, Double(digits)))
return (self * multiplier).rounded() / multiplier
}
}
Result:
Note that the FiveStarRatingView class is marked #IBDesignable so you can add it in Storyboard / IB and set image, amount of transparency and rating at design-time.

Related

Need to make a grid this on UIKit using a UICollectionView

I want to make a grid in the photo. How can I achieve this? Can you tell me where to look? Googled everything but found nothing, except through CoreGraphics, but that's not an option I'm considering.
Here's a really quick example using a CAShapeLayer...
UIImageView subclass
class GridImageView: UIImageView {
public var numRows: Int = 1
public var numColumns: Int = 1
private let gridLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
override init(image: UIImage?) {
super.init(image: image)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() {
layer.addSublayer(gridLayer)
gridLayer.strokeColor = UIColor.white.cgColor
gridLayer.fillColor = UIColor.clear.cgColor
gridLayer.lineWidth = 1
}
override func layoutSubviews() {
super.layoutSubviews()
if numRows == 1 && numColumns == 1 {
// no need to draw any lines
gridLayer.path = nil
return
}
let bez = UIBezierPath()
if numRows > 1 {
let yIncrement: CGFloat = bounds.height / CGFloat(numRows)
var y: CGFloat = yIncrement
for _ in 0..<numRows-1 {
bez.move(to: CGPoint(x: bounds.minX, y: y))
bez.addLine(to: CGPoint(x: bounds.maxX, y: y))
y += yIncrement
}
}
if numColumns > 1 {
let xIncrement: CGFloat = bounds.width / CGFloat(numColumns)
var x: CGFloat = xIncrement
for _ in 0..<numColumns-1 {
bez.move(to: CGPoint(x: x, y: bounds.minY))
bez.addLine(to: CGPoint(x: x, y: bounds.maxY))
x += xIncrement
}
}
gridLayer.path = bez.cgPath
}
}
Example Controller
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemYellow
guard let img = UIImage(named: "beach") else { return }
let imgView = GridImageView(image: img)
imgView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(imgView)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
imgView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
imgView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
imgView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width)
])
imgView.numRows = 4
imgView.numColumns = 3
}
}
Output (using a random beach jpg):
Edit - after further comments on OP...
To get the "effect" from the video you posted, we can simply add a "grid overlay view" on top of the scroll view.
So, we'll use an almost identical subclassed UIView:
class GridOverlayView: UIView {
public var lineColor: UIColor = .white { didSet { setNeedsLayout() } }
public var numRows: Int = 1 { didSet { setNeedsLayout() } }
public var numColumns: Int = 1 { didSet { setNeedsLayout() } }
private let gridLayer = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
func commonInit() {
layer.addSublayer(gridLayer)
gridLayer.fillColor = UIColor.clear.cgColor
gridLayer.lineWidth = 1
}
override func layoutSubviews() {
super.layoutSubviews()
if numRows == 1 && numColumns == 1 {
// no need to draw any lines
gridLayer.path = nil
return
}
let bez = UIBezierPath()
if numRows > 1 {
let yIncrement: CGFloat = bounds.height / CGFloat(numRows)
var y: CGFloat = yIncrement
for _ in 0..<numRows-1 {
bez.move(to: CGPoint(x: bounds.minX, y: y))
bez.addLine(to: CGPoint(x: bounds.maxX, y: y))
y += yIncrement
}
}
if numColumns > 1 {
let xIncrement: CGFloat = bounds.width / CGFloat(numColumns)
var x: CGFloat = xIncrement
for _ in 0..<numColumns-1 {
bez.move(to: CGPoint(x: x, y: bounds.minY))
bez.addLine(to: CGPoint(x: x, y: bounds.maxY))
x += xIncrement
}
}
gridLayer.strokeColor = lineColor.cgColor
gridLayer.path = bez.cgPath
}
}
with this "beach" image:
and this controller class with a scroll view:
class GridScrollTestVC: UIViewController, UIScrollViewDelegate {
let imgView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemYellow
guard let img = UIImage(named: "beach") else { return }
imgView.image = img
let scrollView = UIScrollView()
scrollView.backgroundColor = .red
scrollView.delegate = self
imgView.translatesAutoresizingMaskIntoConstraints = false
scrollView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(scrollView)
scrollView.addSubview(imgView)
let g = view.safeAreaLayoutGuide
let cg = scrollView.contentLayoutGuide
let fg = scrollView.frameLayoutGuide
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
imgView.topAnchor.constraint(equalTo: cg.topAnchor, constant: 0.0),
imgView.leadingAnchor.constraint(equalTo: cg.leadingAnchor, constant: 0.0),
imgView.trailingAnchor.constraint(equalTo: cg.trailingAnchor, constant: 0.0),
imgView.bottomAnchor.constraint(equalTo: cg.bottomAnchor, constant: 0.0),
imgView.widthAnchor.constraint(equalTo: fg.widthAnchor),
imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width)
])
scrollView.minimumZoomScale = 1.0
scrollView.maximumZoomScale = 5.0
// now let's add the grid "overlay"
let gridView = GridOverlayView()
gridView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(gridView)
gridView.numRows = 4
gridView.numColumns = 3
gridView.lineColor = .black
NSLayoutConstraint.activate([
gridView.topAnchor.constraint(equalTo: scrollView.topAnchor),
gridView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
gridView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
gridView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
])
// don't let the grid overlay view interfere with the scrolling/zooming
gridView.isUserInteractionEnabled = false
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return imgView
}
}
and we get this output:
and after zooming in a bit:

Highlighter: How to use CALayer to adjust superview's alpha like a highlighter

These buttons represent sets, each set can be...
Empty: "K7s" is empty and represented by K7s.alpha = 0.4
Full: "Q7s" is full and represented by Q7s.alpha = 1.0 & borderWidth = 2
or
Partially Filled: "J7s" is a partially filled set, represented by adding the smaller frame. I'd like this smaller frame to be a CALayer that adjusts the SuperLayer(J7s)'s alpha to 1.0 inside the new layer's bounds. The result would appear as...
let highlighterLayer = CALayer()
highlighterLayer.borderWidth = 1
highlighterLayer.bounds = CGRect(x: 0, y: 0, width: buttonSize.width, height: percentHeight)
Buttons[tag].layer.addSublayer(highlighterLayer)
highlighterLayer.position = CGPoint(x: Buttons[tag].bounds.midX, y: Buttons[tag].bounds.midY)
Highlights[tag] = highlighterLayer
We cannot do something with a sublayer that will "adjust" the superlayer's alpha.
However, you can add a sublayer and change its alpha and border width.
Quick example -- UIButton subclass:
class SomeButton: UIButton {
public var fillPct: CGFloat = 0 {
didSet {
setNeedsLayout()
}
}
public var highlightColor: UIColor = .green
private let highlighterLayer = CALayer()
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
private func commonInit() {
highlighterLayer.borderColor = UIColor.black.cgColor
layer.addSublayer(highlighterLayer)
}
override func layoutSubviews() {
super.layoutSubviews()
var r = bounds
r.size.height *= fillPct
highlighterLayer.frame = r
highlighterLayer.position = CGPoint(x: bounds.midX, y: bounds.midY)
highlighterLayer.borderWidth = 2.0 * fillPct
highlighterLayer.backgroundColor = highlightColor.withAlphaComponent(fillPct).cgColor
}
}
and a demo controller - each tap of the "Cycle Values" button will cycle through a few sets of example "fill percentage" values:
class HighlightButtonTestVC: UIViewController {
var btns: [SomeButton] = []
var demoVals: [[CGFloat]] = [
[0.0, 1.0, 0.5],
[1.0, 0.5, 0.0],
[0.5, 0.5, 1.0],
]
var valsIdx: Int = 0
override func viewDidLoad() {
super.viewDidLoad()
let stackView = UIStackView()
stackView.backgroundColor = UIColor(red: 0.0, green: 0.4, blue: 0.0, alpha: 1.0)
stackView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(stackView)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
stackView.topAnchor.constraint(equalTo: g.topAnchor, constant: 40.0),
stackView.heightAnchor.constraint(equalToConstant: 60.0),
stackView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
])
["K7s", "Q7s", "J7s"].forEach { str in
let b = SomeButton()
b.setTitle(str, for: [])
b.setTitleColor(.black, for: .normal)
b.setTitleColor(.lightGray, for: .highlighted)
stackView.addArrangedSubview(b)
btns.append(b)
}
for i in 0..<3 {
btns[i].fillPct = demoVals[0][i]
}
let vBtn = UIButton(type: .system)
vBtn.setTitle("Cycle Values", for: [])
vBtn.addTarget(self, action: #selector(cycleVals), for: .touchUpInside)
vBtn.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(vBtn)
NSLayoutConstraint.activate([
vBtn.topAnchor.constraint(equalTo: stackView.bottomAnchor, constant: 20.0),
vBtn.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
vBtn.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
])
}
#objc func cycleVals() {
valsIdx += 1
for i in 0..<3 {
btns[i].fillPct = demoVals[valsIdx % 3][i]
}
}
}
The result - for value sets:
[0.0, 1.0, 0.5],
[1.0, 0.5, 0.0],
[0.5, 0.5, 1.0],
is:

Sizing UIButton depending on length of titleLabel

So I have a UIButton and I'm setting the title in it to a string that is dynamic in length. I want the width of the titleLabel to be half of the screen width. I've tried using .sizeToFit() but this causes the button to use the CGSize before the constraint was applied to the titleLabel. I tried using .sizeThatFits(button.titleLabel?.intrinsicContentSize) but this also didn't work. I think the important functions below are the init() & presentCallout(), but I'm showing the entire class just for a more complete understanding. The class I'm playing with looks like:
class CustomCalloutView: UIView, MGLCalloutView {
var representedObject: MGLAnnotation
// Allow the callout to remain open during panning.
let dismissesAutomatically: Bool = false
let isAnchoredToAnnotation: Bool = true
// https://github.com/mapbox/mapbox-gl-native/issues/9228
override var center: CGPoint {
set {
var newCenter = newValue
newCenter.y -= bounds.midY
super.center = newCenter
}
get {
return super.center
}
}
lazy var leftAccessoryView = UIView() /* unused */
lazy var rightAccessoryView = UIView() /* unused */
weak var delegate: MGLCalloutViewDelegate?
let tipHeight: CGFloat = 10.0
let tipWidth: CGFloat = 20.0
let mainBody: UIButton
required init(representedObject: MGLAnnotation) {
self.representedObject = representedObject
self.mainBody = UIButton(type: .system)
super.init(frame: .zero)
backgroundColor = .clear
mainBody.backgroundColor = .white
mainBody.tintColor = .black
mainBody.contentEdgeInsets = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
mainBody.layer.cornerRadius = 4.0
addSubview(mainBody)
// I thought this would work, but it doesn't.
// mainBody.translatesAutoresizingMaskIntoConstraints = false
// mainBody.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
// mainBody.leftAnchor.constraint(equalTo: self.rightAnchor).isActive = true
// mainBody.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
// mainBody.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
}
required init?(coder decoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: - MGLCalloutView API
func presentCallout(from rect: CGRect, in view: UIView, constrainedTo constrainedRect: CGRect, animated: Bool) {
delegate?.calloutViewWillAppear?(self)
view.addSubview(self)
// Prepare title label.
mainBody.setTitle(representedObject.title!, for: .normal)
mainBody.titleLabel?.lineBreakMode = .byWordWrapping
mainBody.titleLabel?.numberOfLines = 0
mainBody.sizeToFit()
if isCalloutTappable() {
// Handle taps and eventually try to send them to the delegate (usually the map view).
mainBody.addTarget(self, action: #selector(CustomCalloutView.calloutTapped), for: .touchUpInside)
} else {
// Disable tapping and highlighting.
mainBody.isUserInteractionEnabled = false
}
// Prepare our frame, adding extra space at the bottom for the tip.
let frameWidth = mainBody.bounds.size.width
let frameHeight = mainBody.bounds.size.height + tipHeight
let frameOriginX = rect.origin.x + (rect.size.width/2.0) - (frameWidth/2.0)
let frameOriginY = rect.origin.y - frameHeight
frame = CGRect(x: frameOriginX, y: frameOriginY, width: frameWidth, height: frameHeight)
if animated {
alpha = 0
UIView.animate(withDuration: 0.2) { [weak self] in
guard let strongSelf = self else {
return
}
strongSelf.alpha = 1
strongSelf.delegate?.calloutViewDidAppear?(strongSelf)
}
} else {
delegate?.calloutViewDidAppear?(self)
}
}
func dismissCallout(animated: Bool) {
if (superview != nil) {
if animated {
UIView.animate(withDuration: 0.2, animations: { [weak self] in
self?.alpha = 0
}, completion: { [weak self] _ in
self?.removeFromSuperview()
})
} else {
removeFromSuperview()
}
}
}
// MARK: - Callout interaction handlers
func isCalloutTappable() -> Bool {
if let delegate = delegate {
if delegate.responds(to: #selector(MGLCalloutViewDelegate.calloutViewShouldHighlight)) {
return delegate.calloutViewShouldHighlight!(self)
}
}
return false
}
#objc func calloutTapped() {
if isCalloutTappable() && delegate!.responds(to: #selector(MGLCalloutViewDelegate.calloutViewTapped)) {
delegate!.calloutViewTapped!(self)
}
}
// MARK: - Custom view styling
override func draw(_ rect: CGRect) {
// Draw the pointed tip at the bottom.
let fillColor: UIColor = .white
let tipLeft = rect.origin.x + (rect.size.width / 2.0) - (tipWidth / 2.0)
let tipBottom = CGPoint(x: rect.origin.x + (rect.size.width / 2.0), y: rect.origin.y + rect.size.height)
let heightWithoutTip = rect.size.height - tipHeight - 1
let currentContext = UIGraphicsGetCurrentContext()!
let tipPath = CGMutablePath()
tipPath.move(to: CGPoint(x: tipLeft, y: heightWithoutTip))
tipPath.addLine(to: CGPoint(x: tipBottom.x, y: tipBottom.y))
tipPath.addLine(to: CGPoint(x: tipLeft + tipWidth, y: heightWithoutTip))
tipPath.closeSubpath()
fillColor.setFill()
currentContext.addPath(tipPath)
currentContext.fillPath()
}
}
This is what it looks like for a short title and a long title. When the title gets too long, I want the text to wrap and the bubble to get a taller height. As you can see in the image set below, the first 'Short Name' works fine as a map annotation bubble. When the name gets super long though, it just widens the bubble to the point it goes off the screen.
https://imgur.com/a/I5z0zUd
Any help on how to fix is much appreciated. Thanks!
To enable word-wrapping to multiple lines in a UIButton, you need to create your own button subclass.
For example:
class MultilineTitleButton: UIButton {
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
func commonInit() -> Void {
self.titleLabel?.numberOfLines = 0
self.titleLabel?.textAlignment = .center
self.setContentHuggingPriority(UILayoutPriority.defaultLow + 1, for: .vertical)
self.setContentHuggingPriority(UILayoutPriority.defaultLow + 1, for: .horizontal)
}
override var intrinsicContentSize: CGSize {
let size = self.titleLabel!.intrinsicContentSize
return CGSize(width: size.width + contentEdgeInsets.left + contentEdgeInsets.right, height: size.height + contentEdgeInsets.top + contentEdgeInsets.bottom)
}
override func layoutSubviews() {
super.layoutSubviews()
titleLabel?.preferredMaxLayoutWidth = self.titleLabel!.frame.size.width
}
}
That button will wrap the title onto multiple lines, cooperating with auto-layout / constraints.
I don't have any projects with MapBox, but here is an example using a modified version of your CustomCalloutView. I commented out any MapBox specific code. You may be able to un-comment those lines and use this as-is:
class CustomCalloutView: UIView { //}, MGLCalloutView {
//var representedObject: MGLAnnotation
var repTitle: String = ""
// Allow the callout to remain open during panning.
let dismissesAutomatically: Bool = false
let isAnchoredToAnnotation: Bool = true
// https://github.com/mapbox/mapbox-gl-native/issues/9228
// NOTE: this causes a vertical shift when NOT using MapBox
// override var center: CGPoint {
// set {
// var newCenter = newValue
// newCenter.y -= bounds.midY
// super.center = newCenter
// }
// get {
// return super.center
// }
// }
lazy var leftAccessoryView = UIView() /* unused */
lazy var rightAccessoryView = UIView() /* unused */
//weak var delegate: MGLCalloutViewDelegate?
let tipHeight: CGFloat = 10.0
let tipWidth: CGFloat = 20.0
let mainBody: UIButton
var anchorView: UIView!
override func willMove(toSuperview newSuperview: UIView?) {
if newSuperview == nil {
anchorView.removeFromSuperview()
}
}
//required init(representedObject: MGLAnnotation) {
required init(title: String) {
self.repTitle = title
self.mainBody = MultilineTitleButton()
super.init(frame: .zero)
backgroundColor = .clear
mainBody.backgroundColor = .white
mainBody.setTitleColor(.black, for: [])
mainBody.tintColor = .black
mainBody.contentEdgeInsets = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
mainBody.layer.cornerRadius = 4.0
addSubview(mainBody)
mainBody.translatesAutoresizingMaskIntoConstraints = false
let padding: CGFloat = 8.0
NSLayoutConstraint.activate([
mainBody.topAnchor.constraint(equalTo: self.topAnchor, constant: padding),
mainBody.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: padding),
mainBody.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -padding),
mainBody.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -padding),
])
}
required init?(coder decoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: - MGLCalloutView API
func presentCallout(from rect: CGRect, in view: UIView, constrainedTo constrainedRect: CGRect, animated: Bool) {
//delegate?.calloutViewWillAppear?(self)
// since we'll be using auto-layout for the mutli-line button
// we'll add an "anchor view" to the superview
// it will be removed when self is removed
anchorView = UIView(frame: rect)
anchorView.isUserInteractionEnabled = false
anchorView.backgroundColor = .clear
view.addSubview(anchorView)
view.addSubview(self)
// Prepare title label.
//mainBody.setTitle(representedObject.title!, for: .normal)
mainBody.setTitle(self.repTitle, for: .normal)
// if isCalloutTappable() {
// // Handle taps and eventually try to send them to the delegate (usually the map view).
// mainBody.addTarget(self, action: #selector(CustomCalloutView.calloutTapped), for: .touchUpInside)
// } else {
// // Disable tapping and highlighting.
// mainBody.isUserInteractionEnabled = false
// }
self.translatesAutoresizingMaskIntoConstraints = false
anchorView.autoresizingMask = [.flexibleTopMargin, .flexibleLeftMargin, .flexibleRightMargin, .flexibleBottomMargin]
NSLayoutConstraint.activate([
self.centerXAnchor.constraint(equalTo: anchorView.centerXAnchor),
self.bottomAnchor.constraint(equalTo: anchorView.topAnchor),
self.widthAnchor.constraint(lessThanOrEqualToConstant: constrainedRect.width),
])
if animated {
alpha = 0
UIView.animate(withDuration: 0.2) { [weak self] in
guard let strongSelf = self else {
return
}
strongSelf.alpha = 1
//strongSelf.delegate?.calloutViewDidAppear?(strongSelf)
}
} else {
//delegate?.calloutViewDidAppear?(self)
}
}
func dismissCallout(animated: Bool) {
if (superview != nil) {
if animated {
UIView.animate(withDuration: 0.2, animations: { [weak self] in
self?.alpha = 0
}, completion: { [weak self] _ in
self?.removeFromSuperview()
})
} else {
removeFromSuperview()
}
}
}
// MARK: - Callout interaction handlers
// func isCalloutTappable() -> Bool {
// if let delegate = delegate {
// if delegate.responds(to: #selector(MGLCalloutViewDelegate.calloutViewShouldHighlight)) {
// return delegate.calloutViewShouldHighlight!(self)
// }
// }
// return false
// }
//
// #objc func calloutTapped() {
// if isCalloutTappable() && delegate!.responds(to: #selector(MGLCalloutViewDelegate.calloutViewTapped)) {
// delegate!.calloutViewTapped!(self)
// }
// }
// MARK: - Custom view styling
override func draw(_ rect: CGRect) {
print(#function)
// Draw the pointed tip at the bottom.
let fillColor: UIColor = .red
let tipLeft = rect.origin.x + (rect.size.width / 2.0) - (tipWidth / 2.0)
let tipBottom = CGPoint(x: rect.origin.x + (rect.size.width / 2.0), y: rect.origin.y + rect.size.height)
let heightWithoutTip = rect.size.height - tipHeight - 1
let currentContext = UIGraphicsGetCurrentContext()!
let tipPath = CGMutablePath()
tipPath.move(to: CGPoint(x: tipLeft, y: heightWithoutTip))
tipPath.addLine(to: CGPoint(x: tipBottom.x, y: tipBottom.y))
tipPath.addLine(to: CGPoint(x: tipLeft + tipWidth, y: heightWithoutTip))
tipPath.closeSubpath()
fillColor.setFill()
currentContext.addPath(tipPath)
currentContext.fillPath()
}
}
Here is a sample view controller showing that "Callout View" with various length titles, restricted to 70% of the width of the view:
class CalloutTestVC: UIViewController {
let sampleTitles: [String] = [
"Short Title",
"Slightly Longer Title",
"A ridiculously long title that will need to wrap!",
]
var idx: Int = -1
let tapView = UIView()
var ccv: CustomCalloutView!
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor(red: 0.8939146399, green: 0.8417750597, blue: 0.7458069921, alpha: 1)
tapView.backgroundColor = .systemBlue
tapView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(tapView)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
tapView.centerYAnchor.constraint(equalTo: g.centerYAnchor),
tapView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
tapView.widthAnchor.constraint(equalToConstant: 60),
tapView.heightAnchor.constraint(equalTo: tapView.widthAnchor),
])
// tap the Blue View to cycle through Sample Titles for the Callout View
// using the Blue view as the "anchor rect"
let t = UITapGestureRecognizer(target: self, action: #selector(gotTap))
tapView.addGestureRecognizer(t)
}
#objc func gotTap() -> Void {
if ccv != nil {
ccv.removeFromSuperview()
}
// increment sampleTitles array index
// to cycle through the strings
idx += 1
let validIdx = idx % sampleTitles.count
let str = sampleTitles[validIdx]
// create a new Callout view
ccv = CustomCalloutView(title: str)
// to restrict the "callout view" width to less-than 1/2 the screen width
// use view.width * 0.5 for the constrainedTo width
// may look better restricting it to 70%
ccv.presentCallout(from: tapView.frame, in: self.view, constrainedTo: CGRect(x: 0, y: 0, width: view.frame.size.width * 0.7, height: 100), animated: false)
}
}
It looks like this:
The UIButton class owns the titleLabel and is going to position and set the constraints on that label itself. More likely than not you are going to have to create a subclass of UIButton and override its "updateConstraints" method to position the titleLabel where you want it to go.
Your code should probably not be basing the size of the button off the size of the screen. It might set the size of off some other view in your hierarchy that happens to be the size of the screen but grabbing the screen bounds in the middle of setting a view's size is unusual.

How can I position these UIView elements from the right using CGRect to position

I have a UIView sub class that allows me to create a group of 'tags' for the footer of some content. At the moment however they are position aligned to the left edge, I would like them to be positioned from the right.
I have included a playground below that should run the screen shot you can see.
The position is set within the layoutSubviews method of CloudTagView.
I tried to play around with their position but have not been able to start them from the right however.
import UIKit
import PlaygroundSupport
// CLOUD VIEW WRAPPER - THIS IS THE CONTAINER FOR THE TAGS AND SETS UP THEIR FRAME
class CloudTagView: UIView {
weak var delegate: TagViewDelegate?
override var intrinsicContentSize: CGSize {
return frame.size
}
var removeOnDismiss = true
var resizeToFit = true
var tags = [TagView]() {
didSet {
layoutSubviews()
}
}
var padding = 5 {
didSet {
layoutSubviews()
}
}
var maxLengthPerTag = 0 {
didSet {
layoutSubviews()
}
}
public override init(frame: CGRect) {
super.init(frame: frame)
isUserInteractionEnabled = true
clipsToBounds = true
}
public required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
isUserInteractionEnabled = true
clipsToBounds = true
}
override func layoutSubviews() {
for tag in subviews {
tag.removeFromSuperview()
}
var xAxis = padding
var yAxis = padding
var maxHeight = 0
for (index, tag) in tags.enumerated() {
setMaxLengthIfNeededIn(tag)
tag.delegate = self
if index == 0 {
maxHeight = Int(tag.frame.height)
}else{
let expectedWidth = xAxis + Int(tag.frame.width) + padding
if expectedWidth > Int(frame.width) {
yAxis += maxHeight + padding
xAxis = padding
maxHeight = Int(tag.frame.height)
}
if Int(tag.frame.height) > maxHeight {
maxHeight = Int(tag.frame.height)
}
}
tag.frame = CGRect(x: xAxis, y: yAxis, width: Int(tag.frame.size.width), height: Int(tag.frame.size.height))
addSubview(tag)
tag.layoutIfNeeded()
xAxis += Int(tag.frame.width) + padding
}
if resizeToFit {
frame = CGRect(x: frame.origin.x, y: frame.origin.y, width: frame.size.width, height: CGFloat(yAxis + maxHeight + padding))
}
}
// MARK: Methods
fileprivate func setMaxLengthIfNeededIn(_ tag: TagView) {
if maxLengthPerTag > 0 && tag.maxLength != maxLengthPerTag {
tag.maxLength = maxLengthPerTag
}
}
}
// EVERYTHING BELOW HERE IS JUST SETUP / REQUIRED TO RUN IN PLAYGROUND
class ViewController:UIViewController{
let cloudView: CloudTagView = {
let view = CloudTagView(frame: .zero)
view.translatesAutoresizingMaskIntoConstraints = false
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
let tags = ["these", "are", "my", "tags"]
tags.forEach { tag in
let t = TagView(text: tag)
t.backgroundColor = .darkGray
t.tintColor = .white
cloudView.tags.append(t)
}
view.backgroundColor = .white
view.addSubview(cloudView)
NSLayoutConstraint.activate([
cloudView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
cloudView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
cloudView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
cloudView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
])
}
}
// Tag View
class TagView: UIView {
weak var delegate: TagViewDelegate?
var text = "" {
didSet {
layoutSubviews()
}
}
var marginTop = 5 {
didSet {
layoutSubviews()
}
}
var marginLeft = 10 {
didSet {
layoutSubviews()
}
}
var iconImage = UIImage(named: "close_tag_2", in: Bundle(for: CloudTagView.self), compatibleWith: nil) {
didSet {
layoutSubviews()
}
}
var maxLength = 0 {
didSet {
layoutSubviews()
}
}
override var backgroundColor: UIColor? {
didSet {
layoutSubviews()
}
}
override var tintColor: UIColor? {
didSet {
layoutSubviews()
}
}
var font: UIFont = UIFont.systemFont(ofSize: 12) {
didSet {
layoutSubviews()
}
}
fileprivate let dismissView: UIView
fileprivate let icon: UIImageView
fileprivate let textLabel: UILabel
public override init(frame: CGRect) {
dismissView = UIView()
icon = UIImageView()
textLabel = UILabel()
super.init(frame: frame)
isUserInteractionEnabled = true
addSubview(textLabel)
addSubview(icon)
addSubview(dismissView)
dismissView.isUserInteractionEnabled = true
textLabel.isUserInteractionEnabled = true
dismissView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(TagView.iconTapped)))
textLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(TagView.labelTapped)))
backgroundColor = UIColor(white: 0.0, alpha: 0.6)
tintColor = UIColor.white
}
public required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
public init(text: String) {
dismissView = UIView()
icon = UIImageView()
textLabel = UILabel()
super.init(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
isUserInteractionEnabled = true
addSubview(textLabel)
addSubview(icon)
addSubview(dismissView)
dismissView.isUserInteractionEnabled = true
textLabel.isUserInteractionEnabled = true
dismissView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(TagView.iconTapped)))
textLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(TagView.labelTapped)))
self.text = text
backgroundColor = UIColor(white: 0.0, alpha: 0.6)
tintColor = UIColor.white
}
override func layoutSubviews() {
icon.frame = CGRect(x: marginLeft, y: marginTop + 4, width: 8, height: 8)
icon.image = iconImage?.withRenderingMode(.alwaysTemplate)
icon.tintColor = tintColor
let textLeft: Int
if icon.image != nil {
dismissView.isUserInteractionEnabled = true
textLeft = marginLeft + Int(icon.frame.width ) + marginLeft / 2
} else {
dismissView.isUserInteractionEnabled = false
textLeft = marginLeft
}
textLabel.frame = CGRect(x: textLeft, y: marginTop, width: 100, height: 20)
textLabel.backgroundColor = UIColor(white: 0, alpha: 0.0)
if maxLength > 0 && text.count > maxLength {
textLabel.text = text.prefix(maxLength)+"..."
}else{
textLabel.text = text
}
textLabel.textAlignment = .center
textLabel.font = font
textLabel.textColor = tintColor
textLabel.sizeToFit()
let tagHeight = Int(max(textLabel.frame.height,14)) + marginTop * 2
let tagWidth = textLeft + Int(max(textLabel.frame.width,14)) + marginLeft
let dismissLeft = Int(icon.frame.origin.x) + Int(icon.frame.width) + marginLeft / 2
dismissView.frame = CGRect(x: 0, y: 0, width: dismissLeft, height: tagHeight)
frame = CGRect(x: Int(frame.origin.x), y: Int(frame.origin.y), width: tagWidth, height: tagHeight)
layer.cornerRadius = bounds.height / 2
}
// MARK: Actions
#objc func iconTapped(){
delegate?.tagDismissed?(self)
}
#objc func labelTapped(){
delegate?.tagTouched?(self)
}
}
// MARK: TagViewDelegate
#objc protocol TagViewDelegate {
#objc optional func tagTouched(_ tag: TagView)
#objc optional func tagDismissed(_ tag: TagView)
}
extension CloudTagView: TagViewDelegate {
public func tagDismissed(_ tag: TagView) {
delegate?.tagDismissed?(tag)
if removeOnDismiss {
if let index = tags.firstIndex(of: tag) {
tags.remove(at: index)
}
}
}
public func tagTouched(_ tag: TagView) {
delegate?.tagTouched?(tag)
}
}
let viewController = ViewController()
PlaygroundPage.current.liveView = viewController
PlaygroundPage.current.needsIndefiniteExecution = true
UIStackView can line subviews up in a row for you, including with trailing alignment. Here is a playground example:
import SwiftUI
import PlaygroundSupport
class V: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let tags = ["test", "testing", "test more"].map { word -> UIView in
let label = UILabel()
label.text = word
label.translatesAutoresizingMaskIntoConstraints = false
let background = UIView()
background.backgroundColor = .cyan
background.layer.cornerRadius = 8
background.clipsToBounds = true
background.addSubview(label)
NSLayoutConstraint.activate([
background.centerXAnchor.constraint(equalTo: label.centerXAnchor),
background.centerYAnchor.constraint(equalTo: label.centerYAnchor),
background.widthAnchor.constraint(equalTo: label.widthAnchor, constant: 16),
background.heightAnchor.constraint(equalTo: label.heightAnchor, constant: 16),
])
return background
}
let stack = UIStackView.init(arrangedSubviews: [UIView()] + tags)
stack.translatesAutoresizingMaskIntoConstraints = false
stack.axis = .horizontal
stack.alignment = .trailing
stack.spacing = 12
view.addSubview(stack)
NSLayoutConstraint.activate([
stack.topAnchor.constraint(equalTo: view.topAnchor),
stack.widthAnchor.constraint(equalTo: view.widthAnchor),
])
view.backgroundColor = .white
}
}
PlaygroundPage.current.liveView = V()

Swift imageview frame is equal to image original size

when creating an UIImageView with an Image, the view's frame is set to the image's original size. I would like to know it's actual size after all anchor constraints have been applied
I've tried different images and they all do the same thing.
The class with the issues is: SuggestionCloud;
I will explain the issue in three parts:
FIRST: the superclass that sets up all UI elements and invokes the "faulty' custom UIImage class (SuggestionCloud).
SECOND: The suggesionCloud Class
UIScaleControllerVew
Class UIScaleControllerView: UIViewController: {
let suggestionCloud : SuggenstionCloud = {
let cloud = SuggenstionCloud(image: UIImage(named: "suggestionCloud.png"))
cloud.translatesAutoresizingMaskIntoConstraints = false;
return cloud;
}();
override func viewDidLoad() {
super.viewDidLoad()
print("UIScaleController_DidLoad")
view.backgroundColor = UIColor(hexString: "8ED7F5")
view.addSubview(weigtImageView)
view.addSubview(textView)
view.addSubview(bottomMenu);
view.addSubview(suggestionCloud)
setUpLayout()
suggestionCloud.setLabels(weightedTags: stuff, selectedTags: selected)
}
extension UIScaleControllerVew {
func setUpLayout() {
// SuggestionCloud
suggestionCloud.setConstraints(
topAnchor: textView.bottomAnchor, topConstant: 0,
bottomAnchor: bottomMenu.topAnchor, bottomConstant: 0,
trailingAnchor: view.trailingAnchor, trailingConstant: 10,
leadingAnchor: view.leadingAnchor, leadingConstant: 10
//all UI elements are setup underneath..took those out for th
The suggestionCloud Class:
import UIKit
class SuggenstionCloud: UIImageView {
override init(image: UIImage?) {
super.init(image: image)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
public func setConstraints(
topAnchor : NSLayoutAnchor<NSLayoutYAxisAnchor>, topConstant: CGFloat,
bottomAnchor: NSLayoutAnchor<NSLayoutYAxisAnchor>, bottomConstant: CGFloat,
trailingAnchor: NSLayoutAnchor<NSLayoutXAxisAnchor>, trailingConstant: CGFloat,
leadingAnchor: NSLayoutAnchor<NSLayoutXAxisAnchor>, leadingConstant: CGFloat)
{
self.contentMode = .scaleToFill
self.topAnchor.constraint(equalTo: topAnchor, constant: topConstant).isActive = true;
self.bottomAnchor.constraint(equalTo: bottomAnchor, constant: bottomConstant).isActive = true;
self.trailingAnchor.constraint(equalTo: trailingAnchor, constant: trailingConstant).isActive = true;
self.leadingAnchor.constraint(equalTo: leadingAnchor, constant: leadingConstant).isActive = true;
}
public func setLabels(weightedTags: [String: Int], selectedTags: [String]) {
let buttons : [UIButton] = createButtons(weightedTags: weightedTags);
createLayout(buttons: buttons)
}
private func createButton(buttonText: String) -> UIButton {
let button = UIButton()
button.setTitle(buttonText, for: .normal)
button.titleLabel?.font = UIFont(name: "Avenir-Light", size: 20.0)
button.translatesAutoresizingMaskIntoConstraints = false;
button.backgroundColor = .blue
self.addSubview(button)
return button;
}
private func createButtons(weightedTags: [String: Int]) -> [UIButton] {
var buttons : [UIButton] = [];
for tag in weightedTags {
buttons.append(createButton(buttonText: tag.key))
}
return buttons;
}
private func createLayout(buttons : [UIButton]) {
if buttons.count == 0 { return }
let leftEdgePadding : CGFloat = 30;
let rightEdgePadding : CGFloat = 30;
let topPadding : CGFloat = 30;
let padding : CGFloat = 10;
let availableHeight : CGFloat = self.frame.height + (-2 * topPadding)
let availableWidth : CGFloat = self.frame.width + (-2 * padding)
var i = 0;
var totalHeight : CGFloat = 0;
var rowLength : CGFloat = 0;
var rowCount : Int = 0;
var lastButton : UIButton!
for button in buttons {
if totalHeight > availableHeight {print("Cloud out of space"); return}
if rowLength == 0 && rowCount == 0
{
setFirstConstraints(button: button, padding: topPadding)
totalHeight = button.intrinsicContentSize.height + topPadding;
rowLength += button.intrinsicContentSize.width + padding
lastButton = button;
}
else if rowLength + button.intrinsicContentSize.width < availableWidth
{
setConstraints(button, padding, topPadding, lastButton, rowCount)
rowLength += button.intrinsicContentSize.width + padding;
lastButton = button;
}
else
{
totalHeight += button.intrinsicContentSize.height + padding
setNewRowConstraint(button: button, padding: padding, totalHeight: totalHeight)
rowLength = 0;
rowCount += 1
lastButton = button
}
i += 1;
}
}
private func setNewRowConstraint(
button: UIButton,
padding: CGFloat,
totalHeight: CGFloat)
{
let totalPadding = button.intrinsicContentSize.height + padding + totalHeight
button.topAnchor.constraint(equalTo: self.topAnchor, constant: totalHeight).isActive = true
button.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: padding).isActive = true
}
private func setConstraints (
_ button : UIButton,
_ leftPadding: CGFloat,
_ topPadding: CGFloat ,
_ lastButton: UIButton,
_ rows: Int)
{
button.leadingAnchor.constraint(equalTo: lastButton.trailingAnchor, constant: leftPadding).isActive = true
button.topAnchor.constraint(equalTo: self.topAnchor, constant: topPadding).isActive = true
}
private func setFirstConstraints(button: UIButton, padding: CGFloat)
{
button.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: padding).isActive = true
button.topAnchor.constraint(equalTo: self.topAnchor, constant: padding ).isActive = true
}
}
THIRD: finally the issue:
I'm creating buttons dynamically to fit inside the view.
I have to set each buttion's anchors programmatically to fit their supeclass's . dimensions dynamically.
However: Inside my algorithm self.frame.size is : 800,800 : the original image size upon init().
let availableHeight : CGFloat = self.frame.height // = 800
let availableWidth : CGFloat = self.frame.width // 800 no bueno
The weird this is that the actual size of the UIView is correct in the Simulator. So the contraints work, but the Image view is not aware of it's actual dimensions
Could anyone help me figure this one out? What am i doing wrong?
Set labels is being called too soon. The frame isn't set by the time viewDidLoad is called. You need to wait until after viewDidLayoutSubviews/layoutSubviews. Using a flag and doing the set up in didLayoutSubviews should allow you to read the frame properly.
var didSetUpSuggestionCloud = false
override func viewDidLoad() {
super.viewDidLoad()
print("UIScaleController_DidLoad")
view.backgroundColor = UIColor(hexString: "8ED7F5")
view.addSubview(weigtImageView)
view.addSubview(textView)
view.addSubview(bottomMenu);
view.addSubview(suggestionCloud)
setUpLayout()
//make sure suggestionClouds setConstraints is called here
}
override func viewDidLayoutSubviews() {
guard !self.didSetUpSuggestionCloud else {
return
}
suggestionCloud.setLabels(weightedTags: stuff, selectedTags: selected)
self.didSetUpSuggestionCloud = true
}
A flag is necessary because viewDidLayoutSubviews can be called multiple times throughout a view controllers lifecycle.