Greedy UIButton in Swift

1. Contents

Buttons are very important components in all UI systems. The use of UIButton in iOS is also very flexible. This article will introduce the use of UIButton from the following points (based on Swift 2.0):

1. UIButton Basics
2. UIButton image usage
3. Rounded Corner Button
4. Checkbox Button
5. Countdown button (flickering problem can also be easily solved)
6. Greedy button (parent control events also belong to me, expand the event response area)

2. UIButton Basics

2.1 Creation

UIButton provides a simple construction method

 convenience init(type buttonType: UIButtonType)

This method requires us to pass in a UIButtonType enumeration type. The usage code is as follows:

 func createButton() {
    let button = UIButton(type: UIButtonType.System)
    button.frame = CGRectMake( 50 , 50 , 100 , 50 )
    button.setTitle( "OK" , forState: UIControlState.Normal)
    button.addTarget(self, action: "buttonPressed:" , forControlEvents: UIControlEvents.TouchUpInside)
    self.view.addSubview(button)
 }
 func buttonPressed(button: UIButton) {
 }

Tips:

1. When setting the button title, be sure to pass

 func setTitleColor(color: UIColor?, forState state: UIControlState)

Not passable

 button.titleLabel?.text = "OK"  

This method will automatically change the title to the text in the Normal state of the setTitleColor method when clicked.

2.2 Image Usage

UIButton provides the following two interfaces to use images:

 func setImage(image: UIImage?, forState state: UIControlState)
 func setBackgroundImage(image: UIImage?, forState state: UIControlState)

(1) The interface setImage is used to set the button image. By default, it will be aligned horizontally with the button text.

(2) The interface setBackgroundImage is used to set the background image of the button. Both setImage and the button text will be displayed on the background image.

Here we focus on the setBackgroundImage interface. Many times, the button looks like this:

These buttons have the same background, but different sizes. Let's talk about how to reuse this type of image resources.

2.2.1 Code method

2.2.1.1 Principle Description

In the UIImage interface, there are the following methods

 func resizableImageWithCapInsets(_ capInsets: UIEdgeInsets) -> UIImage

When using this method, you need to pass UIEdgeInsets as a parameter and create the interface as follows:

 func UIEdgeInsetsMake(_ top: CGFloat, _ left: CGFloat, _ bottom: CGFloat, _ right: CGFloat) -> UIEdgeInsets

In the figure, the blue mark indicates the variable area, and the green mark indicates the constant area. The top and bottom properties of the UIEdgeInsets structure are a pair, which are used to specify the vertical variable area (black dotted rectangle), and the left and right properties are a pair, which are used to specify the horizontal variable area (white dotted rectangle). When the size of UIButton/UIImageView is larger than the size of UIImage, the size of the variable area in the image will be adjusted to cover the entire control. The specific adjustment rules are as follows:

(1) The width of the control is greater than the width of the image, so the white dotted rectangle is stretched

(2) If the control height is greater than the image height, stretch the black dotted rectangle

(3) When the control width is smaller than the image width, the entire horizontal area is reduced (the ratio of the variable area to the constant area remains unchanged)

(4) When the control height is smaller than the image height, the overall vertical reduction (the ratio of the variable area to the constant area remains unchanged)

The iOS system will automatically load 1x, 2x, and 3x images according to the device's resolution, and the top, bottom, left, and right in the resizableImageWithCapInsets method are in pixels. This requires that when using it, the corresponding margins should be set according to the x-fold image, for example:

 let image = UIImage(named: "image_name" )
 //When the image is 1x larger, the upper, lower, left and right margins are all 25  
 let padding = 25 * (image?.scale)!
 let edge = UIEdgeInsetsMake(padding, padding, padding, padding)
 let resizeImage = image?.resizableImageWithCapInsets(edge)
 button.setBackgroundImage(resizeImage!, forState: UIControlState.Normal)

#p#

2.2.1.2 Performance vs. Variable Region Size

(1) Performance Optimization: When the variable area is 1 pixel wide or high, the drawing is done by stretching 1 pixel

(2) Better performance: The variable area is the entire image, the parameter of the resizableImageWithCapInsets method is UIEdgeInsetsZero, and the entire image is tiled when drawing.

(3) Poor performance: When the width or height of the variable area is greater than 1 pixel, the drawing is done in a tiling manner. This method has poor performance, but it is also the most commonly used method in actual development.

Tips

In some applications, the application has some non-pure color backgrounds, which will be used in multiple interfaces. Due to the differences in device resolution and interface control size, it is required to create images of multiple sizes, which will cause the ipa package to become larger and memory usage to increase. Here, combined with the above (2) setting the variable area to the entire image, this problem can be solved. For the principle, please refer to Seamless Mapping.

The sample code is as follows:

 let image = UIImage(named: "tile" )
 let resizeImage = image?.resizableImageWithCapInsets(UIEdgeInsetsZero)
 self.bkImageView.image = resizeImage
 2.2.2 Asset Catalogs method (recommended )

Xcode provides an Asset Catalogs method to manage image resources. Asset Catalogs provides a visual interface to set the variable area of ​​the image. It is easy to operate and simple to use. Click Show Slicing in the lower right corner.

After entering the edit mode, there will be a Start Slicing button in the middle of the image. After clicking it, we will be asked to select the stretching method, as shown below:

The functions of the three buttons

The horizontal and vertical stretching processes are the same. Here we take the horizontal stretching as an example. After selecting the horizontal stretching button 1, three operation lines will be provided to specify the variable area and the deletion area.

Variable area: The area specified by operation line 1 and operation line 2. When stretching, the size of this area will change according to the final size.

Delete area: The area specified by operation line 2 and operation line 3 (white semi-transparent layer). It can be simply understood that this area will be directly deleted when stretching. The usage is the same as that of ordinary pictures. The code is as follows:

 let image = UIImage(named: "image_asset_name" )
 button.setBackgroundImage(image, forState: UIControlState.Normal)

#p#

3. Other uses of UIButton

3.1 Rounded Corner Buttons

Sometimes, we need a round button, such as an avatar:

 let image = UIImage(named: "user_avatar" )
 self.button.setImage(image, forState: UIControlState.Normal)
 self.button.imageView?.layer.cornerRadius = self.button.frame.width / 2  

3.2 Checkbox Button

What if there is no checkbox component in UIKit?

 func checkBoxButton() {
    let frame = CGRectMake( 68 , 79 , 300 , 128 )
    let button = UIButton(type: UIButtonType.Custom)
    button.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
 button.frame = frame
    button.titleLabel?.font = UIFont.systemFontOfSize( 30 )
    button.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left
 button.setTitle( "Checkbox Button" , forState: UIControlState.Normal)
 //The above is the style setting, the following is related to the check box  
    button.addTarget(self, action: "buttonPressed:" , forControlEvents: UIControlEvents.TouchUpInside)
    button.setImage(UIImage(named: "check" ), forState: UIControlState.Normal)
    button.setImage(UIImage(named: "uncheck" ), forState: UIControlState.Selected)
    self.view.addSubview(button)
 }
 func buttonPressed(button: UIButton) {
    button.selected = !button.selected
 }

3.3 Countdown button (flickering problem can also be easily solved)

Many applications have a text message countdown function, which usually combines NSTimer with UIButton to implement this function. If UIButton is initialized like this:

When testing, you will find that when the timer changes the title every second, there will be flickering. Change UIButtonType.System to UIButtonType.Custom

Here is a packaged countdown button that you can download and use directly: http://00red.com/download/Swift之贪的UIButton/ILCountDownButton.swift

The following are some usage examples:

 let frame = CGRectMake( 50 , 50 , 100 , 40 )
 let countButton = ILCountDownButton(count: 5 )
 countButton.frame = frame
 countButton.setBackgroundImageForCount(UIImage(named: "bk_count" )!)
 countButton.setBackgroundImageForRestart(UIImage(named: "bk_restart" )!)
 countButton.setTitleForRestart( "Resend" )
 self.view.addSubview(countButton)

4. Greedy Button

The frame of UIButton will directly affect the display effect of setImage and setBackgroundImage. Sometimes we just need to expand the click area of ​​UIButton, but don't want to directly modify the frame of UIButton and affect the display. In this case, we can use the following method to deal with it

The click event of the superview of UIButton is occupied, and all touch operations are transferred to the UIButton control. When iOS handles event distribution, it is divided into two steps: the first step is to find which UI component responds to this event, and the second step is event processing and responder chain. To realize event transfer, just handle it in the first step. The code is as follows:

 class ILGreedButton: UIButton {
    override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
 return self
 }
 }

When using ILGreedButton, the effect of clicking the parent view and UIButton responding to the event will appear.