Shulou(Shulou.com)06/03 Report--

Editor to share with you how iOS can use rounded corners, shadows and borders without stutter at the same time. I believe most people don't know much about it, so share this article for your reference. I hope you can learn a lot after reading this article. Let's learn about it together.

In iOS development, I am most afraid of seeing rounded corners, shadows and borders appear at the same time in the design draft. these three brothers are simply performance killers.

There are many optimization methods for Baidu, although the methods are different, but the principles are the same.

Share a method that I have always used: apply only one effect in a View, and then achieve the effect by combining it.

Override init (frame: CGRect) {super.init (frame: frame) imageView = UIImageView (image: UIImage (named: "img")) imageView.layer.cornerRadius = 14 imageView.layer.masksToBounds = true backgroundView = imageView shadowView = ShadowView () shadowView.layer.cornerRadius = 20 shadowView.applyShadow (.black, CGSize (width: 0, height: 15), 0.2,40) insertSubview (shadowView, belowSubview: imageView) contentView.layer.cornerRadius = 14 contentView.layer.borderWidth = 1 contentView.layer.borderColor = UIColor.orange.cgColor contentView.layer.masksToBounds = true}

Hierarchy:

ContentView: draw the frame and put it on the top. ImageView: show rounded corners, placed in the middle, for background images. ShadowView: displays shadows and places them at the bottom. The code is simple, just encapsulating the shadow parameters:

Class ShadowView: UIView {private var shadowColor: UIColor? Private var shadowOpacity: CGFloat = 1 private var shadowOffset: CGSize = CGSize (width: 0, height: 3) private var shadowBlur: CGFloat = 6 override func layoutSubviews () {super.layoutSubviews () updateShadow ()} func applyShadow (_ color: UIColor?, _ offset: CGSize, _ opacity: CGFloat _ blur: CGFloat) {shadowColor = color shadowOffset = offset shadowOpacity = opacity shadowBlur = blur updateShadow ()} private func updateShadow () {layer.shadowColor = shadowColor?.cgColor layer.shadowOffset = shadowOffset layer.shadowOpacity = Float (shadowOpacity) layer.shadowRadius = shadowBlur * 0.5 layer.shadowPath = UIBezierPath (roundedRect: self.bounds, cornerRadius: layer.cornerRadius). CgPath}}

Separate drawing speed is very fast, using UICollectionView for scrolling testing, the number of Cell generated is 10, 000.

The test machine is 5s + iOS 12.4.4, fast sliding without any stutter.

The above is all the content of the article "how to use rounded corners, shadows and borders at the same time without stutter in iOS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.