IOS custom control development, ios custom control

IOS custom control development, ios custom control

Work needs: Recently I am working on iOS charts. I found many third-party libraries that could not achieve results, so I decided to write a control myself.

#0 goals

I hope to write a general chart control (for this project only). Although the development is more difficult, I can learn a lot. The widget is easy to use and can be self-adjusted to support screen rotation.

 

#1 preparations

• Various online materials
• I have studied the built-in controls of the system, all of which are based on UIView.
• The storyboard is used during development. A View is added to the page to control the size. The custom control is placed in this view and filled up, so that the program can adapt to the screen size.

 

#2 start Customization

Create a custom control and inherit from the UIView.

//// LGChartView. h // feikangApp /// Created by Luna Gao on 15/10/29. // Copyright©2015 All rights reserved. // # import <UIKit/UIKit. h> @ interface LGChartView: UIView-(instancetype) initWithParentView :( UIView *) view; @ end

　　

/// LGChartView. m // feikangApp /// Created by Luna Gao on 15/10/29. // Copyright©2015 All rights reserved. // # import "LGChartView. h "@ implementation LGChartViewUIView * parentView;-(instancetype) initWithParentView :( UIView *) view {parentView = view; return [self init];}-(instancetype) init {return [self initWithFrame: CGRectZero];}-(instancetype) initWithFrame :( CGRect) frame {frame = CGRectMake (0, 0, parentView. frame. size. width, parentView. frame. size. height); self = [super initWithFrame: frame]; if (self) {self. backgroundColor = [UIColor clearColor]; self. autoresizesSubviews = YES; self. autoresizingMask = signature | signature;} return self;}-(void) layoutSubviews {[self setNeedsDisplay];}-(void) drawRect :( CGRect) rect {CGContextRef context = Signature (); CGContextSetRGBStrokeColor (context, 0.0f, 0.0f, 0.0f, 1); // The line color CGContextMoveToPoint (context, CGRectGetMinX (self. frame), CGRectGetMaxY (self. frame)-16); CGContextAddLineToPoint (context, CGRectGetMaxX (self. frame), CGRectGetMaxY (self. frame)-16); CGContextStrokePath (context); CGContextSetLineWidth (context, 1.0);} @ end

The initWithParentView method is used to pass in the parent View. The size of the parent View is used to determine the size of the custom control. I feel a little strange here, although it is the solution I have come up ···

Where

self.autoresizesSubviews = YES;self.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;

These two statements are particularly important. The Code ensures that the control changes with the size of the parent View on the screen when switching between the horizontal and vertical screens of the page.

The following Method

-(void)layoutSubviews {    [self setNeedsDisplay];}

This ensures that the custom control can follow the refresh when switching between landscape and landscape screens.

In the last drawRect method, I handed over all the functions of drawing a graph to it.

#3 reference in controller

This step is very simple.

Put a UIView In the storyboard. This UIView determines the display position and size of the custom control on the interface, which is obtained in the associated controller. So far, the storyboard has been completed.

/// TempDetailChartViewController. h // feikangApp // Created by Luna Gao on 15/10/29. // Copyright©2015 All rights reserved. // # import <UIKit/UIKit. h> # import "LGChartView. h "@ interface TempDetailChartViewController: UIViewController @ property (weak, nonatomic) IBOutlet UIView * chartView; @ end

　　

 

Next, reference the custom control we wrote in this controller and hand over the parent class of the custom control to the referenced UIView.

- (void)viewDidLoad {    [super viewDidLoad];        LGChartView *chartControl = [[LGChartView alloc] initWithParentView:self.chartView];    [self.chartView addSubview:chartControl];}

For the rest, you don't need to do anything ···

Run the project directly to see the effect. So far, the demo of the custom control has been completed, and the rest is to gradually improve the custom control and add the delegate among it.

#4. Some errors and pitfalls

1. when the custom control is drawn or blurred, check whether the frame of the custom control is modified in the drawRect method. the size, of course, may also be caused by the following one.

2. do not call the [self setNeedsDisplay] Method in the drawRect of the custom control. Many strange errors and problems have occurred before, this is because we have called this thing. · the important thing is to say 3.

3. do not call the [self setNeedsDisplay] Method in the drawRect of the custom control. Many strange errors and problems have occurred before, this is because we have called this thing. · the important thing is to say 3.

4. do not call the [self setNeedsDisplay] Method in the drawRect of the custom control. Many strange errors and problems have occurred before, this is because we have called this thing. · the important thing is to say 3.

#5 others

If you have any questions, errors, or better implementation methods, leave a message below ···