IOS custom View

In day-to-day development, a App will have many modules with small differences. At this point, we need to consider Utilities — custom View, so that a lot of duplicate code can be avoided.

What needs to be considered?

  • First, consider different invocations, pure code, or the Xib and Storyboard methods
  • To have a certain customization, that is, exposed attributes
  • It’s easy to use


For example, there are such View available in different places.

IOS custom View

A very simple view, picture plus text plus borders.

First, create a subclass ImageTextView of UIView, and add the open keyword to the front of the class (we want to make it public)

Delete the drawRect correlation method and copy the following code

Public override init (frame: CGRect) {super.init (frame: frame) #if! TARGET_INTERFACE_BUILDER / interfabuilder environment / / if it is from the code level to start using Autolayout, which need to use the View translatesAutoresizingMaskIntoConstraints set to false translatesAutoresizingMaskIntoConstraints = false #endif prepareView (required)} public init? (coder aDecoder: NSCoder) {super.init (coder: aDecoder (prepareView) func (prepareView)} / {}) layout

Init (coder:) is called when it is created from Xib or Storyboard. The other view notes. – – _

Add an extension to UIImageView to create the UIImageView object

Extension UIImageView class func configuredImageView (->) {UIImageView {let = UIImageView; imageView (imageView.translatesAutoresizingMaskIntoConstraints) = false imageView.clipsToBounds = true imageView.contentMode =.ScaleAspectFill return imageView}}

Go back to ImageTextView to declare pictures and text variables

Fileprivate, let, imageView = UIImageView.configuredImageView (), fileprivate, lazy, VaR, textLabel = UILabel ()

Layout images and text in prepareView

The layout of func prepareView () {/ / textLabel.translatesAutoresizingMaskIntoConstraints = false textLabel.font = UIFont.systemFont (ofSize: CGFloat (textSize)) addSubview (imageView) addSubview (textLabel) imageView.setContentCompressionResistancePriority (1000, for: (.Horizontal) NSLayoutConstraint.activate [imageView.leftAnchor.constraint (equalTo: leftAnchor constant:10), imageView.centerYAnchor.constraint (equalTo: centerYAnchor), textLabel.leftAnchor.constraint (equalTo:, imageView.rightAnchor, constant:2, textLabel.centerYAnchor.constraint (equalTo: centerYAnchor) textLabel.rightAnchor.constraint (equalTo:), rightAnchor, constant:-10)] layer.borderColor = UIColor) .lightGray.cgColor layer.borderWidth = 0.5, layer.cornerRadius = 3}

The layout here is API, which is supported by iOS 9, and of course you can use SnapKit

To enable our View to be used in InterfaceBuilder, use annotations @IBDesignable
in front of the class and expose properties that can be customized

Extension ImageTextView{@IBInspectable open var image:UIImage? Return imageView.image set{imageView.image {get{}}} = newValue @IBInspectable open var text:String? Return textLabel.text set{textLabel.text {get{} = newValue?? "}} @ IBInspectable open var textColor:UIColor? Return textLabel.textColor set{textLabel.textColor {get{}}}} = newValue

Under the variable declaration, add the font size

Here / / use textSize because IBInspectable doesn't support textSize:UInt = 17 var @IBInspectable UIFont open {didSet{textLabel.font = UIFont.systemFont (ofSize: CGFloat (textSize))}}

The UIFont was used because it was not supported for the time being UInt

We can also do some things before InterfaceBuilder rendering

Override open func (prepareForInterfaceBuilder) {super.prepareForInterfaceBuilder (Interface) / / builder rendering is performed before will not affect the real operation effect of layer.borderColor = UIColor.lightGray.cgColor layer.borderWidth = 0.5 layer.cornerRadius = 3}

Here, this custom View is finished, see the use of the download Storyboard

Drag a UIView
to modify the Class property

IOS custom View

You’ll see these attributes when you save them

IOS custom View

When the setting is complete, InterfaceBuilder will render it immediately

IOS custom View

Here I’m going to set a few properties

IOS custom View

With this custom View, then there is a similar effect anywhere. We just drag him out like a drag UILabel and simply set the properties (or you can create them by hand code). Of course, this is just a simple demo, and it doesn’t involve events, Layer, animations, etc. if you’re interested, talk about it next time.