An iOS 10 Facebook Integration Tutorial using UIActivityViewController

From Techotopia
Jump to: navigation, search

PreviousTable of ContentsNext
Integrating Twitter and Facebook into iOS 10 ApplicationsiOS 10 Facebook and Twitter Integration using SLRequest


You are reading a sample chapter from the iOS 10 App Development Essentials book.

Purchase the full iOS 10 / Swift 3 / Xcode 8 edition of this book in eBook ($19.99) or Print ($45.99) format.
iOS 10 App Development Essentials Print and eBook (ePub/PDF/Kindle) edition contains over 100 chapters. Learn more...

Buy eBook Buy Print Preview Book


With the basics of the Social Framework and UIActivityViewController class covered in the previous chapter, the goal of this chapter will be to create an example application designed to demonstrate the UIActivityViewController class in action. The end result will be an application designed to post status updates to the user’s Facebook page and Twitter feed, including text and an image.




Creating the Facebook Social App

Begin by launching Xcode and selecting the options to create a new iOS application based on the Single View Application template. Enter SocialApp as the product name and set the Device and Language menus to Universal and Swift respectively.

Designing the User Interface

Navigate to the Main.storyboard file in the project navigator panel and select it to load it into Interface Builder.

Drag, position and configure a Text View, Image View and Toolbar onto the view canvas. Drag and drop an additional Bar Button Item onto the Toolbar and set the text on the two items so that the user interface reflects that illustrated in Figure 103-1 where the Text View object occupies the top section of the view:


Xcode 8 ios 10 social app ui.png

Figure 103-1

You are reading a sample chapter from the iOS 10 App Development Essentials book.

Purchase the full iOS 10 / Swift 3 / Xcode 8 edition of this book in eBook ($19.99) or Print ($45.99) format.
iOS 10 App Development Essentials Print and eBook (ePub/PDF/Kindle) edition contains over 100 chapters. Learn more...

Buy eBook Buy Print Preview Book

Note that the sample Latin text has been removed from the text view object (select the object, display the Attributes Inspector and delete the contents assigned to the Text property).

Select the Image View object, display the Attributes Inspector and change the Content Mode setting to Aspect Fit. This will ensure that the aspect ratio of the image is preserved when displayed in the image view.

Select the Text View object, display the Auto Layout Add New Constraints menu and set Spacing to nearest neighbor constraints on all four sides of the view with the Constrain to margins option enabled. Select the Image View and repeat this step, this time also enabling the Height constraint on the view.

Finally, select the Toolbar view and set Spacing to nearest neighbor constraints of zero on the left, right and bottom edges of the view with the Constrain to margins option disabled.


Creating Outlets and Actions

In order to create the outlets and actions for the application we will, as always, make use of the Assistant Editor. First, select the Text View object and then display the Assistant Editor.

Make sure that the ViewController.swift file is displayed in the editor before Ctrl-clicking on the Text View object in the view and dragging the resulting line to the area immediately beneath the class declaration directive in the Assistant Editor panel. Upon releasing the line, the configuration panel will appear. Configure the connection as an Outlet named postText and click on the Connect button. Repeat the above steps to add an outlet for the Image View object named postImage.

The application will require two actions, one for each of the buttons. Click on the Select Image button (noting that it may be necessary to click on it a second time since the first click will select the parent Toolbar view) and Ctrl-click and drag the resulting line to a position beneath the viewDidLoad method in the Assistant Editor. In the resulting configuration panel, change the Connection type to Action and name the method selectImage. Repeat this step to add an action for the Post Message button, this time naming the action sendPost.

Once the connections have been established, select the ViewController.swift file and further modify it to configure the class to act as an image picker delegate and to add some imports that will be required later in the tutorial:

You are reading a sample chapter from the iOS 10 App Development Essentials book.

Purchase the full iOS 10 / Swift 3 / Xcode 8 edition of this book in eBook ($19.99) or Print ($45.99) format.
iOS 10 App Development Essentials Print and eBook (ePub/PDF/Kindle) edition contains over 100 chapters. Learn more...

Buy eBook Buy Print Preview Book

import UIKit
import Social
import MobileCoreServices

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    @IBOutlet weak var postText: UITextView!
    @IBOutlet weak var postImage: UIImageView!

Implementing the selectImage and Delegate Methods

The purpose of the selectImage action method is to provide the user with access to photos on the device and allow one to be selected for inclusion in the Facebook post. With these requirements in mind, select the ViewController.swift file, locate the selectImage stub added by the Assistant Editor and modify it as follows:

@IBAction func selectImage(_ sender: AnyObject) {
    let imagePicker = UIImagePickerController()
    imagePicker.delegate = self
    imagePicker.sourceType =
                UIImagePickerControllerSourceType.photoLibrary
    imagePicker.mediaTypes = [kUTTypeImage as String]
    imagePicker.allowsEditing = false
    self.present(imagePicker, animated: true,
                completion: nil)
}

Next, add the other image picker delegate methods so that the picker is dismissed when the user has made a selection:

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
    self.dismiss(animated: true, completion: nil)
    let image = info[UIImagePickerControllerOriginalImage] as! UIImage
    postImage.image = image
}

func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
    self.dismiss(animated: true, completion: nil)
}

Hiding the Keyboard

When the user touches the view object in the background of the user interface, we need the keyboard to be removed from view. This will require that code be implemented in the touchesBegan method:

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    postText.endEditing(true)
}

You are reading a sample chapter from the iOS 10 App Development Essentials book.

Purchase the full iOS 10 / Swift 3 / Xcode 8 edition of this book in eBook ($19.99) or Print ($45.99) format.
iOS 10 App Development Essentials Print and eBook (ePub/PDF/Kindle) edition contains over 100 chapters. Learn more...

Buy eBook Buy Print Preview Book

Posting the Message

All that remains is to implement the code to create a UIActivityViewController instance, prime it with the text and image entered by the user and then post the message to the user’s Facebook page. These tasks are to be performed within the sendPost action method. Within the ViewController.swift file, locate the stub for this method and modify it as follows:

@IBAction func sendPost(_ sender: AnyObject) {

    var activityItems: [AnyObject]?

    if (postImage.image != nil) {
        activityItems = [postText.text as AnyObject, postImage.image!]
    } else {
        activityItems = [postText.text as AnyObject]
    }

    let activityController = UIActivityViewController(activityItems:
                activityItems!, applicationActivities: nil)
    self.present(activityController, animated: true,
                completion: nil)
}

The code simply creates an array of items to be included in the post (in this case the text entered by the user and an image in the event that one was selected), creates a UIActivityViewController instance initialized with that array and presents the controller to the user.

Seeking Photo Library Access

Access to the photos stored on the device requires authorization from the user. This involves the declaration of a privacy usage key within the project Info.plist file.

Select the Info.plist file, locate the bottom entry in the list of properties and hover the mouse pointer over the item. When the plus button appears, click on it to add a new entry to the list. From within the dropdown list of available keys, locate and select the Privacy – Photo Library Usage Description and enter a suitable description string into the value field value. For example:

This app allows you to select photos to include in social media posts.

You are reading a sample chapter from the iOS 10 App Development Essentials book.

Purchase the full iOS 10 / Swift 3 / Xcode 8 edition of this book in eBook ($19.99) or Print ($45.99) format.
iOS 10 App Development Essentials Print and eBook (ePub/PDF/Kindle) edition contains over 100 chapters. Learn more...

Buy eBook Buy Print Preview Book

Running the Social Application

With the coding now complete, the next step is to ensure that the device or simulator on which the app is to be tested has been configured with appropriate social network account settings. On the device or simulator, open the Settings app and scroll down to the Facebook and Twitter entries. Select one of these options (depending on which you plan to test the app with), enter your account information for that social network and tap the Sign In button.

Click on the run button in the Xcode toolbar to launch the application on a device or simulator. When the application appears, enter some text into the text area and select an image from the device. Touch the Post Message button to display the target selection screen shown in Figure 103-2:


Ios 8 select post destination.png

Figure 103-2


Select the Twitter button to display the preview sheet (Figure 103-3) and then, assuming no changes to the post need to be made, touch the Post button to send the message to your Twitter feed.


Ios 8 preview facebook post.png

Figure 103-3


Summary

This chapter has worked through the creation of an example application that uses the UIActivityViewController class to post updates to the user’s Facebook page and Twitter feed. The next chapter will look in more detail at using both the Accounts and Social Frameworks to implement social network integration using the SLRequest class.


You are reading a sample chapter from the iOS 10 App Development Essentials book.

Purchase the full iOS 10 / Swift 3 / Xcode 8 edition of this book in eBook ($19.99) or Print ($45.99) format.
iOS 10 App Development Essentials Print and eBook (ePub/PDF/Kindle) edition contains over 100 chapters. Learn more...

Buy eBook Buy Print Preview Book



PreviousTable of ContentsNext
Integrating Twitter and Facebook into iOS 10 ApplicationsiOS 10 Facebook and Twitter Integration using SLRequest