实现效果:




低保真界面原型
代码讲解(创建部分)
1创建界面:初始化各种组件,搭建界面
#pragma mark- 初始化 :原点+高
- (instancetype)initWithOrigin:(CGPoint)origin andHeight:(CGFloat)height andDataArray:(NSMutableArray *)data;
{
// 位置信息
_origin = origin;
_show=NO;
_height = height;
// 填充数据
dataArray=data;
numOfMenu=[dataArray count];
currentSelectedMenudIndex=-1;
// 绘制栏目头的轮廓
self=[self initWithFrame:CGRectMake(origin.x, origin.y, ScreenSize.size.width,height)];
// 每个button的宽度
CGFloat buttonInertval=self.frame.size.width/numOfMenu;
// 根据列数创建button
[self createButton:buttonInertval andHeight:height];
// 创建tableview
[self createTableView:origin];
// 创建背景+添加弹回事件
[self createBackgroud:origin];
// 给menu添加底边
[self createShadow];
self.backgroundColor=[UIColor whiteColor];
return self;
}
绘制button
根据列数在menu上绘制button,需要给给他们都打上tag,这样可以通过tag来获取你创建的button
1 注意:tag 赋值要正整数(用了两个小时调错,发现是给tag赋值为0 ⊙﹏⊙b汗)
2 通过tag获取button方法为(注意类型转换)
- (UIView *)viewWithTag:(NSInteger)tag;
3 控制文字和图片的排版:使用edgeInsets属性控制button内图文布局 后面函数的参数距离(上,左,下,右)的距离
// 图片插在了这里 edge :边缘 优势
// 设置button中文字和图片
tmpButton.titleEdgeInsets=UIEdgeInsetsMake(0,0,0,0);
tmpButton.imageEdgeInsets = UIEdgeInsetsMake(0, buttonInertval*7/8, 0, 0);
4 关联点击
[tmpButton addTarget:self action:@selector(btnPressed:) forControlEvents:UIControlEventTouchUpInside];
button说到这里,上相关完整代码
/*------------------------------------------生成button-----------------------------------------*/
-(void)createButton:(CGFloat)buttonInertval a