如何在IOS6中添加Twitter接口

来自Ray的提示:

 这是iOS 6 Feast书里面的第九篇IOS6教程 ! In this tutorial, 我们正在把我们之前的一些教程更新到IOS6来使得它们使用一些IOS6最新的框架,比如说今天的Social Frameword。

Learn how to send tweets with the iOS 6 social framework!

这篇教程只是我们的开发者 Felipe Laso Marsetti在我们的新书iOS 6 by Tutorials里“Beginning Social Framework chapter”里面的一部分。在新书里,不仅我们会以一个不同的app来展现(一个 ”Fun Facts” app!) ,并且里面用到的东西要远比现在这个教程里的复杂,比如说在 activity view controller里面自定义activity view。那现在让我们开始这篇教程吧!

这篇教程由我们教程团队里的 Felipe Laso发布,一个在 Lextech Global Services工作的IOS程序员。

近些年来,社交网络渐渐成为我们生活的一部分了。我们不仅会通过网站来登录一些我们喜欢的社交网比如说twitter.com或者facebook.com,也会发现在越来越多的应用,网站,博客,游戏等等里面出现社交网站的元素。

如果在你的应用里添加社交元素,不仅能使你的应用传播得更快更广,也能帮助你认识以及留住一些用户。不管怎么样,会使你的应用显得更有价值。



在iOS6之前,在你的应用里添加社交元素是一件很蛋疼的事情。不仅你针对每个社交网络要使用一些不同的API,而且用户一直也要针对每个应用来输入他们对应的帐号。

iOS 5对Twitter添加了支持,但是它没有支持其他一些流行的社交网络比如Facebook以及新浪微博。现在有了新的iOS 6 Social Framework,对这些社交网络的开发支持将会变的异常简单 – 并且你现在也在为将来做准备,如果Apple将来在其框架里面添加更多的社交元素!

继续看下去你会看到在你的应用里面整合社交框架会是如此的简单,我们将在一个简单的例子里面展示如何整合Twitter并且使用它来tweet你最爱的教程! :]

工作原理是什么?

iOS 6里有好几个方式来整合Twitter。最简单的,也可能将是你用得最多的,会是SLComposeViewController。这个名字听上去很容用,所以我们亲切地称之为“Tweet sheet”就像Apple介绍的。

在这个教程里你将看到tweet单子运用起来是如此的简单。只需几行代码就能在你的应用里添加一个tweet编辑器了!你必须关心后端是如何联系Twitter的,比如处理用户登录,或者类似一些其他事物。

下面是一个关于如何创建以及展示SLComposeViewController的代码片段:

if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter])
{
    SLComposeViewController *tweetSheet = [SLComposeViewController
        composeViewControllerForServiceType:SLServiceTypeTwitter];
    [tweetSheet setInitialText:@"Initial Tweet Text!"];
    [self presentViewController:tweetSheet animated:YES completion:nil];
}

你所需决定的就是这个设备怎么发tweets, 创建一个基于Twitter服务的SLComposeViewController 的实例, 添加任何链接或者图片,添加一些初始语句然后把它推到屏幕里,这就是全部了!所有的这些都只是通过Xcode来使用Objective-c来完成。

事实上由于它的如此简单,如果你自认为你是一名高级程序员的话,那你可以跳过这篇教程的剩下部分了。你直接在你的应用里面去用吧!但如果你也想看一个关于“简单 tweet”例子的话,继续读下去!

概览

在这篇介绍Twitter教程里,我们将包罗列举SLComposeViewController 大部分的使用(比如“tweet sheet”)它使你能tweet你应用程序里的任何文字,图片或者链接。它看上去如下所示:

descr

使用iOS内建的tweet sheet的优势如下:

  • 标准的系统接口
  • 自动调用你在系统内设置过的Twitter账户
  • 自动识别每条tweet的长度是不是低于140字符
  • 简便地添加图像以及链接附件
  • 开发简便,没有必要再做OAuth认证来连接Twitter的后台

是不是有很多优势呢比起传统的?我想现在你没有理由在你的应用里面不加入twitter功能了吧!

开始吧

好吧,同胞们,现在让我们动手来做一个牛B的带有Twitter功能的程序吧。我的例子程序能使用户tweet任何他们喜欢的字符,以及图片和链接。

打开Xcode并且创建选择 

iOSApplicationSingle View Application

 模板。项目名写为 

SimpleTweet

 ,设置device family为 

iPhone

, 并且确定 

Use Storyboards

 和 

Use Automatic Reference Counting

 的复选框是选中的 (先不要打勾其他复选框)。

descr

点击

Next

, 选择一个你存项目的地方,再点击

Create



你现在只需要支持Portrait方向,所以你也需要在项目设置里面设置它。在你的项目Navigator里面选中SimpleTweet项目然后选中里面的SimpleTweet target, 到Summary tab里面然后除了Portrait以外全部反选:

descr

现在我们该来说说我们的项目是做什么的。首先它将有4个按钮,按钮上的图片是这个网站上4篇教程的图片。你的应用将允许用户点击来选择他们最喜欢的教程,并且它会跳出一个tweet单子来让user输入。

做这些之前, 你首先需要一些图片。 所以请下载 资源 然后把图片拖进你的工程。

现在打开 

MainStoryboard.storyboard

 然后如下图所示来设置一些UIButton和UILable:

Basic layout for app

对用户界面的简单设置:

  • 对每个button设置其对应的背景图片,然后把按钮类型选为自定义,使按钮大小正好满足图片。
  • 然后再么个按钮下面添加其对应的标签,把他们的lines属性设为0(不限制行数),字体设为Bold system大小为13,字体颜色为白色。
  • 背景View调为暗灰色
  • Tweet按钮字体设为黑色

这里先不必太担心Auto Layout以及当你把设备换为iPhone 5的屏幕时会发生什么情况 – 对于这个教程来说我们先不涉及这些。

Build and run确保每样事物都运行正确。现在我们开始做执行部分!

做些连接

现在你需要把你的storyboard与view controller连接起来。打开 

MainStoryboard.storyboard

 然后确保 Assistant Editor 是可见的,然后显示 

ViewController.h

.

按住Control然后把4个label都拖到@interface下面,把它们选为outlets并依次命名为

button1Label

button2Label

,

button3Label

, and 

button4Label



同样地,按住control把4个按钮都拖到@interface下面, 然后把它们选为actions并依次命名为

button1Tapped

,

button2Tapped

button3Tapped

, and 

button4Tapped



最后,把“Tweet”按钮按住control拖到@interface下面,把之选为action并命名为

tweetTapped

.

做完这些后,你的头文件应该看上去如下所示:

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UILabel *button1Label;
@property (weak, nonatomic) IBOutlet UILabel *button2Label;
@property (weak, nonatomic) IBOutlet UILabel *button3Label;
@property (weak, nonatomic) IBOutlet UILabel *button4Label;

- (IBAction)button1Tapped:(id)sender;
- (IBAction)button2Tapped:(id)sender;
- (IBAction)button3Tapped:(id)sender;
- (IBAction)button4Tapped:(id)sender;
- (IBAction)tweetTapped:(id)sender;

@end

不错!现在让我们来执行这些方法使它们能够发tweets!

为了使你的项目能够使用SLComposeViewController 你需要把Social framework加进你的项目。在项目navigator 里面选中你的项目然后选择SimpleTweet目标。在Build Phases 栏里面点击+按钮,把Link Binary里面的Social.framework加进去:

Adding The Social Framework

下一步,打开 

ViewController.m

 在文件顶部import如下内容:

#import 

使你的文件能用到Social API所要做的就是这么多了,现在让我们来为Tweet按钮来添加一些代码使得它能展示Tweet单子:

- (IBAction)tweetTapped:(id)sender {
    if ([SLComposeViewController isAvailableForServiceType:SLServiceTypeTwitter])
    {
        SLComposeViewController *tweetSheet = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeTwitter];
        [tweetSheet setInitialText:@"Tweeting from my own app!:)"];
        [self presentViewController:tweetSheet animated:YES completion:nil];
    }
    else
    {
        UIAlertView *alertView = [[UIAlertView alloc]
            initWithTitle:@"Sorry"
            message:@"You can't send a tweet right now, make sure
                your device has an internet connection and you have
                at least one Twitter account setup"
            delegate:self
            cancelButtonTitle:@"OK"
            otherButtonTitles:nil];
        [alertView show];
    }
}

是的,不论你信不信,这就是发送tweet的所有代码了(注意现在还不包括图片和链接),不能再简单了!让我们来完整地看看你在tweetTappped方法里添加的代码。

首先,你做的是检查你是否能发tweet,你通过SLComposeViewController的isAvailableForServiceType:这个类方法来确认。如果你的设备不能连接特定的服务,这个方法返回值为NO。

如果你的应用能发tweet,那么你所要做的就是创建一个基于Twitter 服务的SLComposeViewController 实例,在加载跳出tweet 单子前用setInitialText:方法来设置默认文字。如果你能发tweet,那你就弹出一个简单的alert view来告诉用户它不能发tweet。

Build and run 你的项目,点击Tweet按钮,下图是效果展示:

Tweeting with the iOS 6 social framework

很cool吧,嗯哼?如果你得到一个alert警告,请确认你已经通过“设置”里的Twitter目录完成的Twitter账户设置。

还有一件值得提到的事情是SLComposeViewController 有个完成监听器属性,通过这个block你能设置一些东西当tweet单子消失的时候。

默认的完成监听器动作是使tweet单子消散掉。尽管你能将之自定义为任何你想要的结果。但是请谨记,如果你执行你自己的完成监听器动作,那么你需要自己来写代码使tweet单子消散掉。

加入图片和链接

现在让我们来执行允许用户选中某个教程然后tweet单子添加其图片和链接的逻辑。在

ViewController.m

上边添加如下属性:

@interface ViewController ()
@property (strong, nonatomic) NSString *imageString;
@property (strong, nonatomic) NSString *urlString;
- (void)clearLabels;
@end

现在你做的就是通过创建两个string的私有属性来存储图片和链接的信息,创建一个私有方法来设置你的labes字体颜色为白色。

提示:现在你不再需要synthesize 这些属性了,感谢Xcode4.5的这项改善!

接下来,执行clearLabels 方法来设置每个标签上的字体颜色为白色:

- (void)clearLabels
{
    self.button1Label.textColor = [UIColor whiteColor];
    self.button2Label.textColor = [UIColor whiteColor];
    self.button3Label.textColor = [UIColor whiteColor];
    self.button4Label.textColor = [UIColor whiteColor];
}

是的,这就是私有方法会为我们做到的。

接下来你要做的代码工作就是:当用户选择某个教程时,你会存储它的图片名字以及链接在你的私有属性里面,并且为了表示你现在的选中的是哪个,你需要将label的字体设为红色。

当用户选中另一个教程时,你也只需要将所有labels的颜色重设为白色,存储新的图片和链接信息,再将它的label字体改为红色。将下面代码加入到按钮触发方法:

- (IBAction)button1Tapped:(id)sender {

    [self clearLabels];

    self.imageString = @"CheatSheetButton.png";
    self.urlString = @"http://www.raywenderlich.com/4872/
        objective-c-cheat-sheet-and-quick-reference";

    self.button1Label.textColor = [UIColor redColor];
}

- (IBAction)button2Tapped: (id)sender {

    [self clearLabels];

    self.imageString = @"HorizontalTablesButton.png";
    self.urlString = @"http://www.raywenderlich.com/4723/
        how-to-make-an-interface-with-horizontal-tables-like-the-
        pulse-news-app-part-2";

    self.button2Label.textColor = [UIColor redColor];
}

- (IBAction)button3Tapped:(id)sender { 

    [self clearLabels];

    self.imageString = @"PathfindingButton.png";
    self.urlString = @"http://www.raywenderlich.com/4946/
        introduction-to-a-pathfinding";

    self.button3Label.textColor = [UIColor redColor];
}

- (IBAction)button4Tapped:(id)sender {

    [self clearLabels];

    self.imageString = @"UIKitButton.png";
    self.urlString = @"http://www.raywenderlich.com/4817/
        how-to-integrate-cocos2d-and-uikit";

    self.button4Label.textColor = [UIColor redColor];
}

在每个方法内,你做的仅仅就是先清除所有labels的颜色,用私有string属性储存对应的图片信息和链接信息,再把选中label的字体颜色设为红色。你可以写一点稍微不同的代码来避免重复4个方法的内容,但既然这是一个简单例子,我们就先不管了。

现在回到tweetTapped方法然后把下面代码加进去,但是需要加到[self presentModalViewController:...]前面:

if (self.imageString)
{
    [tweetSheet addImage:[UIImage imageNamed:self.imageString]];
}

if (self.urlString)
{
    [tweetSheet addURL:[NSURL URLWithString:self.urlString]];
}

你刚加了两个状态来确认你是否有一个image以及链接,如果你有的话,你需要把它们加进你的tweet单子通过呼叫addImage: and addURL:这两个方法。

在重申一次,这就是所有你需要做的!现在运行你的程序;这次请确认你选中某个教程然后点击Tweet按钮。如下图:

descr

请看,现在tweet单子上面有两个附件了,一个是我们的网站链接,另一个是你添加的图片。当用户看到这个Tweet时,他们会看到里面有两个URL-一个是图片的,另一个是链接的。试试看发送!

我们的朋友们,我的教程结束了!

接下来去哪?

这是本教程的代码 代码

如你所示在你应用里面整合Twitter是非常简单的,并且我看不出有什么真正的理由你不用它。

你可以稍微尝试改变一下,可以根据你选中的tutorial来动态的设置tweet单子的初始文字,或者加入更多的图片和链接。作为中国用户,你必须创建SLComposeViewController 的新浪微博实例来试验,条件允许的话,也可以是Facebook的。

如果你想要了解关于Twitter,Facebook和新浪微博的一些其他牛B东西,请看我们的书吧iOS 6 By Tutorials, 在那里我们会有另外的一个章节来罗列关于如何使用Accounts和 Social Frameworks来获得Twitter,Facebook和新浪微博API的完全连接。你也将被允许做如下的事情-比如连接某个用户的Facebook的个人文档,看他们的wall,得到用户Twitter的反馈。

希望你能和我一样享受这份教程。请随意提出你的问题以及意见在forums里,我已经对你们的下一个伟大的app而感到迫不及待了! :)

这篇教程由 iOS Tutorial 团队成员 Felipe Laso 发布, 一位在 Lextech Global Services工作的程序员。翻译者:



目前是一名自由IOS开发者,很高兴由我来为大家翻译这篇教程,有什么建议可以发信(xiekw2010@gmail.com)。

标签: IOS6, Twitter接口

?>