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

趣味苹果开发

<div id="cnblogs_post_body">首先向大家致歉，自从上一篇使用 UITableView 创建表格应用演练(3)——使用区段分类显示表格数据博文发布后，因工作原因始终未能抽出时间更新博客。
今天给大家介绍一下如何在表格应用中使用自定义单元格以及选中单元格的一个简单操作。
本文目标

本文以上一篇为基础，对应用进行扩展，介绍以下内容：

• 在表格应用中自定义单元格布局显示；
  
• 选中某一单元格，并在Safari中打开用户链接地址；
  

一. 自定义单元格演练

首先我们回顾一下前文，在演练(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”文件，输入属性定义代码，输入完成后，如下所示：
<div class="cnblogs_code"> 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