IOS--商品的添加與刪除

標籤：懶載入   九宮格   控制項自訂   字典轉模型   

商品的添加與刪除部分介面展示

• 我會採取理論與代碼分離的方式來寫,在代碼中用注釋來說明步驟

• 設計的主要技術

  • 1.九宮格的計算
  • 2.自訂控制項
  • 3.懶載入
  • 4.字典轉模型

九宮格計算

• 這裡值的九宮格並不局限於傳統意義上的3x3格子,這個計算是能夠擴充到nxn格子的計算.
  

• 在這裡主要是拿到商品控制項左上方的點。比如第0個商品的點就是（0.0）

• 在這裡假設每個商品的寬高都是固定的（實際也是這樣的）

• 每個商品的frame的x值等於商品的寬度加上間距再乘以列號

• 每列間距等於整個柜子的寬度減去總商品的寬度再除以每列商品個數減1

• 同樣y也有這樣的規律
  代碼：

/**************  一些常用的變數 begin **************/    // 每一行的列數    NSUInteger colsPerRow = 3;    // 獲得當前商品的索引    NSUInteger index = self.shopsView.subviews.count;    // 商品寬度    CGFloat shopW = 70;    // 商品高度    CGFloat shopH = 90;    /**************  一些常用的變數 end **************/    /**************  計算X值 begin **************/    // 求出列號    NSUInteger col = index % colsPerRow;    // 每一列之間的間距    CGFloat xMargin = (self.shopsView.frame.size.width - colsPerRow * shopW) / (colsPerRow - 1);    // 商品X    CGFloat shopX = (shopW + xMargin) * col;    /**************  計算X值 end **************/    /**************  計算Y值 begin **************/    // 求出行號    NSUInteger row = index / colsPerRow;    // 每一行之間的間距    CGFloat yMargin = 20;    // 商品Y    CGFloat shopY = (shopH + yMargin) * row;    /**************  計算Y值 end **************/

自訂控制項

• 1、分析需要有哪些子控制項
• 2、在initWithFrame:方法中添加子控制項（init方法內部會自動調用initWithFrame:方法）
• 3、在layoutSubviews方法中設定frame等資料，即布局子控制項（註：這裡一定要調用super的layoutSubviews方法）
• 4、重寫set方法為子控制項賦值

- (instancetype)initWithFrame:(CGRect)frame{     if (self = [super initWithFrame:frame]) {        ......        }    return self;}/***********************************************//** * 當前控制項的frame發生改變的時候就會調用 * 這個方法專門用來布局子控制項，設定子控制項的frame */- (void)layoutSubviews{    // 一定要調用super方法    [super layoutSubviews];    ......}/***********************************************/- (void)setShop:(XMGShop *)shop{    _shop = shop;    ......}

懶載入

• 懶載入也叫延時載入，即在第一次用的時候在去載入。下一次再想用的時候也不用不載入了，判斷一下就ok了。懶載入廣泛用於IOS開發中，並且是蘋果官方非常推薦的一種方式。

• 特點：

  • 1、第一次用的時候才載入
  • 2、只會載入一次

• 本質是重寫了get方法

• 程式碼範例

@property (nonatomic, strong) NSArray *shops;//.....................................//- (NSArray *)shops{    if (_shops == nil) {_shops = 。。。。}    return _shops;}

字典轉模型

    return _shops;}

• 好處：

  • 1、在寫字典的時候，很容易將key什麼的寫錯了，但是xcode不會好心報錯的

  • 2、邏輯分開，符合MVC原則

  • 3、讓代碼易於維護

  • 4、提高複用效率

  • 5、。。。。

• 步驟：
  
  • 1、建立一個繼承自NSObject的類
  • 2、.h中聲明需要的屬性，系統會自動產生get和set方法
  • 3、提供一個對象方法
  • 4、提供一個類方法
  • 5、對象方法一般命名是：initWithDict：
  • 6、類方法一般命名是：類名WithDict：
  • 7.要考慮到誰都能用，所有方法中用self，不要寫死了
• 程式碼範例：

//  Shop.h#import <Foundation/Foundation.h>@interface Shop : NSObject@property(nonatomic,strong)NSString *name;@property(nonatomic,strong)NSString *icon;- (instancetype)initWithDict:(NSDictionary *)dict;+ (instancetype)shopWithDict:(NSDictionary*)dict;@end/*-------------------------------------------------------*///  Shop.m#import "Shop.h"@implementation Shop- (instancetype)initWithDict:(NSDictionary *)dict{    if (self =[super init]) {        self.name = dict[@"name"];        self.icon = dict[@"icon"];    }    return self;}+ (instancetype)shopWithDict:(NSDictionary*)dict{    return [[self alloc] initWithDict:dict];}@end

部分代碼展示

#import "ViewController.h"#import "LGShop.h"#import "LGShopView.h"@interface ViewController ()//商品@property (nonatomic, strong) NSArray *shops;//商品柜子@property (weak, nonatomic) IBOutlet UIView *shopsView;//添加按鈕@property (weak, nonatomic) IBOutlet UIButton *addButton;//移除按鈕@property (weak, nonatomic) IBOutlet UIButton *removeButton;- (IBAction)add;- (IBAction)remove;@end@implementation ViewController#pragma mark - lazy- (NSArray *)shops{     if (!_shops) {    //擷取plist檔案路徑    NSString *filePath =  [[NSBundle mainBundle] pathForResource:@"shops.plist" ofType:nil];    //根據路徑載入    NSArray *shopsArray = [NSArray arrayWithContentsOfFile:filePath];    //建立一個臨時可變數值用來裝商品    NSMutableArray *tempArray = [NSMutableArray arrayWithCapacity:shopsArray.count];    //遍曆每一個字典,將其轉換為模型    for (NSDictionary *dict in shopsArray) {        LGShop *shop = [LGShop shopWithDict:dict];        [tempArray addObject:shop];    }         _shops = [tempArray copy];    }    return _shops;}- (void)viewDidLoad {    [super viewDidLoad];    self.removeButton.enabled = NO;}#pragma mark - 當點擊添加商品的時候調用- (IBAction)add {    //九宮格計算,主要計算每個商品的x和y    //每一行的列數    int colsPerRow = 4;    //商品索引    NSUInteger index = self.shopsView.subviews.count;    //商品的高和寬    CGFloat shopH = 90;    CGFloat shopW = 70;    //商品櫃的寬高   // CGFloat shopViewH = self.shopsView.frame.size.height;    CGFloat shopViewW = self.shopsView.bounds.size.width;    //求x    //列號    int cols = index%colsPerRow;    //列間距    CGFloat maginX = (shopViewW - shopW * colsPerRow)/(colsPerRow - 1);    //x值    CGFloat shopX = (shopW + maginX) * cols;    //求y    //行號    unsigned long rows = index/ colsPerRow;    //行間距等於列間距    CGFloat maginY = maginX;    //y值    CGFloat shopY = 20 +(shopH + maginY) * rows;    //商品父控制項    LGShopView *shopView = [[LGShopView alloc] init];    shopView.frame = CGRectMake(shopX, shopY, shopW, shopH);    [self.shopsView addSubview:shopView];    //設定資料    shopView.shop = self.shops[index];    //當添加了倉庫中所有的商品後,不能再添加    self.removeButton.enabled = YES;    self.addButton.enabled = (self.shops.count>self.shopsView.subviews.count);}#pragma mark - 當點擊刪除商品的時候調用- (IBAction)remove {    //移除最後一個添加的商品    [self.shopsView.subviews.lastObject removeFromSuperview];    //當移除完以後不能再移除    self.addButton.enabled =YES;    self.removeButton.enabled = (self.shopsView.subviews.count>0);}@end

• 2

#import "LGShop.h"@implementation LGShop//對類方法和對象方法的實現+ (instancetype)shopWithDict:(NSDictionary *)dict{    return [[self alloc] initWithDict:dict];}- (instancetype)initWithDict:(NSDictionary *)dict{    if (self = [super init]) {        //1.老實轉法        self.name = dict[@"name"];        self.icon = dict[@"icon"];        /*        //2.kvc轉法  下面這一句是使用的KVC        [self setValuesForKeysWithDictionary:dict];         */    }    return self;}@end

• 3
  “`objc
  #import “LGShopView.h”

import “LGShop.h”

@interface LGShopView ()

@property (nonatomic, weak) UIImageView *imageView;

@property (nonatomic, weak) UILabel *nameLabel;

@end

@implementation LGShopView

pragma mark - 添加子控制項

• (nonnull instancetype)initWithFrame:(CGRect)frame
  {
  if (self = [super initWithFrame:frame]) {

  //添加圖片空間UIImageView *shopImageView = [[UIImageView alloc] init];[self addSubview:shopImageView];self.imageView = shopImageView;//添加文字控制項UILabel *nameLabel = [[UILabel alloc] init];nameLabel.textAlignment = NSTextAlignmentCenter;self.nameLabel = nameLabel;[self addSubview:nameLabel];}

  return self;
  }

pragma mark - 設定子控制項的frame

• (void)layoutSubviews
  {
  [super layoutSubviews];

  CGFloat shopW = self.frame.size.width;
  CGFloat shopH = self.frame.size.height;

  self.imageView.frame = CGRectMake(0, 0, shopW, shopW);

  self.nameLabel.frame = CGRectMake(0, shopW, shopW, shopH - shopW);

}

//重寫set方法為子控制項賦值
-(void)setShop:(LGShop *)shop
{
_shop =shop;
self.imageView.image = [UIImage imageNamed:shop.icon];
self.nameLabel.text = shop.name;
}

@end
“`
- 代碼倉庫有全部代碼：
- https://github.com/LGLee/addAndRemoveShop

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

IOS--商品的添加與刪除