iOS走近商城APP(二 購物車常用控件)

開篇

上篇文章中簡單了說了下APP的基本框架和布局，今天我們就來說一下在軟件中常用到的控件以及實現他們的方法。上篇文章:iOS走近商城APP(一)(今天值班整座大樓靜悄悄，好恐怖-_-、)。

購物車相關

控件一

• 商品加入購物車前的規格選擇界面

  

  控件1

  如上圖中紅色框內的內容，是可以顯示商品的規格內容，進行單選，要設置他的默認顏色，選中字體顏色和選中邊框顏色，整個模塊是根據商品的實際內容來決定的布局，底部是一個可以滾動的tableview。那么我們怎么實現它呢，方法1.自己封裝一個控件，不過在處理數據和自適應布局上對經驗有一定要求。方法2.使用第三方控件。這里推薦一個 DKFilterView

上圖是git上的示例圖，我們按照框架的方法把條件約束后的方法做網絡請求就可以得到庫存和我們想要的數據了，下面我們來好好看一下這個框架。

對比最上面的一張圖，我們在用到框架的時候改變最多的無非以下兩個地方，顏色和標題

先說顏色，我們根據自己的需求自定義顏色然后在對應的邏輯里進行顏色替換。

//顏色的設置
        self.buttonNormalColor = DK_NORMALTITLE_COLOR;   //未選中標題顏色
        self.buttonHighlightColor = DK_SELECTTITLE_COLOR; //選中標題顏色
        self.buttonNormalBorderColor =DK_NORMALBORDER_COLOR; //未選中邊框顏色
        self.buttonSelectBorderColor = DK_SELECTBORDER_COLOR; //選中邊框顏色

然后在這個方法的選中邏輯里進行顏色的變換(注意邏輯)

- (void)buttonSelected:(UIButton *)button;

然后關于標題和劃線，因為試圖是一個tableview ，我們處理的地方就在他的組頭試圖和組尾試圖的協議方法里。

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;

-(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;

在尾試圖的那條虛線，處理兩種方法，1：找UI要一張虛線的圖，創建試圖放上去，簡單粗暴，缺點是以后如果需要改變顏色樣式需要重新要圖。 2：自己繪制虛線。

UIView *foot = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, 20)];
    foot.backgroundColor = [UIColor whiteColor];
    //layer
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];

    [shapeLayer setFillColor:[[UIColor lightGrayColor] CGColor]];

    //設置虛線的顏色 - 顏色請必須設置
    [shapeLayer setStrokeColor:[UIColor lightGrayColor].CGColor];

    //設置虛線的高度
    [shapeLayer setLineWidth:1.0f];

    //設置類型
    [shapeLayer setLineJoin:kCALineJoinRound];

    /*
     2.f=每條虛線的長度
     2.f=每兩條線的之間的間距
     */
    [shapeLayer setLineDashPattern:
     [NSArray arrayWithObjects:[NSNumber numberWithInt:2.f],
      [NSNumber numberWithInt:2.f],nil]];

    // Setup the path
    CGMutablePathRef path1 = CGPathCreateMutable();

    /*
     代表初始坐標的x，y
     y:要和下面的y一樣。
     */
    CGPathMoveToPoint(path1, NULL,10, 10);

    /*
     代表坐標的x，y
     要與上面的y大小一樣，才能使平行的線，不然會畫出斜線
     */
    CGPathAddLineToPoint(path1, NULL, width-20,10);

    //賦值給shapeLayer
    [shapeLayer setPath:path1];

    //清除
    CGPathRelease(path1);

    //可以把self改成任何你想要的UIView.
    [[foot layer] addSublayer:shapeLayer];

注釋已經加的很清楚了，但是如果覺得仍然復雜呢，這里放上一個封裝好的方法， 一句話實現頁面切換加載的動畫效果和線的繪制 ,一句話實現了虛線的繪制(關于各種線的繪制會繼續封裝加入新的東西，歡迎star)。

//調用繪制虛線
        [[GS_DrawLineManager manager]GS_DrawImaginaryLineWithStartPoint:CGPointMake(20, 100) EndPoint:CGPointMake(300, 100) LineColor:[UIColor blackColor] LineHeight:1.0f InView:view];

控件二

• 商品數量增加控件

這個控件在購物車界面還是不可缺少的吧，實現方法一樣我們可以自己封裝，自己去設置他的控件的安排和邏輯的處理，如下圖

但是如果要是不想封裝的話這里就放一個網上看到的例子吧， 傳送門

頁面緩沖動畫效果封裝

• 頁面緩沖加載動畫

  比如美團和餓了么，在切換頁面數據加載出現之前會有緩沖動畫出現，那么我們怎么在我們的軟件中實現呢，根據網上資料和圖片以及自己的整理封裝，實現一句話調用加載，一句話消失，類似于SVProgressHUD的用法。

調用方法代碼如下：

view = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];

    [self.view addSubview:view];

    //加載轉場動畫
    [[GS_SVPmanager manager]GS_SVPshowGif:self];

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

        //調用繪制虛線
        [[GS_DrawLineManager manager]GS_DrawImaginaryLineWithStartPoint:CGPointMake(20, 100) EndPoint:CGPointMake(300, 100) LineColor:[UIColor blackColor] LineHeight:1.0f InView:view];

    //動畫加載結束
    [[GS_SVPmanager manager]GS_SVPhidGif:self];

        NSLog(@quot;結束了quot;);
    });

如下圖所示，我們創建一個單利用來控制GIF顯示和消失，單例文件的位置如下圖：

這里放上git地址： 一句話實現緩沖動畫

后記

每一個成熟的軟件都不是簡簡單單的幾篇文章能夠說明的，上一篇介紹了框架和代碼風格，今天介紹了幾種常用的控件，但是其中為說到的地方還有很多，有時間會繼續補充更新。希望對用到這一塊的有所幫助。