CODEWITHSUNDEEP
iosswiftuiview
Mohammed Riyadh
Mohammed Riyadh

Reputation: 1019

How to update CustomView width with different devices

I have a custom Button with 2 Labels and Image as shown in below class 

import UIKit
@IBDesignable
class CustomButton : UIButton {


    let secondLine : UILabel = UILabel()

    override func layoutSubviews() {
        super.layoutSubviews()
       // self.layer.cornerRadius = 10
        self.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.25).cgColor
        self.layer.shadowOffset = CGSize(width: 0.0, height: 2.0)
        self.layer.shadowOpacity = 1.0
        self.layer.masksToBounds = false


    }

    @IBInspectable var rightLebelText : String?{
        didSet {
            updateView()
        }
    }

    func updateView(){

        if let mytext = rightLebelText {

            let firstLine = UILabel(frame: CGRect(x: self.bounds.size.width - 210, y: 0, width: 200, height: 40))
            firstLine.text = mytext
            firstLine.textAlignment = .right
            firstLine.font = UIFont.systemFont(ofSize: 20)
            self.addSubview(firstLine)
            var imageView : UIImageView
            imageView  = UIImageView(frame:CGRect(x: 5, y: 10, width: 20, height: 20))
            imageView.image = UIImage(named:"arrow.png")
            self.addSubview(imageView)

        }

    }


    public func setSecondlabel(title : String){
        secondLine.removeFromSuperview()
        secondLine.frame = CGRect(x:  50, y: 0, width: 200, height: 40)
        secondLine.text = title
        secondLine.font = UIFont.boldSystemFont(ofSize: 20)
        secondLine.removeFromSuperview()
        self.addSubview(secondLine)
    }
}

My issue is my view size is not updating on different devices when using

self.bounds.size.width

for the firstLine label as shown in below image its position should be on the custom button right edge

enter image description here

Upvotes: 0

Views: 35

Answers (1)

deoKasuhal
deoKasuhal

Reputation: 2897

You need to override the layoutSubviews function have the frame of each element examine and update based on updated bounds of the custom view or assign proper layout constraints on each element while adding it.

If you are overriding the UIButton which has already a label and image property, you can use that one as well or create a custom class inherited from UIControl and create required three property as needed. I am adding an example of the custom class with image, title, and detail as shown in the problem. 

class CustomButton : UIControl {
    let imageView : UIImageView
    let titleLabel : UILabel
    let detailLabel : UILabel

    fileprivate func setup() {
        self.detailLabel.textAlignment = .right
        self.detailLabel.font = UIFont.systemFont(ofSize: 20)
        self.detailLabel.textColor = UIColor.black
        self.titleLabel.font = UIFont.boldSystemFont(ofSize: 20)
        self.titleLabel.textColor = UIColor.black
        self.backgroundColor = UIColor.white
        self.addSubview(self.imageView)
        self.addSubview(self.titleLabel)
        self.addSubview(self.detailLabel)
    }

    override init(frame: CGRect) {
        self.imageView = UIImageView(frame: .zero)
        self.titleLabel = UILabel(frame: .zero)
        self.detailLabel = UILabel(frame: .zero)
        super.init(frame: frame)
        self.setup()
    }

    required init?(coder aDecoder: NSCoder) {
        self.imageView = UIImageView(frame: .zero)
        self.titleLabel = UILabel(frame: .zero)
        self.detailLabel = UILabel(frame: .zero)
        super.init(coder: aDecoder)
         self.setup()
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        self.imageView.frame = CGRect(x: 5.0, y: self.bounds.midY - 10.0, width: 20.0, height: 20.0)

        //You can make this width dynamic if you want to calculate width of text using self.detailLabel.text
        var width : CGFloat = 200.0
        self.titleLabel.frame = CGRect(x: self.imageView.frame.maxX + 5.0, y: self.bounds.minY, width: 200.0, height: self.bounds.height)
        //Give the remaining space to the second label
        width = self.bounds.width - (self.titleLabel.frame.maxX + 15.0)
        self.detailLabel.frame = CGRect(x: self.titleLabel.frame.maxX + 5.0, y: self.bounds.minY, width: width, height: self.bounds.height)
    }

}

Upvotes: 1

Related Questions