IOS之UI--小实例项目--添加商品和商品名

UI综合小实例

  • 内容大纲：
    • 1、懒加载
    • 2、项目动态图展示
    • 3、项目思路
    • 4、源代码

1、懒加载

通过重写set-get方法中的get方法，并结合if语句实现有且仅有一次的懒加载

2、项目动态图展示

3、项目思路

前期准备工作：资源拷贝，storyboard添加按钮的控件，按钮连线略过 直接上代码思路：

商品图片icon+商品名称label -> 都添加到UIView的实例对象imageView上
imageView逐步按照九宫格算法添加到较大的UIView的实例对象imageViews上
imageViews添加到默认就有的父控件View上。

另外九宫格算法：就是获取(x,y)坐标的算法。不难，好好思考。
最后就是数据加载和优化上使用前面提到的懒加载。

4、源代码

  1 #import "ViewController.h"
  2 
  3 @interface ViewController ()
  4 @property (weak, nonatomic) IBOutlet UIButton *removeBtn;
  5 @property (weak, nonatomic) IBOutlet UIButton *addBtn;
  6 
  7 @property (weak, nonatomic) IBOutlet UIView *shopsView;
  8 
  9 @property (nonatomic,assign)float viewWidth;
 10 @property (nonatomic,assign)float viewHeight;
 11 
 12 @property (nonatomic,strong)NSArray *shops;
 13 
 14 @end
 15 
 16 @implementation ViewController
 17 
 18 -(NSArray*) shops{
 19     
 20     if (_shops == nil) {
 21         _shops = @[
 22                    @{
 23                        @"icon" : @"danjianbao",
 24                        @"name" : @"单肩包"
 25                        },
 26                    @{
 27                        @"icon" : @"liantiaobao",
 28                        @"name" : @"链条包"
 29                        },
 30                    @{
 31                        @"icon" : @"qianbao",
 32                        @"name" : @"钱包"
 33                        },
 34                    @{
 35                        @"icon" : @"shoutibao",
 36                        @"name" : @"手提包"
 37                        },
 38                    @{
 39                        @"icon" : @"shuangjianbao",
 40                        @"name" : @"双肩包"
 41                        },
 42                    @{
 43                        @"icon" : @"xiekuabao",
 44                        @"name" : @"斜挎包"
 45                        }
 46                    ];
 47     }
 48     return _shops;
 49 }
 50 
 51 - (void)viewDidLoad {
 52     //获取View的宽和高
 53     self.viewWidth = self.shopsView.frame.size.width;
 54     self.viewHeight = self.shopsView.frame.size.height;
 55 //    self.removeBtn.isEnabled = ;
 56     
 57 }
 58 
 59 //凡是涉及到九宫格的，肯定是和行和列号相关联系的。所以一开始就可以从行和列号开始下手
 60 - (IBAction)add {
 61     
 62     /*=================抽离出常用的变量===================*/
 63     //图片的宽高
 64     NSInteger picWidth = 70;
 65     NSInteger picHeight = 70;
 66     //文字的宽高
 67     NSInteger txtWidth = 70;
 68     NSInteger txtHeight = 30;
 69     
 70     
 71     //创建一个商品和一段文字组合的父控件
 72     UIView *shopView = [[UIView alloc] init];
 73     
 74     //添加一个图片
 75     
 76     //1先获取行和列号(第几张，商品的索引->然后计算获取行和列)
 77     NSUInteger index = self.shopsView.subviews.count;
 78     NSLog(@"子控件的个数是：%lu",(unsigned long)index);
 79     //行号
 80     NSUInteger i = index % 3 ;
 81     //列号
 82     NSUInteger j = index / 3 ;
 83     
 84     NSLog(@"即将添加的子控件的位置：(%lu,%lu)",(unsigned long)i,(unsigned long)j);
 85     //求出x
 86     CGFloat x = i * self.viewWidth / 3.0;
 87     //求出y
 88     CGFloat y = j * self.viewHeight / 3.0;
 89     NSLog(@"即将添加的子控件的坐标：(%f,%f)",x,y);
 90     
 91     
 92     //将商品父控件添加到View中
 93     shopView.frame = CGRectMake(0, 0, 70, 100);
 94     //将这个商品父控件添加到shopsView
 95     [self.shopsView addSubview:shopView];
 96     
 97     NSDictionary* dic = self.shops[index];
 98     NSString* qianbao = dic[@"icon"];
 99     NSLog(@"%@",qianbao);
100     NSString* text = dic[@"name"];
101     NSLog(@"%@",text);
102     
103     UIImageView* iconView = [[UIImageView alloc] init];
104     UIImage* image = [UIImage imageNamed:qianbao];
105     iconView.image = image;
106     iconView.frame = CGRectMake(x, y, picWidth, picHeight);
107     [shopView addSubview:iconView];
108     
109     UILabel *nameLabel = [[UILabel alloc] init];
110     nameLabel.textAlignment = NSTextAlignmentCenter;
111     nameLabel.text = text;
112     nameLabel.frame = CGRectMake(x, y+70, txtWidth, txtHeight);
113     [shopView addSubview:nameLabel];
114     
115     
116 
117     self.addBtn.enabled = (self.shopsView.subviews.count < 6);
118     self.removeBtn.enabled = (self.removeBtn.subviews.count > 0);
119 
120 }
121 /*===============设置remove按钮的状态===============*/
122 
123 //添加一个图片和文字的方法
124 //-(ui)
125 - (IBAction)remove {
126     //这里需要设置，如果没有商品，就应该取消按钮的可点击状态
127     [self.shopsView.subviews.lastObject removeFromSuperview];
128     self.removeBtn.enabled = (self.shopsView.subviews.count != 0);
129     self.addBtn.enabled = (self.shopsView.subviews.count < 6);
130 }
131 
132 @end

 

posted @ 2015-11-15 20:06  何杨  阅读(774)  评论(0)  编辑  收藏  举报