UI基础-day02-Shopping-01搭建商城基本框架
效果图
需求
- 点击"➕"按钮,实现添加商品的功能
- 通过两种方式构成"商品"(1.商品为View 2.商品为Button)
代码
-(void)layoutUI{
......
//按钮点击事件
//[btnAdd addTarget:self action:@selector(btnAddViewClick) forControlEvents:UIControlEventTouchDown];
[btnAdd addTarget:self action:@selector(btnAddButtonClick) forControlEvents:UIControlEventTouchDown];
......
}
第一种方式: 商品组成( View 包含 image 和 lable)
// 点击添加按钮的事件
-(void)btnAddViewClick{
//父控件
UIView * tempView = [[UIView alloc]init];
tempView.frame = (CGRect){{0,0},{70,90}};
//图片
UIImage * imgTemp = [UIImage imageNamed:@"danjianbao"];
UIImageView * imgViewTemp = [[UIImageView alloc]init];
imgViewTemp.frame = CGRectMake(0, 0, 70, 80);
imgViewTemp.image = imgTemp;
[tempView addSubview:imgViewTemp];
//图片描述
UILabel *lblDescribe = [[UILabel alloc]init];
lblDescribe.text = @"单肩包";
lblDescribe.textAlignment = NSTextAlignmentCenter;//文字居中
lblDescribe.frame = (CGRect){{0,70},{70,20}};
[tempView addSubview:lblDescribe];
[self.shopView addSubview:tempView];
}
第2种方式: 使用 Button来设置商品
// 点击添加按钮的事件
-(void)btnAddButtonClick{
self.shopW = 120;
self.shopH = 90;
UIButton * btnTemp = [[UIButton alloc]init];
btnTemp.frame = CGRectMake(0, 0, self.shopW, self.shopH);
[btnTemp setBackgroundColor:[UIColor yellowColor]];
UIImage * imgTemp = [UIImage imageNamed:@"danjianbao"];
[btnTemp setImage:imgTemp forState:UIControlStateNormal];
[btnTemp setTitle:@"单肩包" forState:UIControlStateNormal];
[btnTemp setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
btnTemp = [self imageAndTitleForButton:btnTemp spaceHeight:0];
[self.shopView addSubview:btnTemp];
}
titleW:会变.(2个字符的宽度:37, 3个字符宽度:55.5).
titleH:默认一行为21.5.
对Button的所有操作,都是在默认的基础上,进行操作得!
文字距离上边框的距离(图片高度 + 间隙)
1.原始文字默认是居中显示.(距离上边距离,也是在默认(居中)距离上进行得)
2.图片的高度.(文字需要放在图片下面)
3.图片和文字之间的间隙.
文字距离左边框的距离 (-图片的宽度)
1.默认文字是位居于,图片的右边.
2.需要将文字位居图片下面,文字还保存原位置,则会显得很靠右.
3.需要减去左边图片的位置.
图片距离右边框
1.图片+文字默认的形式:(图片+文字一起居中)
2.文字移动到图片下面,那么图片就会感觉很靠左边.
3.图片需要居中,减去右边title的宽度.
// 设置Button的位置:图片(上)+标题(下)
-(UIButton *)imageAndTitleForButton:(UIButton *)btnTemp spaceHeight:(CGFloat) spaceH{
//使图片和文字水平居中显示
btnTemp.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
CGFloat imgH = btnTemp.imageView.frame.size.height;
CGFloat topLocation = imgH + spaceH;
CGFloat imgW = btnTemp.imageView.frame.size.width;
CGFloat leftLocation = -imgW;
CGFloat titleW = btnTemp.titleLabel.bounds.size.width;
[btnTemp setTitleEdgeInsets:UIEdgeInsetsMake(topLocation ,leftLocation, 0.0,0.0)];
[btnTemp setImageEdgeInsets:UIEdgeInsetsMake(0.0, 0.0,0.0,-titleW)];
return btnTemp;
}
总结
- 以View的方式展示的商品,image和label的分工明确,位置跟随父控件,极好控制.
- 以Button方式展示的商品,位置需要重新换算,但是可以直接添加另外的事件.