Example of the custom load progress bar component of Swift development

Often in development, in order to make the code more concise, we often encapsulate the commonly used functions into components (or UI components, UI controls), and this is also more conducive to the reuse of code.
I wrote an article about how to implement custom components by inheriting UIView: Swift-Inherits UIView implements custom visualization components (with a scorecard sample)

This article describes how to use custom components in storyboard, with the following advantages:

(1) in storyboard we can easily adjust the location, layout, and related constraints of the custom component.
(2) You can set the properties of a custom component (including custom attributes) in the property panel, and the storyboard view area also shows the style in real time.

1, customizing the creation of visual components
Here, for example, customize a simple progress bar component, the user can set the progress bar's progress, size, text color, progress bar color, background color freely.
Original: Swift-Add the use of a custom component in storyboard (custom progress bar component for example)

The key to customizing a component is to use the following two interface Builder (hereinafter referred to as the IB abbreviation) attribute declaration: Ibinspectable and Ibdesignable.
@IBDesignable: Used to identify custom component classes so that views can be updated in real time in storyboard.
@IBInspectable: Used to identify the attribute so that it is viewed in attribute Inspector (property inspector).

Import Uikit

@IBDesignable class Myprogressbar:uiview {

Text label that shows Progress
Private Let Textlabel = Uilabel ()

Show current Progress Area
Private Let bar = UIView ()

Progress
@IBInspectable var percent:int = 0 {
Didset {
If percent > 100 {
Percent = 100
}else If percent < 0 {
Percent = 0
}
Textlabel.text = "\ (percent)%"
Setneedslayout ()
}
}

Text color
@IBInspectable var color:uicolor =. Whitecolor () {
Didset {
Textlabel.textcolor = Color
}
}

progress bar Color
@IBInspectable var barcolor:uicolor = Uicolor.orangecolor () {
Didset {
Bar.backgroundcolor = Barcolor
}
}

progress bar Background Color
@IBInspectable var barbgcolor:uicolor = Uicolor.lightgraycolor () {
Didset {
Layer.backgroundcolor = Barbgcolor.cgcolor
}
}

Init method
Override Init (Frame:cgrect) {
Super.init (Frame:frame)

Initialsetup ()
}

Init method
Required init? (Coder Adecoder:nscoder) {
Super.init (Coder:adecoder)

Initialsetup ()
}

Page initialization Related Settings
Private func Initialsetup ()-> Void {
Bar.backgroundcolor = Self.barcolor
Addsubview (BAR)

Textlabel.textalignment =. Center
Textlabel.numberoflines = 0
Textlabel.textcolor = Self.color
Textlabel.text = "\ (self.percent)%"
Addsubview (Textlabel)
}

Layout-Related Settings
Override Func Layoutsubviews () {
Super.layoutsubviews ()

Layer.backgroundcolor = Self.barBgColor.CGColor

var barframe = bounds
BarFrame.size.width *= (CGFloat (self.percent)/100)
Bar.frame = Barframe

Textlabel.frame = Bounds
}
}
You can use the Code test first:

Import Uikit

Class Viewcontroller:uiviewcontroller {

Override Func Viewdidload () {
Super.viewdidload ()

Let MyProgressBar = MyProgressBar (Frame:cgrectmake (50, 50, 200, 20))
Myprogressbar.percent = 50
Self.view.addSubview (MyProgressBar)
}

Override Func didreceivememorywarning () {
Super.didreceivememorywarning ()
}
}

2, using custom components in storyboard
(1) Open Main.storyboard, add a view from the component library (view)

(2) Change the view class to MyProgressBar in the identity inspector

(3) You can see that the custom component has been rendered and displayed

(4) You can adjust individual custom properties of a component in the Attributes Inspector panel

(Note: If the custom component is not using the IB keyword, it can also be added in storyboard.) It's just that you can't update views and properties in real time in storyboard, and it shows a blank rectangle. ）