使用 iOS 5、Xcode 4.2 和 Storyboard 制作一个简单的 Twitter 应用

lassebunk

4.70/5 (15投票s)

2012年1月9日

CPOL

6分钟阅读

198980

4090

如何使用 iOS 5、Xcode 4.2 和 Storyboard 创建一个简单的 Twitter 应用，该应用将列出推文并显示每条推文的详细信息。

下载源码 - 28.09 KB

引言

让我们使用 iOS 5、Xcode 4.2 和 Storyboard 来制作一个简单的 Twitter 应用，该应用将列出推文，当您点击一条推文时，将显示该推文和用户的详细信息。

设置项目

在 Xcode 中，首先通过 File › New › New Project 创建一个新项目。

选择 Master-Detail Application (主从详情应用) 并点击 Next (下一步)。

在 Product Name (产品名称) 中输入 'Twitter Test'。确保 Use Storyboard (使用 Storyboard) 和 Use Automatic Reference Counting (使用自动引用计数) 复选框已选中。点击 Next (下一步)。

选择保存项目的位置，然后点击 Create (创建)。

您的项目现已创建。它已自动设置了 Storyboard、主视图控制器和详情视图控制器。Storyboard 是我们将设计应用的地方——控制器是进行编程的地方。

Storyboard

让我们打开 Storyboard 看看它包含什么。点击左侧的 MainStoryboard.storyboard，Storyboard 就会出现。

这基本上告诉我们有：

一个 navigation view controller (导航视图控制器)——这是当您从列表视图导航到详情视图时自动提供“返回”按钮的控制器类型。
一个 master view controller (主视图控制器)——这是我们将放置推文列表的地方。
一个 the detail view controller (详情视图控制器)——这是我们将放置每条推文详细信息的地方。

每个控制器之间的线被称为 'segues'。稍后处理用户选择推文时的操作时，我们将进一步讨论它们。

让我们设置我们的 table view (表格视图)。

设置表格视图

在左侧的树状视图中选择表格视图。

然后在右侧选择 Dynamic Prototypes (动态原型)。

这告诉表格视图我们将从控制器中动态设置单元格。

接下来，再次在左侧的树状视图中，选择 Table View Cell (表格视图单元格)。

在右侧，将样式设置为 Subtitle (副标题)，并将 Identifier (标识符) 设置为 'TweetCell'——这是我们将在代码中用来查找单元格以填充其详细信息的名称。

您会看到视图样式发生了变化——这将是我们用来显示推文文本作为标题，推文作者作为副标题的样式。

好了，Storyboard 部分的设置就完成了——至少对于主视图来说是这样。不用担心——我们稍后会回到详情视图。

接下来是控制器。

编写主视图控制器

通过在左侧选择，进入 MasterViewController.m。

这里将发生所有操作。但首先，我们需要设置一个实例变量来包含我们的推文。

点击左侧的 MasterViewController.h。

将 @interface 到 @end 的部分替换为以下代码：

@interface MasterViewController : UITableViewController {
    NSArray *tweets;
}

- (void)fetchTweets;

@end

这告诉 Objective-C 我们有一个 tweets 实例变量和一个 fetchTweets 方法。

加载 JSON

现在进行实际的推文获取。回到 MasterViewController.m 并插入以下方法：

- (void)fetchTweets
{
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        NSData* data = [NSData dataWithContentsOfURL:
                        [NSURL URLWithString: @"https://api.twitter.com/1/statuses/public_timeline.json"]];

        NSError* error;

        tweets = [NSJSONSerialization JSONObjectWithData:data
                                                 options:kNilOptions
                                                   error:&error];

        dispatch_async(dispatch_get_main_queue(), ^{
            [self.tableView reloadData];
        });
    });
}

这个方法的作用是它会创建一个 单独的线程 来获取 JSON 数据，然后在完成后返回到 主线程 来更新表格视图。之所以这样做是因为，如果我们使用主线程获取数据，那么应用程序在数据加载完成之前就会被锁定。

在 viewDidLoad 方法中调用此方法。

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

这告诉应用程序在视图加载后立即加载 JSON 数据。

现在我们的 Twitter Feed 已加载到名为 tweets 的实例变量中。它现在包含一个数组，该数组存储了多个 NSDictionary 对象，其中 NSDictionary 是一个键/值集合。

填充表格视图

接下来，插入以下两个方法：

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return tweets.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"TweetCell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }

    NSDictionary *tweet = [tweets objectAtIndex:indexPath.row];
    NSString *text = [tweet objectForKey:@"text"];
    NSString *name = [[tweet objectForKey:@"user"] objectForKey:@"name"];

    cell.textLabel.text = text;
    cell.detailTextLabel.text = [NSString stringWithFormat:@"by %@", name];

    return cell;
}

首次运行

尝试运行您的应用程序——点击 Run (运行) 图标。

它运行了！

很简单，对吧？ :-)

好了，不能沉湎于成功，让我们继续做需要做的事情。

Segue

尝试选择一条推文。我们的目的是加载详情视图，但这并没有发生。为什么呢？

让我们回到 Storyboard。

注意到主视图控制器和详情视图控制器之间没有 segue。发生的情况是，当我们之前从 Storyboard 中的 static cells (静态单元格) 切换到 prototype cells (原型单元格) 时，它将其抹掉了，所以现在它不知道该怎么做。让我们来帮助它。

设置 Segue

在左侧，从 Table View Cell (表格视图单元格) CTRL + 拖动 到 Detail View Controller (详情视图控制器)，然后选择 Push (推入)。

现在它知道该怎么做了，再次尝试点击 Run (运行)。

它运行了！

点击表格视图和详情视图之间的 segue。

并将其标识符更改为 'showTweet'。

这就是我们将在后续代码中识别它的方式。

响应 Segue

在 MasterViewController.m 中，在 #import "MasterViewController.h" 的正下方，插入以下代码：

#import "DetailViewController.h"

这是为了让我们从主视图控制器访问详情视图控制器。

插入以下方法：

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"showTweet"]) {

        NSInteger row = [[self tableView].indexPathForSelectedRow row];
        NSDictionary *tweet = [tweets objectAtIndex:row];

        DetailViewController *detailController = segue.destinationViewController;
        detailController.detailItem = tweet;
    }
}

基本上，这个方法的作用是告诉应用程序在遇到主视图和详情视图之间的 segue 时该做什么。它识别选定的行，找到推文，然后设置详情视图控制器上的 detailItem 属性。(detailItem 属性是在我们一开始选择 Master-Detail Application 时自动创建的。感谢 Xcode！)

现在我们准备处理 detail view controller (详情视图控制器)。

完成详情视图

打开 Storyboard，双击 'Master' 和 'Detail' 标题，并将它们分别更改为 'Tweets' 和 'Tweet'。

删除写着 'Detail view content goes here' (详情视图内容在此处) 的标签。我们将创建自己的。

插入一个用于姓名的标签，一个用于推文的标签，以及一个用于头像的图像视图，如下所示：

您可以根据需要自定义文本大小。

为详情视图创建 Outlet

我们需要一种方法从代码中调用这些新控件。这是通过创建三个 Outlet 来实现的，Outlet 是一种视图和控制器之间的连接。在 DetailViewController.h 中，将 @interface 行替换为以下代码：

@interface DetailViewController : UIViewController {
    IBOutlet UIImageView *profileImage;
    IBOutlet UILabel *nameLabel;
    IBOutlet UILabel *tweetLabel;
}

现在我们已经创建了 Outlet。现在我们需要从我们的视图中引用或连接它们。在左侧，从 Detail View Controller (详情视图控制器) CTRL + 拖动 到 'Label – Name goes here' (标签——姓名在此处)，然后选择 nameLabel。

同样，从 Detail View Controller (详情视图控制器) CTRL + 拖动 到 'Label – Tweet goes here' (标签——推文在此处)，并选择 tweetLabel；再从 Detail View Controller (详情视图控制器) CTRL + 拖动 到 'Image View' (图像视图)，并选择 profileImage。

现在我们可以从代码中调用标签和图像视图了。

加载详情视图

在 DetailViewController.m 中，将 configureView 方法替换为以下代码：

- (void)configureView
{
    if (self.detailItem) {
        NSDictionary *tweet = self.detailItem;

        NSString *text = [[tweet objectForKey:@"user"] objectForKey:@"name"];
        NSString *name = [tweet objectForKey:@"text"];

        tweetLabel.lineBreakMode = UILineBreakModeWordWrap;
        tweetLabel.numberOfLines = 0;

        nameLabel.text = text;
        tweetLabel.text = name;

        dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
            NSString *imageUrl = [[tweet objectForKey:@"user"] objectForKey:@"profile_image_url"];
            NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:imageUrl]];

            dispatch_async(dispatch_get_main_queue(), ^{
                profileImage.image = [UIImage imageWithData:data];
            });
        });
    }
}

最终运行

尝试运行代码，您就看到了——一个列表视图和一个显示推文的详情视图！

希望您喜欢！:-)

下载源码 - 28.09 KB
在这里查看更多 Twitter API 信息和文档。
在这里查看更多 JSON 教程。
感谢 Ray Wendelich 团队的启发，让我开始 iOS 编程。