Late Entry to Swift – UIButton

UIButton tutorial

1.UIButton basic operations

1. Create button

Let BTN :UIButton =UIButton() let BTNS :UIButton =UIButton() Let button = UIButton(frame:CGRect(x:10, Y :150, width:100, height:30)Copy the code

** UIButtonType has the following types **

public enum UIButtonType : Int {
    case custom // no button type
    @available(iOS 7.0.*)
    case system // standard system button
    case detailDisclosure
    case infoLight
    case infoDark
    case contactAdd
    public static var roundedRect: UIButtonType { get } // Deprecated, use UIButtonTypeSystem instead
}
/ / use
let  btn: UIButton = UIButton(type: .Custom)
Copy the code

** UIButton state type **

/ * * Normal (the default state) Highlighted (Highlighted), click on the button is not put Disabled state (enabled) whether is available - > Disabled state to emerge Selected (Selected) through the Selected attributes set * /
Copy the code

2. UIButton sets the word content and color

// Display text
button1.setTitle("Normal state", for: .normal)
button1.setTitle("Sorghum state", for: .highlighted)
button1.setTitle("Disabled state", for: .disabled)
// Display the text color
button1.setTitleColor(UIColor.red, for: .normal)
button1.setTitleColor(UIColor.blue, for: .highlighted)
button1.setTitleColor(UIColor.cyan, for: .selected)
button1.setTitleColor(UIColor.cyan, for: .disabled)
// Shadow text color Settings
button1.setTitleShadowColor(UIColor.cyan, for: .normal)
button1.setTitleShadowColor(UIColor.green, for: .highlighted)
button1.setTitleShadowColor(UIColor.brown, for: .disabled)
button1.setTitleShadowColor(UIColor.darkGray, for: .selected)
Copy the code

3.UIButton sets the background color and background image

// The background color
button2.backgroundColor = UIColor.orange
// The background image
button4.setBackgroundImage(UIImage(named:"XXX"), for: .normal)
Copy the code

4.UIButton sets the font size

button.titleLabel?.font = UIFont.systemFont(ofSize: 12)
Copy the code

5. To disable the UIButton

button.isEnabled = false
button.isEnabled = true
Copy the code

6. Set rounded corners

button.layer.cornerRadius = 5
button.layer.masksToBounds = true
Copy the code

7. Set border width/color

button.layer.borderWidth = 2
button.layer.borderColor = UIColor.red.cgColor
Copy the code

8. Set the background image to rounded corners

buttonImage.setImage(UIImage(named:"1") , forState: UIControlState.Normal)
// Set the background image to rounded corners
buttonImage.imageView?.layer.cornerRadius = 50By default, buttons are rendered in a single color; The system blue button. SetImage (UIImage(named:"icon1"),forState:.Normal)  // Set the icon
button.adjustsImageWhenHighlighted=false // Make the button not darken in touch mode (translucent)
button.adjustsImageWhenDisabled=false // Make the button not darken in disabled mode.You can also set it to keep the original color of the iconlet iconImage = UIImage(named:"icon2")?.withRenderingMode(.alwaysOriginal)
button.setImage(iconImage, for:.normal)  // Set the icon
button.adjustsImageWhenHighlighted = false // Make the button not darken in touch mode (translucent)
button.adjustsImageWhenDisabled = false // Make the button not darken in disabled mode.
Copy the code

9. Image and text adjustments on UIButton

UIButton to add images and text, sometimes we need to adjust the direction to counterclockwise, up, left, down, and right

btn.imageEdgeInsets =UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)

btn.titleEdgeInsets =UIEdgeInsetsMake(top: CGFloat, left: CGFloat, bottom: CGFloat, right: CGFloat)
Copy the code

Here’s an example:

// Create an image and a text button
let btn2: UIButton = UIButton(type: .Custom)  
btn2.frame = CGRectMake(50.100.120.35)  
btn2.setImage(UIImage(named: "1"), forState: .Normal)  
btn2.backgroundColor = UIColor.blackColor()  
btn2.titleLabel?.font = UIFont.systemFontOfSize(20)  
btn2.imageView?.contentMode = UIViewContentMode.ScaleAspectFit  
btn2.setTitle("Picture button", forState: .Normal)  
// Offset, respectively, up, down, left and right
btn2.imageEdgeInsets = UIEdgeInsetsMake(0.-50.0.0)  
btn2.titleEdgeInsets = UIEdgeInsetsMake(0.-80.0.5)  
btn2.setTitleColor(UIColor.whiteColor(), forState: .Normal)  
btn2.adjustsImageWhenHighlighted = false  
self.view.addSubview(btn2) 
Copy the code

10. Add button click events

There are the following types of touch times for buttons

TouchDown: single touch press event, touch the screen touchDownRepeat: multi-touch press event, the touch count is greater than1, according to the first2,3Or the first4TouchDragInside when you're dragging inside the control touchDragOutside when you're dragging outside the control touchDragEnter when you're dragging inside the control from outside the control touchDragExit: TouchUpInside: When a touch is dragged from the inside of a control to the outside. TouchUpOutside: When a touch is lifted from the outside of the control. TouchCancel: When a touch is cancelled because too many fingers are placed on it, or when a phone call is interruptedCopy the code

button1.addTarget(self,action:#selector(methodName), for: .touchUpInside)
button1.addTarget(self, action:#selector(someMethod(button:)), for:.touchUpInside)
/ /
    func methodName(a) {
        print("tapped")}/ /
    func someMethod(button:UIButton) {
        print("Who are you? You're just a button.")}Copy the code

2. Customize operations

1.UIButton image text layout

Create a button that has both text and image properties and displays in the system’s default style (image left, text right). But sometimes, we will encounter other design requirements, such as: the left text has pictures, the text on the picture, the picture on the text text and so on. At this time we need to customize the button display style to meet the complex and changeable design requirements. I have customized a button extension to satisfy the above functions. The code is as follows:

import Foundation
import UIKit

enum ButtonLayout {
    case leftImage
    case rightImage
    case topImage
    case bottomImage
}

extension UIButton {
    
    func setLayoutType(type: ButtonLayout){
        let image: UIImage? = self.imageView?.image
        switch type {
        case .leftImage:
            print("System default mode")
        case .rightImage:
            self.imageEdgeInsets = UIEdgeInsets(top:0, left: (self.titleLabel?.frame.size.width)!, bottom: 0, right:-(self.titleLabel?.frame.size.width)!)
            self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(image?.size.width)!, bottom: 0, right: (image?.size.width)!)
        case .topImage:
            self.imageEdgeInsets = UIEdgeInsets(top:-(self.titleLabel?.frame.size.height)!, left: 0, bottom: 0, right:-((self.titleLabel?.frame.size.width)!))
            // The distance between the image and the right border reduces the width of the image, and the distance between the m margin reduces the height of the text
            self.titleEdgeInsets = UIEdgeInsets(top: ((image?.size.height)!), left: -((image?.size.width)!), bottom: 0, right:0)
        // The distance from the top border increases the imageView's height. The distance from the left border decreases the imageView's width. The distance from the bottom and right borders remains the same
        default:
            self.imageEdgeInsets = UIEdgeInsets(top: (self.titleLabel?.frame.size.height)!, left:0, bottom: 0, right:-((self.titleLabel?.frame.size.width)!))
            // The top margin increases the height of the text and the right margin decreases the width of the text
            self.titleEdgeInsets = UIEdgeInsets(top: -(image?.size.height)!, left: -(image?.size.width)!, bottom: 0, right: 0)}}}Copy the code