iOS開發(fā)的UI制作中動(dòng)態(tài)和靜態(tài)單元格的基本使用教程
靜態(tài)單元格的使用
一、實(shí)現(xiàn)效果與說(shuō)明
說(shuō)明:觀察上面的展示效果,可以發(fā)現(xiàn)整個(gè)界面是由一個(gè)tableview來(lái)展示的,上面的數(shù)據(jù)都是固定的,且?guī)缀醪粫?huì)改變。
要完成上面的效果,有幾種方法:
(1)可以直接利用代碼,返回三組,在判斷每組有多少行,展示些什么數(shù)據(jù),這樣寫“死”的代碼建議絕不要使用。
(2)稍微靈活一些的,可以把plist文件一懶加載的方式,加載到程序中,動(dòng)態(tài)獲取。但是觀察界面結(jié)構(gòu),很容易看出這樣需要進(jìn)行模型嵌套,很麻煩。
(3)storyboard提供了靜態(tài)單元格這個(gè)功能,可以很方便的完成上面的界面展示效果。(提示:在實(shí)際的開發(fā)中很少這樣使用)
二、使用靜態(tài)單元格完成簡(jiǎn)單界面展示的過(guò)程
在類似的開發(fā)中,如果整個(gè)界面都是tableview,那么直接讓控制器繼承自UItableviewcontroller.
修改主控制器,讓其繼承自UItableviewcontroller
把storyboard中默認(rèn)的uiview刪掉,直接拖一個(gè)viewcontroller
當(dāng)拖入一個(gè)viewcontroller的時(shí)候,它上面默認(rèn)就會(huì)有一個(gè)cell,默認(rèn)情況下,這個(gè)cell是動(dòng)態(tài)的,也就是默認(rèn)是看不見(jiàn)的。
把cell設(shè)置成靜態(tài)的,在屬性面板的content 中設(shè)置為static cell(靜態(tài)cell)所見(jiàn)即所得 注意必須更改這里的這個(gè)屬性。
讓它和主控制器關(guān)聯(lián)
接下來(lái),可以依次設(shè)置顯示的圖片和文字。
設(shè)置標(biāo)題有兩種方式:
1是雙擊更改
2是點(diǎn)擊子控件 lable修改
按照界面需要,設(shè)置輔助視圖
設(shè)置有多少組,每組有多少行。
設(shè)置組:
點(diǎn)擊tableview 設(shè)置屬性面板的sections屬性。
設(shè)置每組多少行:
小技巧:如果寫的單元格千年不變,那么可以先寫一組中的一行,再拷貝,稍作修改即可。
注意:靜態(tài)單元格是實(shí)際開發(fā)中,很少用到,此處只當(dāng)知識(shí)點(diǎn)介紹。
在UITableview的應(yīng)用中使用動(dòng)態(tài)單元格來(lái)完成app應(yīng)用程序管理界面的搭建
一、實(shí)現(xiàn)效果
說(shuō)明:該示例在storyboard中使用動(dòng)態(tài)單元格來(lái)完成。
二、實(shí)現(xiàn)
1.項(xiàng)目文件結(jié)構(gòu)和plist文件
2.實(shí)現(xiàn)過(guò)程以及代碼
在tableview的屬性選擇器中選擇動(dòng)態(tài)單元格。
說(shuō)明:在storyboard中直接使用其自帶的動(dòng)態(tài)單元格完成tableviewcell的定義,并創(chuàng)建了一個(gè)管理該cell的類,進(jìn)行了連線。
實(shí)現(xiàn)代碼:
數(shù)據(jù)模型部分:
YYappInfo.h文件
//
// YYappInfo.h
// 01-使用動(dòng)態(tài)單元格來(lái)完成app應(yīng)用程序管理界面的搭建
//
// Created by 孔醫(yī)己 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-使用動(dòng)態(tài)單元格來(lái)完成app應(yīng)用程序管理界面的搭建
//
// Created by 孔醫(yī)己 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-使用動(dòng)態(tài)單元格來(lái)完成app應(yīng)用程序管理界面的搭建
//
// Created by 孔醫(yī)己 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-使用動(dòng)態(tài)單元格來(lái)完成app應(yīng)用程序管理界面的搭建
//
// Created by 孔醫(yī)己 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- 完成按鈕點(diǎn)擊事件
- (IBAction)btnOnclick:(UIButton *)sender
{
//按鈕被點(diǎn)擊后,變?yōu)椴豢捎脿顟B(tài)
sender.enabled=NO;
//通知代理,完成提示下載已經(jīng)完成的動(dòng)畫效果
if ([self.delegate respondsToSelector:@selector(btnDidClick:)]) {
//一般而言,誰(shuí)觸發(fā)就把誰(shuí)傳過(guò)去
[self.delegate btnDidClick:self];
}
}
@end
主控制器
YYViewController.m文件
//
// YYViewController.m
// 01-使用動(dòng)態(tài)單元格來(lái)完成app應(yīng)用程序管理界面的搭建
//
// Created by 孔醫(yī)己 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文件中得數(shù)據(jù)加載進(jìn)來(lái)
-(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- 設(shè)置tableview的數(shù)據(jù)源方法
//組
-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
//行
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return self.apps.count;
}
//組-行-數(shù)據(jù)
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//創(chuàng)建cell
static NSString *identifier=@"app";
YYappCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
//設(shè)置cell的數(shù)據(jù)
YYappInfo *appinfo=self.apps[indexPath.row];
//設(shè)置代理
cell.delegate=self;
cell.app=appinfo;
//返回cell
return cell;
}
#pragma mark- 設(shè)置代理
-(void)btnDidClick:(YYappCell *)cell
{
//取出模型
YYappInfo *app=cell.app;
NSLog(@"daili");
UILabel *lab=[[UILabel alloc]init];
//提示的顯示位置
lab.frame=CGRectMake(60, 300, 200, 20);
//設(shè)置提示文本
lab.text=[NSString stringWithFormat:@"%@已經(jīng)下載完成",app.name];
//設(shè)置文本背景顏色
[lab setBackgroundColor:[UIColor grayColor]];
[self.view addSubview:lab];
lab.alpha=1.0;
//設(shè)置動(dòng)畫效果
[UIView animateWithDuration:2.0 animations:^{
lab.alpha=0.0;
} completion:^(BOOL finished) {
//把彈出的提示信息從父視圖中刪除
[lab removeFromSuperview];
}];
}
#pragma mark-隱藏狀態(tài)欄
-(BOOL)prefersStatusBarHidden
{
return YES;
}
@end
補(bǔ)充說(shuō)明
在程序中通過(guò)標(biāo)示符取出對(duì)應(yīng)的cell,是因?yàn)樵趕toryboard中已經(jīng)對(duì)cell打上了標(biāo)示符(app)的標(biāo)簽。
//組-行-數(shù)據(jù)
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//創(chuàng)建cell
static NSString *identifier=@"app";
YYappCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
//設(shè)置cell的數(shù)據(jù)
YYappInfo *appinfo=self.apps[indexPath.row];
//設(shè)置代理
cell.delegate=self;
cell.app=appinfo;
//返回cell
return cell;
}
- iOS App初次啟動(dòng)時(shí)的用戶引導(dǎo)頁(yè)制作實(shí)例分享
- iOS 引導(dǎo)頁(yè)的鏤空效果實(shí)例
- ios動(dòng)態(tài)設(shè)置lbl文字標(biāo)簽的高度
- iOS Runntime 動(dòng)態(tài)添加類方法并調(diào)用-class_addMethod
- iOS實(shí)現(xiàn)動(dòng)態(tài)的開屏廣告示例代碼
- iOS開發(fā)中ViewController的頁(yè)面跳轉(zhuǎn)和彈出模態(tài)
- iOS開發(fā)中WebView的基本使用方法簡(jiǎn)介
- IOS獲取各種文件目錄路徑的方法
- iOS毛玻璃效果的實(shí)現(xiàn)及圖片模糊效果的三種方法
- iOS實(shí)現(xiàn)動(dòng)態(tài)元素的引導(dǎo)圖效果
相關(guān)文章
IOS 開發(fā)之 UITextField限制字?jǐn)?shù)的方法
這篇文章主要介紹了IOS 開發(fā)之 UITextField限制字?jǐn)?shù)的方法的相關(guān)資料,這里提供實(shí)現(xiàn)限制最大字?jǐn)?shù)的方法,需要的朋友可以參考下2017-08-08iOS開發(fā)狀態(tài)欄及設(shè)置功能全面詳解
這篇文章主要為大家介紹了iOS開發(fā)狀態(tài)欄及設(shè)置功能全面詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06iOS中FMDB數(shù)據(jù)庫(kù)之增刪改查使用實(shí)例
本篇文章主要介紹了iOS中FMDB數(shù)據(jù)庫(kù)之增刪改查使用實(shí)例,F(xiàn)MDB是一個(gè)輕量級(jí)的數(shù)據(jù)庫(kù),用于將網(wǎng)絡(luò)資源存儲(chǔ)在本地。2017-05-05iOS開源一個(gè)簡(jiǎn)單的訂餐app UI框架
這篇文章主要介紹了iOS開源一個(gè)簡(jiǎn)單的訂餐app UI框架,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10解決iOS7上UITextField限制字?jǐn)?shù)輸入導(dǎo)致崩潰問(wèn)題的方法
這篇文章主要為大家分享了解決iOS7上UITextField限制字?jǐn)?shù)輸入導(dǎo)致崩潰問(wèn)題的方法,感興趣的小伙伴們可以參考一下2016-03-03iOS 委托與文本輸入(內(nèi)容根據(jù)iOS編程編寫)
這篇文章主要介紹了iOS 委托與文本輸入(內(nèi)容根據(jù)iOS編程編寫) 的相關(guān)資料,需要的朋友可以參考下2016-09-09iOS實(shí)現(xiàn)換膚功能的簡(jiǎn)單處理框架(附源碼)
這篇文章主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)換膚功能的簡(jiǎn)單處理框架,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02