界面是一个九宫格的布局.九宫格实现思路.
先确定有多少列 cloum = 3;
计算出每列之间的距离
计算为: CGFloat margin = (当前View的宽度 - 列数 * 按钮的宽度) / 总列数 + 1
每一列的X的值与它当前所在的行有关
当前所在的列为:curColum = i % cloum
每一行的Y的值与它当前所在的行有关.
当前所在的行为:curRow = i / cloum
每一个按钮的X值为, margin + 当前所在的列 * (按钮的宽度+ 每个按钮之间的间距)
每一个按钮的Y值为 当前所在的行 * (按钮的宽度 + 每个按钮之间的距离)
无论是Xib,还是代码,都做一次初始化
step1:界面搭建
-(void)awakeFromNib{
初始化
[self setUP];
}
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
初始化
[self setUP];
}
return self;
}
初始化
- (void)setUP{
for (int i = 0; i < 9; i++) {
添加按钮
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
设置图片
[btn setImage:[UIImage imageNamed:@"gesture_node_normal"] forState:UIControlStateNormal];
设置选中状态的下图片
[btn setImage:[UIImage imageNamed:@"gesture_node_highlighted"] forState:UIControlStateSelected];
添加按钮
[self addSubview:btn];
}
}
布局子控件
- (void)layoutSubviews{
[super layoutSubviews];
总列数
int cloumn = 3;
CGFloat btnWH = 74;
每列之间的间距
CGFloat margin = (self.bounds.size.width - cloumn * btnWH) / (cloumn + 1);
当前所在的列
int curClounm = 0;
当前所在的行
int curRow = 0;
CGFloat x = 0;
CGFloat y = 0;
取出所有的控件
for (int i = 0; i < self.subviews.count; i++) {
计算当前所在的列
curClounm = i % cloumn;
计算当前所在的行.
curRow = i / cloumn;
计算Y
x = margin + (margin + btnWH) * curClounm;
计算Y.
y = (margin +btnWH) * curRow;
UIButton *btn = self.subviews[i];
btn.frame = CGRectMake(x, y, btnWH, btnWH);
}
}
step2:按钮选中
/**
* 获取当前手指所在的点
*
* @param touches touches集合
*
* @return 当前手指所在的点.
*/
- (CGPoint)getCurrentPoint:(NSSet *)touches{
UITouch *touch = [touches anyObject];
return [touch locationInView:self];
} /**
* 判断一个点在不在按钮上.
*
* @param point 当前点
*
* @return 如果在按钮上, 返回当前按钮, 如果不在返回nil.
*/
- (UIButton *)btnRectContainsPoint:(CGPoint)point{
遍历所有的子控件
for (UIButton *btn in self.subviews) {
判断手指当前点在不在按钮上.
if (CGRectContainsPoint(btn.frame, point)) {
在按钮上.返回当前按钮
return btn;
}
}
return nil; } 手指点击时让按钮成选中状态
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 判断当前手指在不在按钮上,如果在按钮上, 让按钮成为选中状态.
.获取当前手指所在的点
CGPoint curP = [self getCurrentPoint:touches];
.判断当前手指所在的点在不在按钮上.
UIButton *btn = [self btnRectContainsPoint:curP];
if (btn) {
btn.selected = YES;
}
} 手指移动时,按钮选中,连线到当前选中的按钮
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{ 判断当前手指在不在按钮上,如果在按钮上, 让按钮成为选中状态.
.获取当前手指所在的点
CGPoint curP = [self getCurrentPoint:touches];
.判断当前手指所在的点在不在按钮上.
UIButton *btn = [self btnRectContainsPoint:curP];
if (btn) {
btn.selected = YES;
}
}
step3:连线
@interface ClockView() /**
* 选中的按钮数组.
* 每次选中一个按钮时,都把按钮添加到数组当中.移动添加到按钮当中时做一次重绘.
* 重绘过程中取出所有保存的按钮, 判断是不是第一个按钮, 如果是第一个按钮,那就让它成为路径的起点.
* 如果不是第一个按钮,那就添加一根线到按钮的中心点.
*/
@property(nonatomic,strong)NSMutableArray *selectBtn; @end 懒加载数组.
-(NSMutableArray *)selectBtn{
if (_selectBtn == nil) {
_selectBtn = [NSMutableArray array];
}
return _selectBtn;
} 手指点击时让按钮成选中状态
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{ 判断当前手指在不在按钮上,如果在按钮上, 让按钮成为选中状态.
.获取当前手指所在的点
CGPoint curP = [self getCurrentPoint:touches]; .判断当前手指所在的点在不在按钮上.
UIButton *btn = [self btnRectContainsPoint:curP];
if (btn && btn.selected == NO) {如果按钮已经是选中状态,就不让它再添加到数组当中
让按钮成为选中状态
btn.selected = YES;
把选中按钮添加到数组当中
[self.selectBtn addObject:btn];
}
} 手指移动时,按钮选中,连线到当前选中的按钮
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
判断当前手指在不在按钮上,如果在按钮上, 让按钮成为选中状态.
.获取当前手指所在的点
CGPoint curP = [self getCurrentPoint:touches];
.判断当前手指所在的点在不在按钮上.
UIButton *btn = [self btnRectContainsPoint:curP];
if (btn && btn.selected == NO) {//如果按钮已经是选中状态,就不让它再添加到数组当中
让按钮成为选中状态
btn.selected = YES;
把选中按钮添加到数组当中
[self.selectBtn addObject:btn];
每次添加完毕后做一次重绘.
[self setNeedsDisplay];
}
} - (void)drawRect:(CGRect)rect {
创建路径.
UIBezierPath *path = [UIBezierPath bezierPath];
取出所有保存的选中按钮连线.
for(int i = ; i < self.selectBtn.count;i++){
UIButton *btn = self.selectBtn[i];
判断当前按钮是不是第一个,如果是第一个,把它的中心设置为路径的起点.
if(i == ){
设置起点.
[path moveToPoint:btn.center];
}else{
添加一根线到当前按钮的圆心.
[path addLineToPoint:btn.center];
}
} 设置颜色
[[UIColor redColor] set];
设置线宽
[path setLineWidth:];
设置线的连接样式
[path setLineJoinStyle:kCGLineJoinRound];
绘制路径.
[path stroke];
}
step4:业务逻辑
@interface ClockView() /**
* 选中的按钮数组.
*/
@property(nonatomic,strong)NSMutableArray *selectBtn; /**
* 当前手指移动的点
* 记录当前手指的点,数组当中所有的点都绘制完毕后, 再添加一根线到当前手指所在的点.
*/
@property(nonatomic,assign)CGPoint curP; @end 手指松开时,按钮取消选中状态,清空所有的连线.
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{ .取消所有选中的按钮,查看选中按钮的顺序
NSMutableString *str = [NSMutableString string];
for (UIButton *btn in self.selectBtn) {
[str appendFormat:@"%ld",btn.tag];
btn.selected = NO;
}
.清空所有的连线.
[self.selectBtn removeAllObjects];
.重绘
[self setNeedsDisplay];
NSLog(@"选中按钮顺序为:%@",str);
} - (void)drawRect:(CGRect)rect {
如果数组当中没有元素,就不让它进行绘图.直接返回.
if(self.selectBtn.count <= ) return;
创建路径.
UIBezierPath *path = [UIBezierPath bezierPath];
取出所有保存的选中按钮连线.
for(int i = ; i < self.selectBtn.count;i++){
UIButton *btn = self.selectBtn[i];
判断当前按钮是不是第一个,如果是第一个,把它的中心设置为路径的起点.
if(i == ){
设置起点.
[path moveToPoint:btn.center];
}else{
添加一根线到当前按钮的圆心.
[path addLineToPoint:btn.center];
}
}
连完先中的按钮后, 在选中按钮之后,添加一根线到当前手指所在的点.
[path addLineToPoint:self.curP];
设置颜色
[[UIColor redColor] set];
设置线宽
[path setLineWidth:];
设置线的连接样式
[path setLineJoinStyle:kCGLineJoinRound];
绘制路径.
[path stroke];
}
github下载地址:https://github.com/CrazyZhangSanFeng/shoushijiesuo