一、介绍
本人做的app涉及的是教育行业，所以关于练习题的开发肯定是家常便饭。例如，选择题、填空题、连线题、判断题等，每一种题型都需要技术去实现，没啥多大难度，这里呢，就给出实现连线题的核心代码吧。过了年后，好久没写笔记了，今天就简单开始吧~~~
二、思想
采用上下文在画图的方法，首先确定起点和终点的坐标，然后通过两点画一条直线。
三、代码
(1)常量定义
lianXianHeader.h
//
// LianXianHeader.h
// LianxianDemo
//
// Created by 夏远全 on 2018/2/9.
// Copyright © 2018年 beijing. All rights reserved.
// #ifndef LianXianHeader_h
#define LianXianHeader_h static CGFloat const BWidth = ; //按钮的宽度
static CGFloat const BHeight = ; //按钮的高度
static CGFloat const margin = ; //按钮与屏幕的左边距、右边距
static CGFloat const Lpadding = ; //左边按钮上下间距
static CGFloat const Rpadding = ; //右边按钮上下间距 static NSString* const kBeginPositionNotification = @"kBeginPositionNotification";
static NSString* const kEndPositionNotification = @"kEndPositionNotification";
static NSString* const kClearAllLineNotification = @"kClearAllLineNotification";
static NSString* const kFreshDrawLineNotification = @"kFreshDrawLineNotification"; #endif /* LianXianHeader_h */
(2)连线模型
lianXianModel.h
//
// LianXianModel.h
// LianxianDemo
//
// Created by 夏远全 on 2018/2/8.
// Copyright © 2018年 beijing. All rights reserved.
// #import <Foundation/Foundation.h>
#import <UIKit/UIKit.h> @interface LianXianModel : NSObject
@property (nonatomic, strong) NSArray *questions;
@property (nonatomic, strong) NSArray *options;
@property (nonatomic, strong) NSArray *relationships;
@end
lianXianModel.m
//
// LianXianModel.m
// LianxianDemo
//
// Created by 夏远全 on 2018/2/8.
// Copyright © 2018年 beijing. All rights reserved.
// #import "LianXianModel.h" @implementation LianXianModel @end
(3)绘制连线
lianXianDrawView.h
//
// LianxianDrawView.h
// Ubbsz
//
// Created by 夏远全 on 2018/2/9.
// Copyright © 2018年 beijing. All rights reserved.
//
// #import <UIKit/UIKit.h> @interface LianxianDrawView : UIView @end
lianXianDrawView.m
//
// LianxianDrawView.m
// Ubbsz
//
// Created by 夏远全 on 2018/2/9.
// Copyright © 2018年 beijing. All rights reserved.
// #import "LianxianDrawView.h"
#import "LianXianHeader.h" @interface LianxianDrawView()
{
NSMutableArray *pointArray; //存储当前的一对坐标，起始点和终止点
NSMutableArray *lineArray; //存储全部的连线，每一条连线就是一对坐标
NSString *startPointString; //当前起点
NSString *endPointString; //当前起点
CGFloat lineWidth;
} @end @implementation LianxianDrawView //对进行重写，以便在视图初始化的时候创建并设置自定义的Context
- (id)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) { [self setupDefaultValue];
[self regesterNotification];
}
return self;
} //初始值
- (void)setupDefaultValue{ pointArray=[[NSMutableArray alloc]init];
lineArray=[[NSMutableArray alloc]init];
lineWidth = 2.0f;
self.backgroundColor = [UIColor colorWithRed:/255.0 green:/255.0 blue:/255.0 alpha:];
} //注册通知
- (void)regesterNotification{ [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(toucheBegin:) name:kBeginPositionNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(toucheEnd:) name:kEndPositionNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(clearLine:) name:kClearAllLineNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(freshNeedsDisplay:) name:kFreshDrawLineNotification object:nil];
} //对drawRect进行重写
- (void)drawRect:(CGRect)rect
{ //获取当前上下文，
CGContextRef context=UIGraphicsGetCurrentContext();
CGContextBeginPath(context);
CGContextSetLineWidth(context, lineWidth);
//线条拐角样式，设置为平滑
CGContextSetLineJoin(context,kCGLineJoinRound);
//线条开始样式，设置为平滑
CGContextSetLineCap(context, kCGLineCapRound); //查看lineArray数组里是否有线条，有就将之前画的重绘，没有只画当前线条
if ([lineArray count] > ) { for (int i=; i < [lineArray count]; i++) {
NSArray * array=[NSArray arrayWithArray:[lineArray objectAtIndex:i]];
if ([array count] > && [array count]% == ) { CGContextBeginPath(context);
CGPoint myStartPoint = CGPointFromString(array.firstObject);
CGContextMoveToPoint(context, myStartPoint.x, myStartPoint.y); CGPoint myEndPoint = CGPointFromString(array.lastObject);
CGContextAddLineToPoint(context, myEndPoint.x,myEndPoint.y); CGContextSetStrokeColorWithColor(context,[[UIColor grayColor] CGColor]);
CGContextSetLineWidth(context, lineWidth);
CGContextStrokePath(context);
}
}
}
} //接收起点按钮点击通知事件
- (void)toucheBegin:(NSNotification *)notification{ CGRect beginFrame = [notification.object CGRectValue];
CGPoint startPoint = CGPointMake(CGRectGetMaxX(beginFrame), CGRectGetMidY(beginFrame));
startPointString = NSStringFromCGPoint(startPoint); if (pointArray.count==) {
[pointArray addObject:startPointString];
}
else{
[pointArray replaceObjectAtIndex: withObject:startPointString];
}
} //接收终点按钮点击通知事件
- (void)toucheEnd:(NSNotification *)notification{ CGRect endFrame = [notification.object CGRectValue];
CGPoint endPoint = CGPointMake(CGRectGetMinX(endFrame), CGRectGetMidY(endFrame));
endPointString = NSStringFromCGPoint(endPoint); if (pointArray.count==) {
[pointArray replaceObjectAtIndex: withObject:endPointString];
}
else{
[pointArray addObject:endPointString];
} [self clearSomeHistoryLineView];
[self addLA];
[self setNeedsDisplay];
} //接收清除按钮点击通知事件
- (void)clearLine:(NSNotification *)notification{
[self clearAllLineView];
} //接收重新绘制通知事件
- (void)freshNeedsDisplay:(NSNotification *)notification{ NSArray *relationslineArray = notification.object;
lineArray = [NSMutableArray arrayWithArray:relationslineArray];
[self setNeedsDisplay];
} //添加连线
-(void)addLA{
NSArray *array = [NSArray arrayWithArray:pointArray];
[lineArray addObject:array];
[pointArray removeAllObjects];
} //清除所有的连线
- (void)clearAllLineView
{
[pointArray removeAllObjects];
[lineArray removeAllObjects];
[self setNeedsDisplay];
} //移除历史交叉重复的连线
- (void)clearSomeHistoryLineView{ NSMutableArray *arrayM = [NSMutableArray array];
for (int i=; i < [lineArray count]; i++) {
NSArray *array = [NSArray arrayWithArray:[lineArray objectAtIndex:i]];
if ([array count] > ) { NSString *hisBePointString = array.firstObject;
NSString *hisEnPointString = array.lastObject; if ([startPointString isEqualToString:hisBePointString] || [endPointString isEqualToString:hisEnPointString]) {
[arrayM addObject:array];
}
}
}
[lineArray removeObjectsInArray:arrayM];
} //移除通知
-(void)dealloc{
[[NSNotificationCenter defaultCenter] removeObserver:self];
} @end
(4)计算尺寸
LianXianFrameUitity.h
//
// LianXianSizeUitity.h
// LianxianDemo
//
// Created by 夏远全 on 2018/2/9.
// Copyright © 2018年 beijing. All rights reserved.
// #import <Foundation/Foundation.h>
#import "LianXianModel.h" @interface LianXianFrameUitity : NSObject + (CGRect)calculateSizeWithModel:(LianXianModel *)lianxianModel; @end
LianXianFrameUitity.m
//
// LianXianSizeUitity.m
// LianxianDemo
//
// Created by 夏远全 on 2018/2/9.
// Copyright © 2018年 beijing. All rights reserved.
// #import "LianXianFrameUitity.h"
#import "LianXianHeader.h" @implementation LianXianFrameUitity + (CGRect)calculateSizeWithModel:(LianXianModel *)lianxianModel{ NSUInteger questionsCount = lianxianModel.questions.count;
NSUInteger optionsCount = lianxianModel.options.count; CGFloat LHeight = questionsCount * (BHeight+Lpadding) + Lpadding;
CGFloat RHeight = optionsCount * (BHeight+Rpadding) + Rpadding; CGFloat kWidth = [UIScreen mainScreen].bounds.size.width; //默认宽度为屏幕的宽 return CGRectMake(, , kWidth, MAX(LHeight, RHeight));
} @end
(5)创建组件
LianXianComponentsView.h
//
// LianXianComponentsView.h
// LianxianDemo
//
// Created by 夏远全 on 2018/2/6.
// Copyright © 2018年 beijing. All rights reserved.
// #import <UIKit/UIKit.h>
#import "LianXianModel.h" @interface LianXianComponentsView : UIView
@property (nonatomic, strong) LianXianModel *lianxianModel;
@end
LianXianComponentsView.m
//
// LianXianComponentsView.m
// LianxianDemo
//
// Created by 夏远全 on 2018/2/6.
// Copyright © 2018年 beijing. All rights reserved.
// #import "LianXianComponentsView.h"
#import "LianxianDrawView.h"
#import "LianXianHeader.h" @interface LianXianComponentsView() {
NSMutableArray *_leftBtns;
NSMutableArray *_rightBtns;
UIButton *currentLeftBtn;
CGFloat borderWith;
} @end @implementation LianXianComponentsView //对进行重写，以便在视图初始化的时候创建并设置自定义的Context
- (id)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self setupDefalutValue];
}
return self;
} //设置默认值
- (void)setupDefalutValue{ self.backgroundColor = [UIColor clearColor];
borderWith = 2.5;
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(restStatus:) name:kClearAllLineNotification object:nil];
} //接收模型
-(void)setLianxianModel:(LianXianModel *)lianxianModel{ _lianxianModel = lianxianModel;
[self setupLianXianUnit]; if (lianxianModel && lianxianModel.relationships.count>) {
[self showLianXianResult];
}
else{
[self listClickLeftButton];
}
} //绘制连线选项
- (void)setupLianXianUnit{ _leftBtns = [[NSMutableArray array] init];
_rightBtns = [[NSMutableArray array] init]; CGFloat kWidth = self.frame.size.width;
CGFloat kHeight = self.frame.size.height;
CGFloat LY = (kHeight-(BHeight+Lpadding)*(self.lianxianModel.questions.count-) - BHeight)/;
CGFloat RY = (kHeight-(BHeight+Rpadding)*(self.lianxianModel.options.count-) - BHeight)/; for (NSInteger i =; i < self.lianxianModel.questions.count; i++) {
UIButton *btn = [self createButtonWithFrame:CGRectMake(margin, LY+(BHeight+Lpadding)*i, BWidth, BHeight) title:[NSString stringWithFormat:@"%@",self.lianxianModel.questions[i]] tag:i];
[self addSubview:btn];
[_leftBtns addObject:btn];
} for (NSInteger i =; i< self.lianxianModel.options.count; i++) {
UIButton *btn = [self createButtonWithFrame:CGRectMake(kWidth-margin-BWidth, RY+(BHeight+Rpadding)*i, BWidth, BHeight) title:[NSString stringWithFormat:@"%@",self.lianxianModel.options[i]] tag:i];
[self addSubview:btn];
[_rightBtns addObject:btn];
}
} -(UIButton *)createButtonWithFrame:(CGRect)frame title:(NSString *)title tag:(NSInteger)tag{ UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = frame;
btn.layer.cornerRadius = 5.0;
btn.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn.layer.borderWidth = borderWith;
btn.layer.masksToBounds = YES;
btn.tag = tag; [btn setBackgroundImage:[self imageWithColor:[UIColor whiteColor]] forState:UIControlStateNormal];
[btn setBackgroundImage:[self imageWithColor:[UIColor colorWithRed:/255.0 green:/255.0 blue:/255.0 alpha:]] forState:UIControlStateHighlighted];
[btn setBackgroundImage:[self imageWithColor:[UIColor colorWithRed:/255.0 green:/255.0 blue:/255.0 alpha:]] forState:UIControlStateSelected]; [btn addTarget:self action:@selector(tapBtn:) forControlEvents:UIControlEventTouchUpInside];
[btn setTitle:title forState:UIControlStateNormal];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; return btn;
} - (UIImage *)imageWithColor:(UIColor *)color
{
CGFloat imageW = ;
CGFloat imageH = ;
UIGraphicsBeginImageContextWithOptions(CGSizeMake(imageW, imageH), NO, 0.0);
[color set];
UIRectFill(CGRectMake(, , imageW, imageH));
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
} -(void)tapBtn:(UIButton *)btn{ //判断左边按钮是否处于选择状态，只有首先左边处于此状态下，右边的按钮点击才能进行连线操作（当前仅支持单向连线）
if ([_rightBtns containsObject:btn]) {
BOOL isLeftBtnSelected = NO;
for (UIButton *leftBtn in _leftBtns) {
if (leftBtn.selected) {
isLeftBtnSelected = YES;
break;
}
}
if (!isLeftBtnSelected) {
return;
}
} if ([_leftBtns containsObject:btn]) { //设置连线起点
currentLeftBtn.selected = NO;
currentLeftBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;
btn.selected = YES;
currentLeftBtn = btn;
currentLeftBtn.layer.borderColor = [UIColor colorWithRed:/255.0 green:/255.0 blue:/255.0 alpha:].CGColor; //设置终点按钮可以选中状态
for (UIButton *rightBtn in _rightBtns) {
rightBtn.layer.borderColor = [UIColor colorWithRed:/255.0 green:/255.0 blue:/255.0 alpha:].CGColor;
} //发送起点通知
[[NSNotificationCenter defaultCenter] postNotificationName:kBeginPositionNotification object:[NSValue valueWithCGRect:btn.frame]];
} if ([_rightBtns containsObject:btn]) { for (UIButton *leftBtn in _leftBtns) {
if (leftBtn.selected) { //发送终点通知
[[NSNotificationCenter defaultCenter] postNotificationName:kEndPositionNotification object:[NSValue valueWithCGRect:btn.frame]]; //自动设置起始选择按钮
[self listClickLeftButton]; break;
}
}
}
} //自动设置起始选择按钮
- (void)listClickLeftButton{ if (!currentLeftBtn) {
[self tapBtn:_leftBtns[]];
return;
} NSUInteger tag = currentLeftBtn.tag;
if (tag < _leftBtns.count-) { //自动下移
[self tapBtn:_leftBtns[tag+]];
}
else{
[self tapBtn:_leftBtns[]]; //重新开始
}
} //绘制默认已经连线的选项，此处仅仅做成绩预览使用，不能再编辑
- (void)showLianXianResult{ for (UIButton *leftBtn in _leftBtns) {
leftBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;
leftBtn.selected = leftBtn.userInteractionEnabled = NO;
} for (UIButton *rightBtn in _rightBtns) {
rightBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;
rightBtn.selected = rightBtn.userInteractionEnabled = NO;
} if (self.lianxianModel.relationships.count == ) {
return;
} NSMutableArray *relationslineArray = [NSMutableArray array]; for (NSString *result in self.lianxianModel.relationships) { NSString *question = [[result componentsSeparatedByString:@"-"] firstObject];
NSString *option = [[result componentsSeparatedByString:@"-"] lastObject];
NSMutableArray *pointArray = [NSMutableArray array]; for (UIButton *leftBtn in _leftBtns) { if ([leftBtn.currentTitle isEqualToString:question]) {
CGPoint startPoint = CGPointMake(CGRectGetMaxX(leftBtn.frame), CGRectGetMidY(leftBtn.frame));
NSString *startPointString = NSStringFromCGPoint(startPoint);
[pointArray addObject:startPointString];
break;
}
} for (UIButton *rightBtn in _rightBtns) { if ([rightBtn.currentTitle isEqualToString:option]) {
CGPoint endPoint = CGPointMake(CGRectGetMinX(rightBtn.frame), CGRectGetMidY(rightBtn.frame));
NSString *endPointString = NSStringFromCGPoint(endPoint);
[pointArray addObject:endPointString];
break;
}
} [relationslineArray addObject:pointArray];
} if (relationslineArray.count > ) {
[[NSNotificationCenter defaultCenter] postNotificationName:kFreshDrawLineNotification object:relationslineArray];
}
} //重置初始状态
- (void)restStatus:(NSNotification *)notification{ for (UIButton *leftBtn in _leftBtns) {
leftBtn.selected = NO;
leftBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;
[self tapBtn:_leftBtns[]]; //重新开始
}
} @end
(6)连线容器
LianXianContainerView.h
//
// LianXianContainerView.h
// LianxianDemo
//
// Created by 夏远全 on 2018/2/8.
// Copyright © 2018年 beijing. All rights reserved.
// #import <UIKit/UIKit.h>
#import "LianXianComponentsView.h"
#import "LianxianDrawView.h" @interface LianXianContainerView : UIView
@property (nonatomic, strong) LianXianComponentsView *componentsView;
@property (nonatomic, strong) LianxianDrawView *lianXianView;
@end
LianXianContainerView.m
//
// LianXianContainerView.m
// LianxianDemo
//
// Created by 夏远全 on 2018/2/8.
// Copyright © 2018年 beijing. All rights reserved.
// #import "LianXianContainerView.h"
#import "LianXianComponentsView.h"
#import "LianxianDrawView.h"
#import "LianXianModel.h" @implementation LianXianContainerView - (id)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self setup];
}
return self;
} - (void)setup{ self.lianXianView = [[LianxianDrawView alloc]initWithFrame:self.bounds];
self.componentsView = [[LianXianComponentsView alloc] initWithFrame:self.bounds]; [self addSubview:self.lianXianView];
[self addSubview:self.componentsView];
} @end
(7)显示连线
//
// ViewController.m
// LianxianDemo
//
// Created by tianjing on 15/3/31.
// Copyright © 2015年 tianjing. All rights reserved.
// #import "ViewController.h" #import "LianXianContainerView.h"
#import "LianXianFrameUitity.h"
#import "LianXianModel.h"
#import "LianXianHeader.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; UIButton *clearBtn = [[UIButton alloc] initWithFrame:CGRectMake(, , , )];
clearBtn.backgroundColor = [UIColor greenColor];
[clearBtn setTitle:@"重置" forState:UIControlStateNormal];
[clearBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[clearBtn addTarget:self action:@selector(clear:) forControlEvents:UIControlEventTouchUpInside]; //创建模型
LianXianModel *lianxianModel = [[LianXianModel alloc] init];
lianxianModel.questions = @[@"天",@"好",@"人"]; /// 左边选项
lianxianModel.options = @[@"夏",@"世",@"锋"]; /// 右边选项
//lianxianModel.relationships = @[@"天-世",@"好-夏",@"人-锋"]; /// 连线关系，如果不为空，就只显示，不能编辑
//clearBtn.hidden = (lianxianModel.relationships.count>0); //连线视图
CGRect frame = [LianXianFrameUitity calculateSizeWithModel:lianxianModel];
LianXianContainerView *containerView = [[LianXianContainerView alloc] initWithFrame:frame];
containerView.center = self.view.center;
containerView.componentsView.lianxianModel = lianxianModel; [self.view addSubview:containerView];
[self.view addSubview:clearBtn];
} - (void)clear:(UIButton *)sender{
[[NSNotificationCenter defaultCenter] postNotificationName:kClearAllLineNotification object:nil];
} @end
四、效果
提示：
左边按钮每次只有一个处于可连状态，而且每一次连接完会循环自动下移。
右边所有按钮始终处于可连状态。
同一个按钮再一次连接新的连线后，之前旧的跟其相关的连线都会被取消。
五、采坑
如果练习题的界面是放在cell中的，因为复用的问题，在发送起点和终点的通知时，要对通知做唯一标识处理。
如果不这么做，可能会出现的bug是：上一道做过的连线题的连线会出现在下一道还没有做过的连线题上。