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
Related
I'm trying to get an instance of my Options class to animate onto the screen using the function appear() which activates when pressing a button in my SearchResult class but I'm having trouble, the instance has been added as a subview to the view in the ViewController Class.
I've been able to use the function optionMenu.appear() in ViewController and that works as it should but not when it's called through clicking the button in SearchResult, it seems to do everything but the animation as I've tested printing in optionMenu.appear() and it successfully prints.
import Foundation
import UIKit
class SearchResult {
private let link: String
var body = UIView()
init(_ link: String){
self.link = link
let options = UIButton(x: Int(body.bounds.width-60), y: 10, size: 50.0)
options.addTarget(self, action: #selector(optionsClicked), for: .touchUpInside)
body.addSubview(options)
}
#objc func optionsClicked(){
ViewController().optionMenu.appear()
}
}
import Foundation
import UIKit
class Options: UIView{
var buttons = [UIButton]()
private var link = String()
init(_ titles: [String]){
let height = ((titles.count+1)*65)+5
super.init(frame: CGRect(x: 0, y: Int(UIScreen.main.bounds.height)-height, width: Int(UIScreen.main.bounds.width), height: height))
var i = 0
for title in titles{
let button = UIButton(frame: CGRect(x: 5, y: 5+(i*65), width: Int(UIScreen.main.bounds.width)-10, height: 60))
button.setTitle(title, for: .normal)
buttons.append(button)
self.addSubview(button)
i += 1
}
let cancel = UIButton(frame: CGRect(x: 5, y: 5+(i*65), width: Int(UIScreen.main.bounds.width)-10, height: 60))
cancel.setTitle("cancel", for: .normal)
self.addSubview(cancel)
}
func appear(){
UIView.animate(withDuration: 0.2, animations: {
self.transform = CGAffineTransform(translationX: 0, y: -self.bounds.height)
})
}
#objc func disappear(){
UIView.animate(withDuration: 0.2, animations: {
self.transform = CGAffineTransform.identity
})
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
It's because you are constructing a new Viewcontroller, and calling appear on that Viewcontroller's option menu every time optionsClicked() is called. You need a reference to the viewController that has the option menu and do myViewController.optionMenu.appear()
Situation: I want to use a custom UITextField class for my textField in a xcode project.
I want to the textField look like this:
I had no problems in making the edges rounded, and change the color of my placeholder, but I have no idea how to keep the bottom edges flat and draw a black border only on the bottom.
This is my code:
import UIKit
class GrayTextField: UITextField {
override func awakeFromNib() {
super.awakeFromNib()
backgroundColor = .grayf1f1f1
layer.borderWidth = 1
layer.borderColor = UIColor.black.cgColor
layer.cornerRadius = 10
clipsToBounds = true
}
override var placeholder: String? {
didSet {
let attributes = [ NSAttributedString.Key.foregroundColor: UIColor.black, NSAttributedString.Key.font : UIFont.systemFont(ofSize: 16, weight: .thin)]
attributedPlaceholder = NSAttributedString(string: placeholder ?? "", attributes: attributes)
}
}
}
And my current result:
In your answer, still there is some issue in bottom left and right corner.
To achieve exact result, change your UITextField Border Style to No Border.
Padding for Text:
class GrayTextField: UITextField {
let padding = UIEdgeInsets(top: 0, left: 15, bottom: 0, right: 5)
..... Your Exact Code .....
override open func textRect(forBounds bounds: CGRect) -> CGRect {
return bounds.inset(by: padding)
}
override open func placeholderRect(forBounds bounds: CGRect) -> CGRect {
return bounds.inset(by: padding)
}
override open func editingRect(forBounds bounds: CGRect) -> CGRect {
return bounds.inset(by: padding)
}
}
OutPut
Well, after some researching, i do it.
Here if my final code:
import UIKit
class GrayTextField: UITextField {
override func awakeFromNib() {
super.awakeFromNib()
backgroundColor = .grayf1f1f1
clipsToBounds = true
let maskPath = UIBezierPath(roundedRect: self.bounds,
byRoundingCorners: [.topLeft, .topRight],
cornerRadii: CGSize(width: 10.0, height: 10.0))
let shape = CAShapeLayer()
shape.path = maskPath.cgPath
layer.mask = shape
addBottomBorder(with: .darkGray, andWidth: 1)
}
override var placeholder: String? {
didSet {
let attributes = [ NSAttributedString.Key.foregroundColor: UIColor.black, NSAttributedString.Key.font : UIFont.systemFont(ofSize: 16, weight: .thin)]
attributedPlaceholder = NSAttributedString(string: placeholder ?? "", attributes: attributes)
}
}
func addBottomBorder(with color: UIColor?, andWidth borderWidth: CGFloat) {
let border = UIView()
border.backgroundColor = color
border.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
border.frame = CGRect(x: 0, y: frame.size.height - borderWidth, width: frame.size.width, height: borderWidth)
addSubview(border)
}
}
And this is the result:
I have written the below code in order to generate a custom UIButton, which I intend to use in different locations across my applications:
import UIKit
import ChameleonFramework
class CustomButton: UIButton {
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
convenience init(buttonTitleTexForNormalState titleForNormalState: String, buttonTitleTextColourForNormalState normalTextColour: UIColor, buttonTitleTextColourForHighlightedState highlightedTextColour: UIColor, buttonTitleFontType fontType: String, buttonTitleFontSize fontSize: CGFloat, buttonBackgroundHexColourCode hexColour: String, buttonFrameCornerRadius cornerRadius: CGFloat, buttonFrameBorderWidth borderWidth: CGFloat, buttonFrameBorderColour borderColour: String, buttonBackgroundTransperancyAlphaValue transperancy: CGFloat, buttonTagNumber tagValue: Int, buttonTarget: Any?, buttonSelector: Selector, buttonImageForNormalState normalButtonImage: String) {
self.init()
setupButtonEssentials(buttonTitleTexForNormalState: titleForNormalState, buttonTitleTextColourForNormalState: normalTextColour, buttonTitleTextColourForHighlightedState: highlightedTextColour, buttonTitleFontType: fontType, buttonTitleFontSize: fontSize, buttonBackgroundHexColourCode: hexColour, buttonFrameCornerRadius: cornerRadius, buttonFrameBorderWidth: borderWidth, buttonFrameBorderColour: borderColour, buttonBackgroundTransperancyAlphaValue: transperancy, buttonTagNumber: tagValue, buttonTarget: buttonTarget, buttonSelector: buttonSelector, buttonImageForNormalState: normalButtonImage)
}
func setupButtonEssentials(buttonTitleTexForNormalState titleForNormalState: String, buttonTitleTextColourForNormalState normalTextColour: UIColor, buttonTitleTextColourForHighlightedState highlightedTextColour: UIColor, buttonTitleFontType fontType: String, buttonTitleFontSize fontSize: CGFloat, buttonBackgroundHexColourCode hexColour: String, buttonFrameCornerRadius cornerRadius: CGFloat, buttonFrameBorderWidth borderWidth: CGFloat, buttonFrameBorderColour borderColour: String, buttonBackgroundTransperancyAlphaValue transperancy: CGFloat, buttonTagNumber tagValue: Int, buttonTarget: Any?, buttonSelector: Selector, buttonImageForNormalState normalButtonImage: String) {
setTitleColor(normalTextColour, for: .normal)
setTitleColor(highlightedTextColour, for: .highlighted)
titleLabel?.font = UIFont(name: fontType, size: fontSize)
setTitle(titleForNormalState, for: .normal)
backgroundColor = UIColor(hexString: hexColour)
layer.cornerRadius = cornerRadius
layer.borderWidth = borderWidth
layer.borderColor = UIColor(hexString: borderColour)?.cgColor
showsTouchWhenHighlighted = true
alpha = transperancy
contentHorizontalAlignment = .center
self.tag = tagValue
addTarget(target, action: buttonSelector, for: .touchUpInside)
if let buttonImage = UIImage(named: normalButtonImage) {
setImage(buttonImage.withRenderingMode(.alwaysOriginal), for: .normal)
contentMode = .scaleAspectFit
}
setShadow()
translatesAutoresizingMaskIntoConstraints = false
}
private func setShadow() {
layer.shadowColor = UIColor.black.cgColor
layer.shadowOffset = CGSize(width: 0.0, height: 6.0)
layer.shadowRadius = 8
layer.shadowOpacity = 0.5
clipsToBounds = true
layer.masksToBounds = false
}
func shake() {
let shake = CABasicAnimation(keyPath: "position")
shake.duration = 0.1
shake.repeatCount = 2
shake.autoreverses = true
let fromPoint = CGPoint(x: center.x-8, y: center.y)
let fromValue = NSValue(cgPoint: fromPoint)
let toPoint = CGPoint(x: center.x+8, y: center.y)
let toValue = NSValue(cgPoint: toPoint)
shake.fromValue = fromValue
shake.toValue = toValue
layer.add(shake, forKey: "position")
}
}
And the below code illustrates an example of where I created an instance from the custom UIButton class (as demonstrated above) inside a ViewController:
import UIKit
import ChameleonFramework
class MainScreen: UIViewController, UINavigationBarDelegate {
var newFileButton = CustomButton(buttonTitleTexForNormalState: "New...", buttonTitleTextColourForNormalState: .black, buttonTitleTextColourForHighlightedState: .blue, buttonTitleFontType: "Apple SD Gothic Neo", buttonTitleFontSize: 17, buttonBackgroundHexColourCode: "#B24B32", buttonFrameCornerRadius: 25, buttonFrameBorderWidth: 2, buttonFrameBorderColour: "#7AFFD2", buttonBackgroundTransperancyAlphaValue: 0.75, buttonTagNumber: 1, buttonTarget: self, buttonSelector: #selector(buttonPressed(sender:)), buttonImageForNormalState: "New File")
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
print("viewDidLayoutSubviews")
view.addSubview(newFileButton)
newFileButton.frame.size.width = 140
newFileButton.frame.size.height = 100
}
#objc func buttonPressed(sender : UIButton) {
if sender.tag == 1 {
newFileButton.shake()
guard let nextViewControllerToGoTo = storyboard?.instantiateViewController(withIdentifier: "NewFileButtonPressedTabController") else {
print("NewFileButtonPressedTabController could not be presented")
return
}
present(nextViewControllerToGoTo, animated: true, completion: nil)
}
}
However, as it can be seen from the above code, I ended up defining the size of the custom UIButton in terms of its width and height manually.
I wonder if there is a way for Xcode to figure out the best width and height for each custom UIButton based on its contents, mainly its title and image?
P.S: I tried to use intrinsicContent, however, it did not work out for me. Any suggestions are much appreciated.
Thanks,
Shadi.
Remove the code that sets newFileButton.frame.size.width and .height, and it should take on the content size of whatever titles/images you add to it - but only at a minimum. If you want it to be any bigger than that, just set content insets (sort of like padding around the content).
In your button's class:
self.contentEdgeInsets = UIEdgeInsets(top: 10, left: 30, bottom: 10, right: 20)
self.imageEdgeInsets = UIEdgeInsets(top: 0, left: -20, bottom: 0, right: 0)
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:
I've implemented inputAccessoryView with UITextView. I also set collectionView.keyboardDismissMode = .interactive
When i dissmiss keyboard by using interactive mode i have this two error
1) - First responder warning: '<.InputTextView: 0x7f8f54061800; baseClass = UITextView; frame = (8 8; 307 35.5); text = ''; clipsToBounds = YES; gestureRecognizers = ; layer = ; contentOffset: {0, 0}; contentSize: {130, 0}; adjustedContentInset: {0, 0, 0, 0}>' rejected resignFirstResponder when being removed from hierarchy
2) - [UIWindow endDisablingInterfaceAutorotationAnimated:] called on > without matching -beginDisablingInterfaceAutorotation. Ignoring.
Xcode 10 and swift 4
Code For CollectionViewController
lazy var containerView: InputAccesoryView = {
let frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 50)
let containerView = InputAccesoryView(frame: frame)
containerView.backgroundColor = UIColor.groupTableViewBackground
containerView.autoresizingMask = .flexibleHeight
containerView.delegate = self
return containerView
}()
override var inputAccessoryView: UIView {
get {
return containerView
}
}
override var canBecomeFirstResponder: Bool {
return true
}
Code for InputAccesoryView
public let inputTextView: InputTextView = {
let textView = InputTextView()
textView.font = UIFont.systemFont(ofSize: 16)
textView.isScrollEnabled = false
textView.textAlignment = .left
textView.layer.cornerRadius = 10
return textView
}()
private lazy var sendButton: UIButton = {
let button = UIButton(type: .system)
button.setImage(UIImage(named: "send2"), for: .normal)
button.tintColor = .black
button.addTarget(self, action: #selector(handleUploadComment), for: .touchUpInside)
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
configureViewComponents()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var intrinsicContentSize: CGSize {
return CGSize.zero
}
private func configureViewComponents(){
addSubview(sendButton)
sendButton.setPosition(top: nil, left: nil, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 8, width: 44, height: 0)
sendButton.centerYAnchor.constraint(equalTo: layoutMarginsGuide.centerYAnchor).isActive = true
addSubview(inputTextView)
inputTextView.setPosition(top: topAnchor, left: leftAnchor, bottom: layoutMarginsGuide.bottomAnchor, right: sendButton.leftAnchor, paddingTop: 8, paddingLeft: 8, paddingBottom: 8, paddingRight: 8, width: 0, height: 0)
let separatorView = UIView()
separatorView.backgroundColor = UIColor(red: 230/255, green: 230/255, blue: 230/255, alpha: 1)
addSubview(separatorView)
separatorView.setPosition(top: topAnchor, left: leftAnchor, bottom: nil, right: rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0.5)
}
func clearCommentTextView() {
inputTextView.text = nil
inputTextView.placeHolder.isHidden = false
}