最近在写智能升降桌的项目，项目中最难的应该是操作界面的绘制和硬件数据交互，今天我给小友们说一下思路和部分代码。
上面的操作界面是由两张图片组成的，但是点击的效果是用UIBezierPath和CAShapeLayer绘制的，正好覆盖每一个按钮，对了，看到上面那个大大的数字0了吗？那是新加的字体库，在这里顺便一下添加一个新的字体：
下面废话不多说上代码：
Controller.m中：
// 操作view
ControDeviceBut *controVc = [[ControDeviceBut alloc] initWithFrame:CGRectMake((screenWidth-ViewHeight(200))/2, (CGRectGetHeight(self.view.frame)-ViewHeight(350))/2+ViewHeight(180) ,ViewHeight(200), ViewHeight(200)) ButtonType:ButtonType_Round];
[controVc addTarget:self action:@selector(buttonClick:) forResponseState:ButtonClickType_TouchUpInside];
// [controVc addTarget:self action:@selector(longPressButtonClick:) forResponseState:ButtonClickType_LongPress];
controVc.delegate = self;
[self.view addSubview:controVc];
#pragma mark - 按钮单击事件
-(void)buttonClick:(ControDeviceBut *)button{
}
在ControDeviceBut.h中：
typedef enum ButtonType{
/**
* 圆形五个按钮 上下左右 中心
*/
ButtonType_Round=0,
}ButtonType;
typedef enum ButtonClickType
{
//手势抬起响应
ButtonClickType_TouchUpInside=0,
//长按0.5s响应
ButtonClickType_LongPress,
}ButtonClickType;
typedef enum SelectButtonPosition{
SelectButtonPosition_Top3 =1,
SelectButtonPosition_Top2 =1<<1 ,
SelectButtonPosition_Top1 =1<<2 ,
SelectButtonPosition_Relase =1<<3,
SelectButtonPosition_Add =1<<4,
}SelectButtonPosition;
@interface ControDeviceBut : UIImageView
{
NSMutableArray *layerArray;
SEL touchAction;
SEL longPressAction;
id handel;
UIGestureRecognizerState responseState;
ButtonType buttonType;
UILabel *titleLabel;
NSTimer *longPressTimer;
UILongPressGestureRecognizer *longPressGestureRecognizer;
//长按手势未执行
BOOL longPressNotComplete ;
}
/** * 获取选中位置 */@property (nonatomic) enum SelectButtonPosition selectButtonPosition;
@property (weak,nonatomic)iddelegate;
-(instancetype)initWithFrame:(CGRect)frame ButtonType:(ButtonType)type;
-(void)addTarget:(id)target action:(SEL)action forResponseState:(ButtonClickType)state;
/**
* 设置响应位置，
* @param position 可以传多个参数
*/
-(void)setResponsePosition:(SelectButtonPosition)position;
在ControDeviceBut.m中：
#define PathKey @"path"
#define PositionKey @"position"
#define PathDic(path,position) [NSDictionary dictionaryWithObjectsAndKeys:path,@"path",position,@"position", nil]
#define OffSet 2.5
@interface ControDeviceBut(){
NSInteger selectTag;
UIButton *saveBut;
}
@property (nonatomic) NSMutableArray *pathArray;
@property (nonatomic,strong)UIImageView *controButImg;
@end
@implementation ControDeviceBut
-(instancetype)initWithFrame:(CGRect)frame ButtonType:(ButtonType)type{
self=[super initWithFrame:frame];
if (!self) {
return nil; }
self.userInteractionEnabled=YES;
longPressGestureRecognizer = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressGesture:)];
longPressGestureRecognizer.minimumPressDuration=0.05;
longPressGestureRecognizer.allowableMovement = 10;
longPressGestureRecognizer.delegate = self;
[self addGestureRecognizer:longPressGestureRecognizer];
[self creatUI];
return self; }
-(void)create{
//自定义界面
}
// 如果界面有button
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch {
if ([touch.view isKindOfClass:[UIButton class]]){
return NO; }
return YES; }
#pragma mark - 添加响应事件
-(void)addTarget:(id)target action:(SEL)action forResponseState:(ButtonClickType)state{
handel=target;
switch (state) {
case ButtonClickType_LongPress:
longPressAction=action;
break;
case ButtonClickType_TouchUpInside:
touchAction=action;
break;
default:
break;
}
}
#pragma mark - 设置响应位置
-(void)setResponsePosition:(SelectButtonPosition)position{
if (!_pathArray) {
_pathArray=[[NSMutableArray alloc]init];
}else{
[_pathArray removeAllObjects];
}
if (buttonType==ButtonType_Round) {
if (position & SelectButtonPosition_Top3) {
[_pathArray addObject:[self roundShapWithPosition:SelectButtonPosition_Top3]];
}
if (position & SelectButtonPosition_Top2) {
[_pathArray addObject:[self roundShapWithPosition:SelectButtonPosition_Top2]];
}
if (position & SelectButtonPosition_Top1) {
[_pathArray addObject:[self roundShapWithPosition:SelectButtonPosition_Top1]];
}
if (position & SelectButtonPosition_Relase) {
[_pathArray addObject:[self roundShapWithPosition:SelectButtonPosition_Relase]];
}
if (position & SelectButtonPosition_Add) {
[_pathArray addObject:[self roundShapWithPosition:SelectButtonPosition_Add]];
} } }
#pragma mark - 圆弧贝塞尔曲线
-(NSDictionary *)roundShapWithPosition:(SelectButtonPosition)position{
float radius=CGRectGetWidth(self.frame)/2.0-ViewHeight(7); // 显示点击颜色的圆半径
float width=radius-CGRectGetWidth(self.controButImg.frame)/2; //内圆白色
int positionTag=log2(position);
CGPoint center=CGPointMake(CGRectGetWidth(self.frame)/2, CGRectGetHeight(self.frame)/2);
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
float startAngle;
float endAngle;
if (position == SelectButtonPosition_Top1 || position == SelectButtonPosition_Top2 || position == SelectButtonPosition_Top3) {
startAngle = M_PI + positionTag*M_PI/3;
endAngle = startAngle + M_PI/3;
}else if(position == SelectButtonPosition_Relase){
startAngle = 0;
endAngle = startAngle+M_PI/2;
}else{
startAngle = M_PI/2;
endAngle = startAngle+M_PI/2; }
[bezierPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
[bezierPath addArcWithCenter:center radius:radius-width startAngle:endAngle endAngle:startAngle clockwise:NO];
[bezierPath closePath];
return PathDic(bezierPath, [NSNumber numberWithInteger:position]);
}
#pragma mark - 获取路径数组
-(NSMutableArray *)pathArray{
if (!_pathArray) {
_pathArray=[[NSMutableArray alloc]init];
[_pathArray addObject:[self roundShapWithPosition:SelectButtonPosition_Top3]];
[_pathArray addObject:[self roundShapWithPosition:SelectButtonPosition_Top2]];
[_pathArray addObject:[self roundShapWithPosition:SelectButtonPosition_Top1]];
[_pathArray addObject:[self roundShapWithPosition:SelectButtonPosition_Relase]];
[_pathArray addObject:[self roundShapWithPosition:SelectButtonPosition_Add]]; }
return _pathArray; }
好像就只能写这么多字了，，请看下面——UI界面2