Abstract

When learning the applet, you see a style attribute hover-class in the applet. By setting this attribute, you can add a highlight effect to the click control. So I came up with the idea of implementing a similar feature in Swift. Go.

The following code adds a highlight effect to the View control. When highlighted, the background color of the page is displayed with a transparency of 0.8

<view class="tool-bar my-class" hover-class="hover" hover-stay-time="50"> <image SRC ="{{icon}}"/> <text>{{title}}</text> </view>Copy the code
// css 页面
.hover {
opacity: .8;
}
Copy the code

Set the Button

Start with a simple requirement to set the background color of a button. When the button is highlighted, the background color is displayed with 0.8 opacity.

In UIButton class, setBackgroundImage(, for:) causes the button to display a different background image in its default state (.normal) and highlighted state (.highlighted), where color can be used to create a solid color image processing.

/// /// Set the color to be the background color of the button. In the highlighted state, the background color will have 0.8 alpha /// /// -parameter color: The background color func setBackgroundAndHighlighted (with color: UIColor) {self. The BTN. SetBackgroundImage (getImageFrom (color: Color), for: normal) self. BTN. SetBackgroundImage (getImageFrom (color: color withAlphaComponent (0.8)), for: .highlighted) }Copy the code

To implement the code, we use the withAlphaComponent function, which belongs to the UIColor class, to achieve the effect of setting the color color to its alpha and returning a new color object.

This method is specifically tested, for example, 0.8 white. When set to 0.6, this function returns 0.6 white instead of 0.8 by 0.6 white.

Create a monochrome image

The following code creates a monochrome image to the button, using the UIGraphics framework to process the image.

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 does not exist ") UIGraphicsEndImageContext () return nil} context. SetFillColor (color. CgColor) context.fill(rect) let img = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return img }Copy the code

Highlighted on camera

Demand is realized in error, next look at what Highlighted is:

Highlighted is the control’s highlight, which is first highlighted as belonging to the UIControl class. So what about highlighting? The control is highlighted when a touch event enters its boundary. Controls lose highlighting when touch events leave (such as when a button is clicked, release the button, touch-up) or go beyond the control’s boundaries. You can also use the isHighlighted property to check whether the control is lighted or not, and you can set it to keep the control lighted or not lighted.

An Event

See highlighted translation mentions touch events many times, then look at several touch events can affect highlighted, first summarized:

  • touchDownIs the operation of the finger to the control;
  • touchDragIs the operation of the finger dragging in the control;
  • touchUpIs the release of a finger from a control;
  • The last onetouchCancleThat’s the close operation.

If you do, just walk through the code block

Public static var touchDown: uicontrol. Event {get} public static var touchDown: uicontrol. Event {get} Uicontrol. Event {get} public static var touchDragInside: Uicontrol. Event {get} public static var touchDragOutside: Uicontrol. Event {get} public static var touchDragEnter: Uicontrol. Event {get} public static var touchDragExit: Uicontrol. Event {get} public static var touchUpInside: Uicontrol. Event {get} public static var touchUpOutside: Public static var touchCancel: uicontrol. Event {get} public static var touchCancel: uicontrol. Event {get}Copy the code

By the Heighlighted definition and by repeated testing, it was concluded that when touchDown was highlighted, and when touchDrageOutside, touchUpInside, or touchDragExit, Heightlighted has no highlighting effect.

You can then set these click events to customize whether or not to highlight the event, and do the corresponding event processing.

Why can Button be highlighted?

If you look at the structure of the code, UIButton inherits from UIControl, and UIButton class just has functions to set styles and things like that, and all the events are in UIControl class.

UIControl has a method to monitor Event events by monitoring different states of the Event and setting up isHighlighted, and then the change is detected by the property monitor of isHighlighted. Handles pre-set code in UIButton.

UIButton encapsulates UIControl and View, and any subclass that inherits UIControl can use its highlighting property or custom highlight to listen for related events.