ios 自定义UICollectionViewFlowLayout ios自定义控件

转载

clghxq 2023-11-19 00:00:49

文章标签 移动开发自定义控件控件 #import 文章分类 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

ios 自定义UICollectionViewFlowLayout ios自定义控件_自定义控件

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

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

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

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