UI基础-day02-Shopping-01搭建商城基本框架

效果图

需求

1. 点击"➕"按钮,实现添加商品的功能
2. 通过两种方式构成"商品"(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;
}

总结

1. 以View的方式展示的商品,image和label的分工明确,位置跟随父控件,极好控制.
2. 以Button方式展示的商品,位置需要重新换算,但是可以直接添加另外的事件.