iOS開發的UI製作中動態和靜態儲存格的基本使用教程_IOS

靜態儲存格的使用
一、實現效果與說明

說明：觀察上面的展示效果，可以發現整個介面是由一個tableview來展示的，上面的資料都是固定的，且幾乎不會改變。

要完成上面的效果，有幾種方法：

（1）可以直接利用代碼，返回三組，在判斷每組有多少行，展示些什麼資料，這樣寫“死”的代碼建議絕不要使用。

（2）稍微靈活一些的，可以把plist檔案一懶載入的方式，載入到程式中，動態擷取。但是觀察介面結構，很容易看出這樣需要進行模型嵌套，很麻煩。

（3）storyboard提供了靜態儲存格這個功能，可以很方便的完成上面的介面展示效果。（提示：在實際的開發中很少這樣使用）

二、使用靜態儲存格完成簡單介面展示的過程

在類似的開發中，如果整個介面都是tableview，那麼直接讓控制器繼承自UItableviewcontroller.

修改主控制器，讓其繼承自UItableviewcontroller

把storyboard中預設的uiview刪掉，直接拖一個viewcontroller

當拖入一個viewcontroller的時候，它上面預設就會有一個cell,預設情況下，這個cell是動態，也就是預設是看不見的。

把cell設定成靜態，在屬性面板的content  中設定為static cell（靜態cell）所見即所得 (WYSIWYG)  注意必須更改這裡的這個屬性。

讓它和主控制器關聯

接下來，可以依次設定顯示的圖片和文字。

設定標題有兩種方式：

1是雙擊更改

2是點擊子控制項  lable修改

按照介面需要，設定輔助視圖

設定有多少組，每組有多少行。
設定組：
點擊tableview   設定屬性面板的sections屬性。

設定每組多少行：

小技巧：如果寫的儲存格千年不變，那麼可以先寫一組中的一行，再拷貝，稍作修改即可。
注意：靜態儲存格是實際開發中，很少用到，此處只當知識點介紹。

在UITableview的應用中使用動態儲存格來完成app應用程式管理介面的搭建
一、實現效果

說明：該樣本在storyboard中使用動態儲存格來完成。

二、實現

1.專案檔結構和plist檔案

2.實現過程以及代碼

在tableview的屬性選取器中選擇動態儲存格。

說明：在storyboard中直接使用其內建的動態儲存格完成tableviewcell的定義，並建立了一個管理該cell的類，進行了連線。

實現代碼：

資料模型部分：

YYappInfo.h檔案

複製代碼 代碼如下:

//
//  YYappInfo.h
//  01-使用動態儲存格來完成app應用程式管理介面的搭建
//
//  Created by 孔醫己 on 14-6-2.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import <Foundation/Foundation.h>

@interface YYappInfo : NSObject
@property(nonatomic,copy)NSString *size;
@property(nonatomic,copy)NSString *download;
@property(nonatomic,copy)NSString *icon;
@property(nonatomic,copy)NSString *name;

-(instancetype)initWithDict:(NSDictionary *)dict;
+(instancetype)appInfoWithDict:(NSDictionary *)dict;
@end

YYappInfo.m檔案

複製代碼 代碼如下:

//
//  YYappInfo.m
//  01-使用動態儲存格來完成app應用程式管理介面的搭建
//
//  Created by 孔醫己 on 14-6-2.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYappInfo.h"

@implementation YYappInfo

-(instancetype)initWithDict:(NSDictionary *)dict
{
    if (self=[super init]) {
        //使用KVC
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}

+(instancetype)appInfoWithDict:(NSDictionary *)dict
{

    return [[self alloc]initWithDict:dict];
}
@end

視圖部分

 YYappCell.h檔案

複製代碼 代碼如下:

//
//  YYappCell.h
//  01-使用動態儲存格來完成app應用程式管理介面的搭建
//
//  Created by 孔醫己 on 14-6-2.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import <UIKit/UIKit.h>

@class YYappInfo,YYappCell;

@protocol YYappCellDelegate <NSObject>
-(void)btnDidClick:(YYappCell *)cell;

@end
@interface YYappCell : UITableViewCell

@property(nonatomic,strong)YYappInfo *app;
//@property(nonatomic,strong)YYViewController *controller;
@property(nonatomic,strong)id <YYappCellDelegate> delegate;

@end

YYappCell.m檔案

複製代碼 代碼如下:

//
//  YYappCell.m
//  01-使用動態儲存格來完成app應用程式管理介面的搭建
//
//  Created by 孔醫己 on 14-6-2.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYappCell.h"
#import "YYappInfo.h"

@interface YYappCell ()
@property (weak, nonatomic) IBOutlet UIImageView *appimg;

@property (weak, nonatomic) IBOutlet UILabel *apptitle;
@property (weak, nonatomic) IBOutlet UILabel *appdownload;
@property (weak, nonatomic) IBOutlet UIButton *appbtn;

@end

複製代碼 代碼如下:

@implementation YYappCell

-(void)setApp:(YYappInfo *)app
{
    _app=app;
    self.apptitle.text=_app.name;
    self.appdownload.text=[NSString stringWithFormat:@"大小 %@ | 下載量 %@次",_app.size,_app.download];
    self.appimg.image=[UIImage imageNamed:_app.icon];
   
}

#pragma mark- 完成按鈕點擊事件

- (IBAction)btnOnclick:(UIButton *)sender
{
    //按鈕被點擊後，變為不可用狀態
    sender.enabled=NO;
   
    //通知代理，完成提示下載已經完成的動畫效果
    if ([self.delegate respondsToSelector:@selector(btnDidClick:)]) {
        //一般而言，誰觸發就把誰傳過去
        [self.delegate  btnDidClick:self];
    }
}

@end

主控制器

YYViewController.m檔案

複製代碼 代碼如下:

//
//  YYViewController.m
//  01-使用動態儲存格來完成app應用程式管理介面的搭建
//
//  Created by 孔醫己 on 14-6-2.
//  Copyright (c) 2014年 itcast. All rights reserved.
//

#import "YYViewController.h"
#import "YYappInfo.h"
#import "YYappCell.h"

@interface YYViewController ()<UITableViewDataSource,YYappCellDelegate>
@property(nonatomic,strong)NSArray *apps;
@property (strong, nonatomic) IBOutlet UITableView *tableview;

@end

複製代碼 代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

#pragma mark- 使用懶載入先把plist檔案中得資料載入進來
-(NSArray *)apps
{
    if (_apps==Nil) {
        NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"apps_full.plist" ofType:Nil];
        NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath];
       
        NSMutableArray *modles=[NSMutableArray arrayWithCapacity:arrayM.count];
        for (NSDictionary *dict in arrayM) {
            YYappInfo *appinfo=[YYappInfo appInfoWithDict:dict];
            [modles addObject:appinfo];
        }
        _apps=[modles copy];
    }
    return _apps;
}

#pragma mark- 設定tableview的資料來源方法
//組
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}
//行
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.apps.count;
}
//組-行-資料
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //建立cell
    static NSString *identifier=@"app";
    YYappCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
    //設定cell的資料
    YYappInfo *appinfo=self.apps[indexPath.row];
    //設定代理
    cell.delegate=self;
    cell.app=appinfo;
    //返回cell
    return cell;
}

#pragma mark- 設定代理
-(void)btnDidClick:(YYappCell *)cell
{
    //取出模型
    YYappInfo *app=cell.app;
    NSLog(@"daili");
    UILabel *lab=[[UILabel alloc]init];
    //提示的顯示位置
    lab.frame=CGRectMake(60, 300, 200, 20);
    //設定提示文本
    lab.text=[NSString stringWithFormat:@"%@已經下載完成",app.name];
    //設定文本背景顏色
    [lab setBackgroundColor:[UIColor grayColor]];
    [self.view addSubview:lab];
    lab.alpha=1.0;
   
    //設定動畫效果
    [UIView animateWithDuration:2.0 animations:^{
        lab.alpha=0.0;
    } completion:^(BOOL finished) {
        //把彈出的提示資訊從父視圖中刪除
        [lab removeFromSuperview];
    }];
}

#pragma mark-隱藏狀態列
-(BOOL)prefersStatusBarHidden
{
    return YES;
}

@end

補充說明

　　在程式中通過標示符取出對應的cell，是因為在storyboard中已經對cell打上了標示符（app）的標籤。

複製代碼 代碼如下:

//組-行-資料
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //建立cell
    static NSString *identifier=@"app";
    YYappCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
    //設定cell的資料
    YYappInfo *appinfo=self.apps[indexPath.row];
    //設定代理
    cell.delegate=self;
    cell.app=appinfo;
    //返回cell
    return cell;
}