·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> app软件开发 >> IOS开发 >> iOS自定义控件开发(上)

iOS自定义控件开发(上)

作者:佚名      IOS开发编辑:admin      更新时间:2022-07-23

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

《iOS 自定义控件开发(上)》

《iOS 自定义控件开发(中)》

#0 目标

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

 

#1 准备工作

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

 

#2 开始自定义

创建自定义控件,继承自UIView。

//
//  LGChartView.h
//
//  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
//
//  Created by Luna Gao on 15/10/29.
//  Copyright © 2015年  All rights reserved.
//

#import "LGChartView.h"

@implementation LGChartView

UIView *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创建一个ViewController,在其中放入一个UIView,这个UIView决定了自定义控件在界面中的显示位置和大小,并在其相关联的ChartViewController中获取。至此,storyboard的工作完成。

//
//  ChartViewController.h
//
//  Created by Luna Gao on 15/10/29.
//  Copyright © 2015年 All rights reserved.
//

#import <UIKit/UIKit.h>
#import "LGChartView.h"

@interface ChartViewController : 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 其他

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