directory

1. What problem does the custom button solve 2. Encapsulate ideas and step on the pit 3. Source code and demon address

1. What problem does a custom button solve

  • One line of code sets the position of the image and text (text on the left/right/above/below the image)
  • One line of code sets the spacing between images and text
  • One line of code adds a gradient background and sets the highlight gradient effect
  • Shadows, rounded corners, and gradients exist at the same time

To solve the above problems, we only use the system button to develop, need to write a lot of code and easy to bug, so need to encapsulate a button to achieve once and for all.

2. Encapsulate ideas and trample pits

1. Does the encapsulated button inherit from UIButton or UIControl

When you insert the gradient layer, you need to deal with the titleLabel of UIButton and the imageView layer and the gradient layer to make sure that the gradient layer is at the top of the gradient layer, which is a little bit troublesome, and the highlight is not good. And UIButton feels a little heavy, so inherit UIControl and write a brand new button.

2. Picture and text position style and spacing

This rewrite layoutSubviews method, in the calculation of the appropriate position can be, but the call time needs to consider a comprehensive point, such as text changes, text font changes, changes in pictures, layout type changes and so on all need to update the layout.

The main implementation code is as follows:

3. How to set gradient

  • Plan A: At the beginning, I rewrote the system drawing method draw(_ rect: CGRect), draw a gradient color, but I didn’t find the problem at first. However, in the actual development of the project, I found that the cllectionView cell contains a Button, so many cells can not display the Button properly, just re-draw draw(_ rect: CGRect) will have a problem 😭 😭
  • Plan B: Use CAGradientLayer to create a layer, insert it into the layer of the button, pass in the parameters for corresponding processing, and no bug was found in various scene tests. The main code is as follows:

4. How to gracefully set gradient rounded corners

  • Rounding corners with masksToBounds is perfectly ok if the Button has no shadows
  • However, sometimes, UI design shadow, rounded corner, gradient exist at the same time, so we need to set rounded corner for Button, but also to set rounded corner for gradient layer, I directly use KVC to get Button rounded corner for gradient layer Settings, save the trouble of parameter assignment. The main code is as follows:

5. Click Highlight Status Settings

TouchesBegan (_ touches: Set

, with event: UIEvent?) touchesCancelled(_ touches: Set

, with event: UIEvent?) touchesEnded(_ >touches: Set

, > with event: UIEvent?) ‘touchesBegan’ saved the original color, assigned high bright color, ‘touchesCancelled’ and ‘touchesEnded’ restored the original color


3. Use effect

  • With the above problem solved, now look at the code that implements a layout style + shadow + rounded corners + gradient button:

The basic method system API basically keeps the same, other requirements basic one line of code to fix, does not feel very convenient ~

Below is demon’s display effect ~

4. Source code and demon address

Making the address