效果图![](https://img-blog.csdn.net/20150531113033744)
项目源码:https://github.com/JiaKeli/IOS/tree/master/%E4%B9%9D%E5%AE%AB%E6%A0%BC%E8%A7%A3%E9%94%81
布局:北京是一个imageview 中间是一个view 连接自定义LockView
实现思路:
1:添加9个button
2:监听触摸事件 如果触摸点在button上则设置button的selected = yes
3:把触摸过程中的button添加到集合
4:绘制线条
此view未做成功处理,自己可根据数据集合来进行判断进行下一步
代码:
#import "LockView.h"
@interface LockView()
@property (nonatomic,strong) NSMutableArray *btns;
@property (nonatomic,assign) CGPoint moveP;
@end
@implementation LockView
- (NSMutableArray *)btns{
if (_btns == nil) {
_btns = [NSMutableArray array];
}
return _btns;
}
//解析xib的时候调用
- (id)initWithCoder:(NSCoder *)aDecoder{
if (self = [super initWithCoder:aDecoder]) {
// 添加按钮
[self addBtns];
}
return self;
}
//添加按钮
- (void)addBtns{
for (int i = 0; i < 9; i++) {
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
//设置button图片
[button setImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
//设置按钮不可交互
button.userInteractionEnabled = NO;
[self addSubview:button];
}
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
//当前触摸点
CGPoint point = [self pointWithTouches:touches];
//获取触摸的按钮
UIButton *button = [self buttonWithPoint:point];
//设置按钮状态
if (button && button.selected == NO) {
button.selected = YES;
[self.btns addObject:button];
}
}
//手指移动
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
//当前触摸点
CGPoint pos = [self pointWithTouches:touches];
self.moveP = pos;
//获取触摸按钮
UIButton *btn = [self buttonWithPoint:pos];
if (btn.selected == NO && btn) {
btn.selected = YES;
[self.btns addObject:btn];
}
//重绘
[self setNeedsDisplay];
}
//手指抬起取消选择 路径取消
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
//取消所有按钮选中
[self.btns makeObjectsPerformSelector:@selector(setSelected:) withObject:@NO];
[self.btns removeAllObjects];
[self setNeedsDisplay];
}
//获取触摸点
- (CGPoint)pointWithTouches:(NSSet *)touches{
UITouch *touch = [touches anyObject];
return [touch locationInView:self];
}
//获取触摸按钮
- (UIButton *)buttonWithPoint:(CGPoint)point{
//设置当线条滑动到btn中心时返回btn
CGFloat width = 30;
for (UIButton *button in self.subviews) {
CGFloat x = button.center.x - width * 0.5;
CGFloat y = button.center.y - width * 0.5;
CGRect frame = CGRectMake(x, y, width, width);
if (CGRectContainsPoint(frame, point)) {
return button;
}
}
return nil;
}
//设置按钮frame
- (void)layoutSubviews{
[super layoutSubviews];
CGFloat col = 0;
CGFloat row = 0;
CGFloat btnW = 74;
CGFloat btnH = 74;
CGFloat btnX = 0;
CGFloat btnY = 0;
int tolCol = 3;
CGFloat margin = (self.bounds.size.width - tolCol * btnW) / (tolCol + 1);
//给按钮设置位置
for (int i = 0; i < self.subviews.count; i++) {
UIButton *button = self.subviews[i];
col = i % tolCol;
row = i / tolCol;
btnX = margin + (margin + btnW) * col;
btnY = (margin + btnH) * row;
button.frame = CGRectMake(btnX, btnY, btnW, btnH);
}
}
- (void)drawRect:(CGRect)rect{
UIBezierPath *path = [UIBezierPath bezierPath];
for (int i = 0; i < self.btns.count; i++) {
UIButton *btn = self.btns[i];
if (i == 0) {
[path moveToPoint:btn.center];
}else{
[path addLineToPoint:btn.center];
}
}
//所有选中的按钮之间都连线
//连接多余的那跟线
[path addLineToPoint:_moveP];
[[UIColor greenColor]set];
path.lineWidth = 8;
path.lineJoinStyle = kCGLineJoinRound;
//渲染到视图
[path stroke];
}
@end