你的位置:首页 > 操作系统

[操作系统]iOS 自定义控件开发


工作需要,最近在进行iOS方面的图表工作。找了很多第三方库都无法实现效果,所以决定自己写一个控件。

#0 目标

希望可以写一个通用的图表控件(仅针对此项目),虽然开发难度增大,但是可以学习到很多知识。并且控件使用简单,可以自适应大小,支持屏幕旋转。

 

#1 准备工作

  • 网上各种查资料
  • 研究了一下系统自带控件,全部基于UIView
  • 开发过程中使用storyboard,在页面中加入一个View来控制大小,自定义控件放入此view中并且填充满,让程序可以自适应屏幕尺寸。

 

#2 开始自定义

创建自定义控件,继承自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 = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;  }  return self;}-(void)layoutSubviews {  [self setNeedsDisplay];}- (void)drawRect:(CGRect)rect {  CGContextRef context = UIGraphicsGetCurrentContext();  CGContextSetRGBStrokeColor(context, 0.0f, 0.0f, 0.0f, 1);//线条颜色  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

其中initWithParentView方法将父View传入进来,通过父View的大小来确定我们自定义控件的大小。我对于此处感觉有点怪怪的,虽然是我想到的解决方案···

其中

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

这两句尤为重要,这两句代码保证了在页面横屏竖屏切换时,控件会随着屏幕中父View的大小改变而我们的自定义控件跟着改变。

下面这个方法

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

保证了在页面横屏竖屏切换时,自定义控件可以跟随刷新。

最后的drawRect方法,我将所有的绘制图形的功能全部交给了它。

#3 在controller中引用

这一步已经非常的简单了。

在storyboard中放入一个UIView,这个UIView决定了自定义控件在界面中的显示位置和大小,并在其相关联的controller中获取。至此,storyboard的工作完成。

//// 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

  

 

下一步,在此controller中引用我们写的自定义控件,并且将自定义控件的父类交给刚刚引用的UIView中。

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

剩下的,就什么都不用搞了···

直接跑项目看效果即可。至此,自定义控件的demo就完成了,剩下的工作就是逐步完善自定义控件,在其中加入委托等等等等。

#4 遇到的一些报错和坑

1. 自定义控件出现所绘制内容被拉伸,模糊等情况,请检查是否在drawRect此方法中修改了自定义控件的frame.size的大小,当然,也有可能是由于下面一条引起的。

2. 不要在自定义控件中的drawRect中调用[self setNeedsDisplay]方法,之前出现了众多奇奇葩葩的报错和问题,就是因为调用了这玩意···重要的事情说3便

3. 不要在自定义控件中的drawRect中调用[self setNeedsDisplay]方法,之前出现了众多奇奇葩葩的报错和问题,就是因为调用了这玩意···重要的事情说3便

4. 不要在自定义控件中的drawRect中调用[self setNeedsDisplay]方法,之前出现了众多奇奇葩葩的报错和问题,就是因为调用了这玩意···重要的事情说3便

#5 其他

如有问题,或不正确的地方,或有更好的实现方法,请不要吝啬,在下面留言吧···么么哒···