IOS custom UIView and iosuiview

IOS custom UIView and iosuiview
IOS generally uses several methods to customize the UIView.

1. Custom View of the stored code of the inherited UIView

2. Use the custom View with xib and code

3. Save the custom View of xib (which does not require business processing)

This article mainly introduces the custom UIView of the stored code and the custom UIView that can display the effect in real time in the storeboard.

First

The above is the design interface, which can directly display the rounded corner and border line of a View.

The circular pie chart above is customized in pure code.

1. Implement custom UIView for real-time display in storeboard

1. Create MyView. h to inherit UIView

# Import <UIKit/UIKit. h> // set the class to visual design IB_DESIGNABLE @ interface MyView: UIView // IBInspectable for visual design attributes // Border Width @ property (nonatomic, assign) IBInspectable float borderWidth; // border color @ property (nonatomic, retain) IBInspectable UIColor * borderColor; // rounded corner @ property (nonatomic, assign) IBInspectable float cornerRadius; @ end

Note the two key labels above.

IB_DESIGNABLE: indicates that this class can display real-time results in the storeboard.

IBInspectable: indicates that this attribute can be modified in storeboard.

2. Implementation of MyView. m

//// MyView. m // 01_CirProgress // Created by xgao on 15/10/29. // Copyright (c) 2015 xgao. all rights reserved. // # import "MyView. h "@ implementation MyView // Border Width-(void) setBorderWidth :( float) borderWidth {self. layer. borderWidth = borderWidth;} // border color-(void) setBorderColor :( UIColor *) borderColor {self. layer. borderColor = borderColor. CGColor;} // rounded corner-(void) setCornerRadius :( float) cornerRadius {self. layer. cornerRadius = cornerRadius;} @ end

3. Add a view to storeboad and set the view class as the MyView we just created

The attributes are the attributes with the IBInspectable keyword added to the. h file. Here, the results can be modified in real time.

 

2. Implement custom View with pure code

1. Create a MyProgress class file that inherits UIView. MyProgress. h is as follows:

# Import <UIKit/UIKit. h> @ interface MyProgress: UIView // The current progress value @ property (nonatomic, assign) float progressValue; @ end

2. MyProgress. m is as follows:

# Import "MyProgress. h "@ implementation MyProgress {float _ proValue;} // rewrite the initialization method-(id) initWithFrame :( CGRect) frame {self = [super initWithFrame: frame]; if (self) {// set the background to transparent self. backgroundColor = [UIColor clearColor];} return self;} // reset the progressValue Attribute-(void) setProgressValue :( float) progressValue {_ progressValue = progressValue; // re-draw the UI [self setNeedsDisplay];} // drawing-(void) drawRect :( CGRect) rect {// obtain the drawing context CGContextRef ctx = UIGraphicsGetCurrentContext (); /***** draw the circle background line ***** // float r = rect of the circle radius. size. width/2.0; // full circle CGFloat endAngle = M_PI * 2; // draw a circular CGContextAddArc (ctx, r, 0, endAngle, 0 ); // background color CGContextSetRGBFillColor (ctx, 0.7, 0.7, 0.7, 1); // complete CGContextFillPath (ctx ); /***** draw the slice area ***** // calculation end angle endAngle = M_PI * 2 * _ progressValue;/*** circle * parameter 1: c Current context * parameter 2: x circle X coordinate * parameter 3: y circle Y coordinate * parameter 4: radius circle radius * parameter 5: startAngle angle * parameter 6: endAngle end angle * parameter 7: whether clockwise is counterclockwise */CGContextAddArc (ctx, r, 0, endAngle, 0); // concatenate a line to generate an arc CGContextAddLineToPoint (ctx, r, r); // Add a vertex on the connected line to connect the line to the vertex, just like a bow. You can add multiple vertices // CGContextAddLineToPoint (ctx, r + 20, r + 20); // fill color CGContextSetRGBFillColor (ctx, 0, 0, 1, 1); // complete CGContextFillPath (ctx );}

3. Call the custom MyProgress class

# Import "MyProgress. h "@ interface ViewController () {MyProgress * _ myProView;} @ end @ implementation ViewController-(void) viewDidLoad {[super viewDidLoad]; // create a custom control _ myProView = [[MyProgress alloc] initWithFrame: CGRectMake (100, 50,180,180)]; // default progress _ myProView. progressValue = 0.2; [self. view addSubview: _ myProView];}