28/01/2014 MCAFEE SECURE 認證的網站

https://www.mcafeesecure.com/RatingVerify?ref=www.HongKongCupid.com

2013年5月29日 星期三

*使用 UITableView 创建表格**应用演练(4)——自定义单元格~~

**使用 UITableView 创建表格**
应用演练(4)——自定义单元格~~

^今天给大家介绍一下如何在表格应用中使用
自定义单元格以及选中单元格的一个简单操作。
本文以上一篇为基础,对应用进行扩展,介绍以下内容:
  1. 在表格应用中自定义单元格布局显示;
  2. 选中某一单元格,并在Safari中打开
  3. 用户链接地址;

一. 自定义单元格演练

首先我们回顾一下前文,在演练(2)中,
我们定义数据结构时,定义了一个名为:
Favorite的属性,用于表示我们对该微博
账户的喜好程度。本节演练中,我们就通
过自定义单元格的方式,在表格中以五角
星的形式显示喜好程度,本节演练结束后,
您将看到以下运行结果:

开始之前,我们需要准备几张星星的图片
,请猛击此处MyFocusDemo4Images.zip下载。
准备就绪,让我们开始吧:D
1. 打开My Focus工程;
2. 将下载并解压缩后的三个图片文件拖拽到
“Images”组下并放手,弹出下图对话框:
 
确认勾选了“Copy items into
destination groups' folder
(if needed)”复选框后,点击“Finish”按钮;
3. 在导航区域点击并打开“MainStoryboard.storyboard”文件,
在左侧“Table View Controller Scene”
中展开并选中“Table View Cell -
userInfoCell”,此时的界面如下图所示:

4. 在右侧工具区域的“Objects”列表中
选择一个ImageView控件拖放到表格单元
左侧,然后我们再选择一个Label控件,
拖放到刚刚那个ImageView的右侧,然后再
依次拖放五个ImageView控件,顺序摆放在
Label控件的右侧。在此,我们可以用鼠标
调整一下各个控件的大小和位置,使得界面
看起来更加美观一些。我们甚至还可以调整
一下Label控件的文本颜色。如下图所示:

5. 此时,按Command+R运行一下程序,
怎么和上次演练之后的运行结果一样呢?
没有发生任何变化啊。
对,因为我们还没有告诉应用怎么和我们
刚才调整过的界面结合再一起,下面我们
就来做这个工作。
6. 在导航区域的“GUI”群组文件夹上,
点击鼠标右键,选择“New File...”在弹
出的对话框中选择“Objective-C class”
,然后点击“Next”按钮;
7. 在弹出的“Choose options for
your new file”对话框中,在“Class”
文本框位置输入:JOYUserInfoCell,
在“Subclass of”下拉框中,选择或者
直接输入“UITableViewCell”,然后点击
“Next”按钮,如下图所示:

8. 在弹出的对话框中,直接点击
“Create”按钮,创建文件并关闭对话框;
9. 在导航区域点击并打开新建的“JOYUserInfoCell.h”文件,
输入属性定义代码,输入完成后,如下所示:
复制代码
 1 #import <UIKit/UIKit.h>
 2 
 3 @interface JOYUserInfoCell : UITableViewCell
 4 
 5 @property (strong, nonatomic) IBOutlet UIImageView 
*userImage;
 6 @property (strong, nonatomic) IBOutlet UILabel 
*userNameLabel;
 7 @property (strong, nonatomic) IBOutlet UIImageView 
*favoriteImage1;
 8 @property (strong, nonatomic) IBOutlet UIImageView 
*favoriteImage2;
 9 @property (strong, nonatomic) IBOutlet UIImageView 
*favoriteImage3;
10 @property (strong, nonatomic) IBOutlet UIImageView 
*favoriteImage4;
11 @property (strong, nonatomic) IBOutlet UIImageView 
*favoriteImage5;
12 
13 @end
复制代码
10. 在导航区域点击并打开新建的“JOYUserInfoCell.m”文件,
@implementation语句后输入一些
@synthesize属性定义语句,如下所示:
复制代码
1 @implementation JOYUserInfoCell
2 // 1. 属性合成定义3 @synthesize userImage = _userImage;
4 @synthesize userNameLabel = _userNameLabel;
5 @synthesize favoriteImage1 = _favoriteImage1;
6 @synthesize favoriteImage2 = _favoriteImage2;
7 @synthesize favoriteImage3 = _favoriteImage3;
8 @synthesize favoriteImage4 = _favoriteImage4;
9 @synthesize favoriteImage5 = _favoriteImage5;
复制代码
说明:所谓属性合成定义,是对getter、
setter的一种简化表现形式。这样,我们
可以避免写很多很多的,说实话,大量的
getter、setter是一个很痛苦的事情。
当然,在Objective-c中,您也可以自己
来写getter和setter,稍后演练中会有
所涉及。
11. 在导航区域,再次点击并打开
“MainStoryboard”文件,下面我们来
看看如何将界面的UI控件和类属性成员
进行绑定:D。
12. 在左侧“Table View Controller
 Scene”面板中,选中“User Info Cell - userInfoCell”,然后在右侧工具区域
顶部,选择“Show the Identity
inspector”,然后在下方的“Custom
Class”区域的“Class”下拉列表中,将原有的“UITableViewCell”修改为我们刚刚定义的“JOYUserInfoCell”,如下图所示:

13. 在左侧“Table View Controller 
Scene”面板中,确认点击并选中“User
Info Cell - userInfoCell”(有时候焦
点可能会丢失,再点一下就好了),然后在
右侧工具区域顶部,选择“Show the
Connections inspector”,如下图所示:

看到什么了?对!就是我们刚才在
JOYUserInfoCell.h 中定义的那些
IBOutlet 属性。
说明:IB是Interface Builder的缩写,
如果您希望定义的属性在Interface 
 Builder中可见,则在属性定义时加上 
IBOutlet 关键字即可。
14. 在右侧面板的Outlets区域中,
将鼠标指针移动到“userImage”右侧的
空心圆点上时,该圆点会变成一个灰色的
加号,点击并按住鼠标,然后拖放到左侧
面板的第一个“Image View”上放手,
拖拽过程中会有一条灰色的线条出现。
这样我们第一个连接就建立好了,如下图所示:

15. 下面我们依次建立其他控件与自
定义类的连接关系,建立完成之后的
效果,如下图所示:

说明:建立连接的过程中,需要注意
控件与属性的关系是否一一对应,
在右侧“Outlets”面板中,上下移
动鼠标,随着指针的移动,中心区域的
控件会根据鼠标所在位置高亮显示。
如果发现错了,您可以点击右侧面板中
的小叉子,删除连接关系,然后重复上
述操作,重新建立连接。
啰嗦了半天,写了很多的字,实际上等
熟练,之后,你会发现这个操作是非常
的简单和省时的,也是一件非常快乐的事情。
16. 开始下一步之前,我们先做一个操作,
因为这个操作马上就要用到。还记得我们
在演练(1)建立UITableViewController
的时候,曾经设定过表格单元的
“Identifier”吗?如下图所示:

可是这个设定貌似一直没有用过,

不要着急,不要着急,马上就要用到了:D
17. 按Command+R再次运行程序,
怎么还是和上次演练之后的运行结果
一样呢?忙乎了这么久,为什么一点变化
也没有呢?
因为我们还没有告诉程序如何识别表格
单元。下面我们来看看如何做吧。
18. 在导航区域点击并打开我们久违的“JOYTableViewController.m”文件,
找到- (UITableViewCell *)tableView
方法,我们先看一下前几句代码:
复制代码
1 - (UITableViewCell *)tableView:(UITableView *)
tableView cellForRowAtIndexPath:
(NSIndexPath *)indexPath
2 {
3     static NSString *CellIdentifier = @"Cell";
4     UITableViewCell *cell = [tableView 
dequeueReusableCellWithIdentifier:CellIdentifier];
5     
6     // Configure the cell...
复制代码
这是在创建对象时,系统默认生成的代码
。看到了吗?
对,就是这里出了问题!下面我们将方法
中的代码进行简单的调整,调整之前,
我们先在文件头部加上一句:
1 #import "JOYUserInfoCell.h"
否则编译器不知道去哪里找
 JOYUserInfoCell 这个类,
调整后的代码如下所示:
复制代码
 1 - (UITableViewCell *)tableView:
(UITableView *)tableView cellForRowAtIndexPath:
(NSIndexPath *)indexPath
 2 {
 3     // 1. 修改单元格标示 4     static NSString *CellIdentifier =
 @"userInfoCell";
 5     // 2. 修改单元格属性,使其继承自 
JOYFocusUserCell 6     JOYUserInfoCell *cell = [tableView 
dequeueReusableCellWithIdentifier:CellIdentifier];
 7     
 8     // Configure the cell...
 9     // 实例化单元格对象10     if (cell == nil) {
11         // 3. 修改示例化对象属性12         cell = [[JOYUserInfoCell alloc]
initWithStyle:UITableViewCellStyleDefault 
reuseIdentifier:CellIdentifier];
13     }
14     
15     JOYCategory *category = [_categoryList 
objectAtIndex:[indexPath section]];
16     JOYFocusUser *user = [category.userList 
objectAtIndex:[indexPath row]];
17     
18     // 4. 设置单元格属性19     [cell.userNameLabel setText:user.userName];
20     [cell.userImage setImage:user.image];
21     
22     return cell;
23 }
复制代码
下面我们来做根据不同用户的
Favorite数值,在用户名称的左侧
显示五角星。
19. 在导航区域,点击并打开
“JOYUserInfoCell.h”文件,
在 IBOutlet 属性下方,添加
一个属性,代码如下:
复制代码
 1 #import <UIKit/UIKit.h>
 2 
 3 @interface JOYUserInfoCell : UITableViewCell
 4 
 5 @property (strong, nonatomic) IBOutlet 
UIImageView *userImage;
 6 @property (strong, nonatomic) IBOutlet 
UILabel *userNameLabel;
 7 @property (strong, nonatomic) IBOutlet 
UIImageView *favoriteImage1;
 8 @property (strong, nonatomic) IBOutlet 
UIImageView *favoriteImage2;
 9 @property (strong, nonatomic) IBOutlet 
UIImageView *favoriteImage3;
10 @property (strong, nonatomic) IBOutlet 
UIImageView *favoriteImage4;
11 @property (strong, nonatomic) IBOutlet 
UIImageView *favoriteImage5;
12 
13 @property (assign, nonatomic) CGFloat 
favorite;
14 
15 @end
复制代码
20. 按 Control + Command +
下箭头直接打开“JOYUserInfoCell.
m”文件,添加部分代码,具体调整见以
下代码中的注释。
复制代码
 1 #import "JOYUserInfoCell.h" 2 
 3 // 1. 接口定义 4 @interface JOYUserInfoCell() {
 5 // 2. 私有成员变量 6 @private 7     CGFloat         _favorite;
              // 喜好程度数值 8     
 9     UIImage         *_fullStarImage;
        // 完整星星图像10     UIImage         *_halfStarImage;
        // 半颗星星图像11     UIImage         *_emptyStarImage;
       // 空白星星图像12 }
13 
14 @end15 
16 @implementation JOYUserInfoCell
17 @synthesize userImage = _userImage;
18 @synthesize userNameLabel = _userNameLabel;
19 @synthesize favoriteImage1 = _favoriteImage1;
20 @synthesize favoriteImage2 = _favoriteImage2;
21 @synthesize favoriteImage3 = _favoriteImage3;
22 @synthesize favoriteImage4 = _favoriteImage4;
23 @synthesize favoriteImage5 = _favoriteImage5;
24 
25 // 3.26 #pragma mark - getter & setter
27 // 设置喜好数值28 - (void)setFavorite:(CGFloat)favorite {
29     _favorite = favorite;
30 }
31 
32 // 返回喜好数值33 - (CGFloat)favorite {
34     return _favorite;
35 }
36 
37 // 4. 添加程序运行时对象初始化方法38 - (id)initWithCoder:(NSCoder *)aDecoder {
39     self = [super initWithCoder:aDecoder];
40     
41     if (self) {
42         _fullStarImage = [UIImage 
imageNamed:@"star_full.png"];
43         _halfStarImage = [UIImage 
imageNamed:@"star_half.png"];
44         _emptyStarImage = [UIImage 
imageNamed:@"star_empty.png"];
45     }
46     return self;
47 }
48 
49 //- (id)initWithStyle:
(UITableViewCellStyle)style 
reuseIdentifier:(NSString *)reuseIdentifier
50 //{
51 //    self = [super initWithStyle:style
 reuseIdentifier:reuseIdentifier];
52 //    if (self) {
53 //        // Initialization code
54 //    }
55 //    return self;
56 //}57 
58 - (void)setSelected:(BOOL)selected 
animated:(BOOL)animated
59 {
60     [super setSelected:selected 
animated:animated];
61 
62     // Configure the view for the 
selected state63 }
64 
65 @end
复制代码
21. 下面我们来对setFavorite的实现
做一些简单的处理,代码如下:
复制代码
 1 // 设置喜好数值 2 - (void)setFavorite:(CGFloat)favorite {
 3     // A. 数值范围校验 4     if ((favorite > 5.0f) || 
(favorite < 0.0f)) {
 5         favorite = 0.0f;
 6     }
 7     
 8     // B. 定义数值便于循环处理 9     [self.favoriteImage1 setImage:
_emptyStarImage];
10     NSArray *favoriteImages = 
[[NSArray alloc]initWithObjects:_favoriteImage5, 
11                                _favoriteImage4,
12                                _favoriteImage3,
13                                _favoriteImage2,
14                                _favoriteImage1,
15                                nil];
16 
17     // C. 依次判断每个UIImageView应该显
示的图像内容18     NSInteger x = favorite * 10;
19     for (NSInteger i = 5; i > 0; i--) {
20         UIImageView *image = [favoriteImages
 objectAtIndex:(5 - i)];
21         
22         if ((x / 10) >= i) {
23             [image setImage:_fullStarImage];
24         } else if (((x % 10) > 0) &&
 ((x / 10) == (i - 1))) {
25             [image setImage:_halfStarImage];
26         } else {
27             [image setImage:_emptyStarImage];
28         }
29     }
30     
31     _favorite = favorite;
32 }
复制代码
22. 在导航区域点击并打开“JOYTableViewController.m”文件,
找到- (UITableViewCell *)tableView
方法,在设置头像语句后面添加一句:
1 cell.favorite = user.favorite;
23. 按Command+R再次运行程序,激动人
心的时刻到了!!!如下图所示:

怎么样,效果还不错吧,而且不复杂
吧:D,本节内容貌似写了不少,其实
大部分时间都是在用鼠标拖来拖去,
真正写代码的时间还是很少的。

二. 选中某一单元格并在

Safari中打开用户链接地址

1. 在导航区域,点击并打开
“JOYUserInfoCell.h”文件,
在 IBOutlet 属性下方,添加一个
属性,代码如下:
1 @property (strong, nonatomic) 
NSString *webSite;
2. 按 Control + Command +
下箭头直接打开
“JOYUserInfoCell.m”文件,在
@implementation JOYUserInfoCell
语句下,添加 @synthesize 
属性定义,代码如下:
1 @synthesize webSite = _webSite;
3. 修改文件末尾的setSelected方法,
代码如下:
复制代码
 1 - (void)setSelected:(BOOL)
selected animated:(BOOL)animated
 2 {
 3     [super setSelected:
selected animated:animated];
 4 
 5     // Configure the view 
for the selected state 6     if (selected) {
 7         NSURL *url = [NSURL 
 URLWithString:_webSite];
 8         
 9         if (![[UIApplication sharedApplication]openURL:url]){   
10             NSLog(@"%@%@",@"Failed to open url:",[url description]);
11         }
12     }
13 }
复制代码
4. 在导航区域点击并打开“JOYTableViewController.m”文件,找到- (UITableViewCell *)tableView方法,在设置头像语句后面添加一句:
cell.webSite = user.webSite;
5. 按Command+R再次运行程序,然后点击某一个单元格试试看运行效果。:D
 
                  
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

沒有留言:

張貼留言


if you like make fds, wellcome you here~~anytime***

my free place for everyones who want the good software,

come & download them~ wellcome!!