I have a subclassed UILabel that I am going to be using for about 10 different labels of varying length (all on 1 line!) in IB. The text within each of these labels are static.
This subclassed UILabel should display an imageView to the left of the text. This imageView will hold a small icon.
It's close to working, except I'm getting odd truncating & alignment as seen from the screenshot below.
Simulator:
Storyboard setup:
Here's my code:
class ImageMarkLabel: UILabel {
var labelHeight:CGFloat = 0.0
let smileView = UIView()
let smileImageView = UIImageView()
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
self.commonInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.commonInit()
}
override func layoutSubviews() {
super.layoutSubviews()
uiStuff()
}
func uiStuff() {
labelHeight = self.frame.height
smileView.frame = CGRect(x: 0, y: 0, width: labelHeight, height: labelHeight)
smileImageView.image = UIImage(named: "smile")
smileImageView.frame = CGRect(x: 0, y: 0, width: smileView.frame.width, height: smileView.frame.height)
}
func commonInit(){
smileView.addSubview(smileImageView)
self.addSubview(smileView)
}
override func drawText(in rect: CGRect) {
var insets = UIEdgeInsets()
if UIDevice.current.userInterfaceIdiom == .pad {
insets = UIEdgeInsets(top: 0, left: labelHeight + 10.0, bottom: 0, right: labelHeight + 10.0)
}
else {
insets = UIEdgeInsets(top: 0, left: labelHeight + 5.0, bottom: 0, right: labelHeight + 5.0)
}
super.drawText(in: rect.inset(by: insets))
}
}
Regarding Auto Layout - all of the labels are within a vertical stack view.
How can I get the text & imageView to be centered without causing any text truncating?
Change you frame in UIStuff method ,
class ImageMarkLabel: UILabel {
var labelHeight:CGFloat = 0.0
let smileView = UIView()
let smileImageView = UIImageView()
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
self.commonInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.commonInit()
}
override func layoutSubviews() {
super.layoutSubviews()
uiStuff()
}
func uiStuff() {
labelHeight = self.frame.height
smileView.frame = CGRect(x: 0, y: 0, width: labelHeight, height: labelHeight)
smileImageView.image = UIImage(named: "smile")
smileImageView.frame = CGRect(x: 0, y: 0, width: smileView.frame.width, height: smileView.frame.height)
var insets = UIEdgeInsets()
if UIDevice.current.userInterfaceIdiom == .pad {
insets = UIEdgeInsets(top: 0, left: (labelHeight + 10.0), bottom: 0, right: (labelHeight + 10.0))
}
else {
insets = UIEdgeInsets(top: 0, left: (labelHeight + 5.0), bottom: 0, right: (labelHeight + 5.0))
}
let newRect = CGRect(origin: self.frame.origin, size: CGSize(width: self.frame.width + 2*insets.left, height: self.frame.height))
self.frame = newRect
}
func commonInit(){
smileView.addSubview(smileImageView)
self.addSubview(smileView)
}
override func drawText(in rect: CGRect) {
super.drawText(in: rect)
}
}
Output:
Related
Hello, I'm working on a UITextField now and as the image above shows, the text covers the clear button and I want to fix that.
In this text field, I added a padding on the left side of the text and the right side of the clear button.
class testTextField: UITextField {
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func commonInit() {
let leftPadding = UIView(frame: CGRect(x: 0, y: 0, width: 17, height: 0))
leftPadding.backgroundColor = .clear
self.leftView = leftPadding
self.leftViewMode = .always
// tried adding padding to the rightView, but it hide the clear button
// let rightPadding = UIView(frame: CGRect(x: 0, y: 0, width: 1, height: 0))
// rightPadding.backgroundColor = .red
// self.rightView = rightPadding
// self.rightViewMode = .always
self.backgroundColor = .white
self.borderStyle = .none
self.layer.cornerRadius = 12
self.font = UIFont.systemFont(ofSize: 16)
self.textColor = .black
self.clearButtonMode = .whileEditing
self.isUserInteractionEnabled = true
}
override func clearButtonRect(forBounds bounds: CGRect) -> CGRect {
let originalRect = super.clearButtonRect(forBounds: bounds)
return originalRect.offsetBy(dx: -22, dy: 0)
}
// also tried changing the width of the textRext, but after I implement the following code, the textfield becomes non-clickable...
// override func textRect(forBounds bounds: CGRect) -> CGRect {
// self.bounds.size.width = bounds.size.width - 20.0;
// return bounds;
// }
// override func editingRect(forBounds bounds: CGRect) -> CGRect {
// self.bounds.size.width = bounds.size.width - 20.0;
// return bounds;
// }
}
After doing some research(like this), as I put some comments in the code, I tried adding padding to rightView and changing the textRect, but none of them worked.
I want to keep the clear button where it is now, but I want some space on the left side of the clear button, something like the image below...
Thanks to #Shadowrun, I was able to solve the issue I had.
I needed to subclass the UITextField and add editingRect. Then return the CGRect with whatever numbers I want to put. My code is something like this.
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return CGRect(x: 17, y: 0, width: bounds.size.width - 70, height: bounds.size.height)
}
I would like to add some left and right padding to buttons, which I see they have a titleEdgeInsets property. Here's my code:
import UIKit
class QuickPromptButton: UIButton {
var userFacingValue: String?
var answerValue: String?
override init(frame: CGRect) {
super.init(frame: frame)
layer.borderColor = UIColor.primaryColor.cgColor
layer.borderWidth = 1
layer.cornerRadius = 15
setTitleColor(.primaryColor, for: .normal)
titleEdgeInsets = .init(top: 0, left: -10, bottom: 0, right: 10)
contentVerticalAlignment = .center
contentHorizontalAlignment = .center
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
However, this is what they look like now:
The problem is that the text goes out of the borders. Any idea why?
This is what I get by using 10 on both left and right:
override var intrinsicContentSize: CGSize {
let originalSize = super.intrinsicContentSize
let size = CGSize(width: originalSize.width + 20, height: originalSize.height)
return size
}
Overriding intrinsicContentSize and adding the total padding on top of the current width ended up working for me, although not sure if this is the right approach.
I want to differentiate the background color in my app screen horizontally.
I have tried this, it's going nowhere.
var halfView1 = backgroundView.frame.width/2
backgroundView.backgroundColor.halfView1 = UIColor.black
backgroundView is an outlet from View object on storyboard
For example, half of the screen is blue and another half of the screen is red.
You should create a custom UIView class and override draw rect method
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(HorizontalView(frame: self.view.bounds))
}
}
class HorizontalView: UIView {
override func draw(_ rect: CGRect) {
super.draw(rect)
let topRect = CGRect(x: 0, y: 0, width: rect.size.width/2, height: rect.size.height)
UIColor.red.set()
guard let topContext = UIGraphicsGetCurrentContext() else { return }
topContext.fill(topRect)
let bottomRect = CGRect(x: rect.size.width/2, y: 0, width: rect.size.width/2, height: rect.size.height)
UIColor.green.set()
guard let bottomContext = UIGraphicsGetCurrentContext() else { return }
bottomContext.fill(bottomRect)
}
}
It is possible if you use a custom UIView and override the draw function, here's a Playground example :
import UIKit
import PlaygroundSupport
class CustomView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.green
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
super.draw(rect)
let bottomRect = CGRect(
origin: CGPoint(x: rect.origin.x, y: rect.height / 2),
size: CGSize(width: rect.size.width, height: rect.size.height / 2)
)
UIColor.red.set()
guard let context = UIGraphicsGetCurrentContext() else { return }
context.fill(bottomRect)
}
}
let view = CustomView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
PlaygroundPage.current.liveView = view
I want to design a button respecting these rules:
Content horizontally centered
18px margin on both side of the content
10px between image and title
Title will wrap on multiple line if needed
Use attributed title
I have a working solution using:
button.setTitle(title, for: .normal)
Result:
But I can't figure why it's not working if I use:
button.setAttributedTitle(NSAttributedString(string: title), for: .normal)
Result:
It does not respect the 10px and 18px insets. Also note that the problem only occurs when the title becomes multiline.
Here is the playground I used to pinpoint my problem:
//: Playground - noun: a place where people can play
import UIKit
import PlaygroundSupport
extension UIImage {
class func imageWithView(view: UIView) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.isOpaque, 0.0)
view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}
class ActionBarView: UIView {
// MARK: Properties
private var icon: UIImage?
private let stackView = UIStackView()
private let proposeButton = UIButton()
private let declineButton = UIButton()
// MARK: Initialization
override init(frame: CGRect) {
super.init(frame: frame)
designView()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: Design
private func designView() {
designIcon()
designStackView()
designProposeButton()
designDeclineButton()
}
private func designIcon() {
let image = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
image.backgroundColor = .magenta
icon = UIImage.imageWithView(view: image)
}
private func designStackView() {
stackView.addArrangedSubview(proposeButton)
stackView.addArrangedSubview(declineButton)
stackView.distribution = .fillEqually
stackView.spacing = 1
addSubview(stackView)
stackView.frame = frame
}
private func designProposeButton() {
design(button: proposeButton,
icon: icon,
title: "Propose a task")
}
private func designDeclineButton() {
design(button: declineButton,
icon: icon,
title: "Decline")
}
private func design(button: UIButton, icon: UIImage?, title: String) {
button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 18, bottom: 0, right: 18)
button.titleEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 0)
button.imageEdgeInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 10)
button.titleLabel?.backgroundColor = .green
button.imageView?.backgroundColor = .orange
button.backgroundColor = .white
button.setImage(icon, for: .normal)
// button.setAttributedTitle(NSAttributedString(string: title), for: .normal)
button.setTitle(title, for: .normal)
button.titleLabel?.lineBreakMode = .byWordWrapping
}
}
let view = ActionBarView(frame: CGRect(x: 0, y: 0, width: 320, height: 44))
PlaygroundPage.current.liveView = view
I've been trying to add a layer to my views and buttons but somehow the layer isn't appearing at all. What am I missing?
class ViewController: UIViewController {
var button1: CustomButton!
override func viewDidLoad() {
super.viewDidLoad()
button1 = CustomButton(frame: CGRectZero)
let views1 = ["button1": button1]
button1.backgroundColor = .clearColor()
view.addSubview(button1)
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-50-[button1(50)]", options: [], metrics: nil, views: views1))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[button1(50)]-50-|", options: [], metrics: nil, views: views1))
}
}
class CustomButton: UIButton {
let shape = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
translatesAutoresizingMaskIntoConstraints = false
shape.fillColor = UIColor.redColor().CGColor
shape.strokeColor = UIColor.blackColor().CGColor
shape.lineWidth = 0.5
shape.bounds = CGRect(x: 0, y: 0, width: 50, height: 50)
layer.insertSublayer(shape, atIndex: 0)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func layoutSubviews() {
super.layoutSubviews()
let padding: CGFloat = 10
let x = frame.origin.x - padding
let y = frame.origin.y - padding
let widths = bounds.width + 2 * padding
let height = bounds.height + 2 * padding
let rect = CGRect(x: x, y: y, width: widths, height: height)
shape.frame = rect
shape.path = UIBezierPath(rect: rect).CGPath
}
}
The button is added to the view without problems but nothing of the layer seems visible (been trying to change colors when tapped etc as well, setting the position or just edit the layer itself without adding a new one).
You missed '|' in your constraint string. Please update as,
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-50-[button1(50)]|", options: [], metrics: nil, views: views1))
view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[button1(50)]-50-|", options: [], metrics: nil, views: views1))