Highlighted for swift button

Abstract

When learning applet , See a style attribute in the applet hover-class, By setting this property , You can add a highlight effect to the clicked control . So it sprouted in Swift The idea of implementing a similar function , Open the door .

The following code is for view Control to add a highlight effect , When highlighted , The background color of the page will 0.8 The transparency of the display

// html page
<view class="tool-bar my-class" 
  hover-class="hover"
  hover-stay-time="50">
<image src="{{icon}}"/>
<text>{{title}}</text>
</view>
 Copy code 

// css  page
.hover {
opacity: .8;
}
 Copy code 

Set up Button

First finalize a simple requirement , Set the background color of a button , When the button is highlighted , The background color 0.8 Transparency display .

see UIButton Class ,setBackgroundImage(, for: ) function , You can leave the button in the default state （.normal） And highlight （.highlighted） Next , Show different background pictures , Here you can go through color To create solid color image processing .

// MARK: - The settings button is highlighted
/// Set the button background and highlight color
///
/// Set up color Is the button background color , Highlight , The background color will have 0.8 Of alpha
/// 
/// - Parameter color: The background color
func setBackgroundAndHighlighted(with color: UIColor) {
   self.btn.setBackgroundImage(getImageFrom(color: color), for: .normal)
   self.btn.setBackgroundImage(getImageFrom(color: color.withAlphaComponent(0.8)), for: .highlighted)
}
​
 Copy code 

When implementing the code , Using functions withAlphaComponent, It belongs to UIColor Class , The effect is , take color Set its color alpha, Back to a new color object .

This method is specially tested , such as 0.8 Of white, Use this function to set to 0.6 when , The return is 0.6 Of white, instead of 0.8x0.6 Of white.

Create monochrome image

The following code is to create a monochrome image, Give it to the button , What we use here is UIGraphics Frame processing pictures .

​
 /// Set monochrome picture
 /// - Parameter color: Color
 /// - Returns: Returns the color picture
 func getImageFrom(color: UIColor) -> UIImage? {
     let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
     UIGraphicsBeginImageContext(rect.size)
     guard let context = UIGraphicsGetCurrentContext() else {
         print(" UIGraphicsGetCurrentContext non-existent ")
         UIGraphicsEndImageContext()
         return nil
     }
     context.setFillColor(color.cgColor)
     context.fill(rect)
     let img = UIGraphicsGetImageFromCurrentImageContext()
     UIGraphicsEndImageContext()
     return img
 }
 Copy code 

Highlighted（ The highlighted ）

Requirements are fulfilled , Let's take a look Highlighted What is it? ：

highlighted Is the highlight of the control , First of all, it is clear that it belongs to UIControl class . So how to understand highlighting ？ The interpretation says , When the touch event enters the boundary of the control , Control will highlight ; When the touch event leaves （ For example, when you click a button , Release the button ,touch-up） Or beyond the boundary of the control , Control will lose its highlighting . And through isHighlighted Property to see if the control is highlighted , You can also set it , Keep the control highlighted or non highlighted .

Event（ event ）

see highlighted Touch events are mentioned many times in the definition of , Then take a look at several touch events that can affect the highlight , Let's summarize :

• touchDown It is the operation of pressing the finger on the control ;
• touchDrag It is the operation of dragging the finger in the control ;
• touchUp It is the operation of releasing the finger from the control ;
• the last one touchCancle Is to close the operation .

If you understand , Just go through the code block

/// Click event
public static var touchDown: UIControl.Event { get }
/// Repeat click event
public static var touchDownRepeat: UIControl.Event { get }
/// Event that is dragged inside the control boundary
public static var touchDragInside: UIControl.Event { get }
/// Event dragged outside the control boundary
public static var touchDragOutside: UIControl.Event { get }
/// Event dragged to the control boundary
public static var touchDragEnter: UIControl.Event { get }
/// Drag the finger from inside the control to outside its boundary
public static var touchDragExit: UIControl.Event { get }
/// Event when the finger is within the boundary of the control
public static var touchUpInside: UIControl.Event { get }
/// When the finger goes beyond the event in the control boundary
public static var touchUpOutside: UIControl.Event { get }
/// Cancel the system event currently touched
public static var touchCancel: UIControl.Event { get }
 Copy code 

basis heighlighted After interpretation and multiple tests , Infer when touchDown When heighlighted The highlighted , When touchDrageOutside、touchUpInside perhaps touchDragExit when ,heightlighted There is no highlight effect .

Then you can set these click events , To customize whether to highlight Events , And do the corresponding event processing .

Button Why can I set the highlight ？

Look at the code structure ,UIButton It is inherited from UIControl Of , and UIButton Class only sets functions such as styles , About Event All the events are UIControl Class .

Then you can sort it out roughly ,UIControl There are monitors in the Event Method of event , By monitoring Event Different State, Set up isHighlighted, then isHighlighted When a change is detected by property listening , Handle UIButton Code set in advance in .

It can be concluded that ,UIButton It's a yes UIControl and View Encapsulation , As long as it's inheritance UIControl Subclasses of classes , You can use its highlight attribute , Or customize highlighting and listening for related events .