iOS 8's excellent cross-app communication effect: Interpretation of Action extension

App extensions were first introduced at WWDC 2014 as a way to extend the functionality of iOS apps to other parts of the system and enable better cross-app communication.

For example, you can use Today extensions to create widgets that appear in the Notification Center, Sharing extensions to help users share information to social networks, and Action extensions to allow users to execute current content - including displaying it in a different way or making changes to the content. In today's Getting Started Guide, we will learn how to create an Action extension from scratch.

Although this article does not impose too many rigid requirements on your knowledge reserves, I still recommend that readers read some relevant materials first, so that they can more easily master more extension creation knowledge after the guidance of this article.

WWDC Talk: Creating Extensions for iOS and OS X – Part 1 and Part 2

Application Extension Programming Guide

1. What do we want to create?

We are going to create a simple Action extension called "Read it". This extension will take text as input and read it out loud using the speech synthesis API in the AVFoundation framework. I think the whole process is very suitable as the core of this tutorial because we don't need to introduce any third-party dependencies or other difficult problems in the process.

The following is the result of the extended function after the creation. You can click here to download the creation result of this tutorial from GitHub.

2. Create an Action extension

Step 1: Project Setup

The first thing to do is to launch Xcode 6.1 or higher and create a new project. In Xcode's File menu, select New > Project... and then select Single View Application from the list of templates.

Click Next and give our project a name of SampleActionExtensionApp. Enter an Organization Identifier and set the Devices type to iPhone. In this tutorial, we will use the programming language Objective-C.

Step 2: Add a target

After completing the above project creation, you can now add a target for the Action extension. From the File menu, select New > Target… In the left panel, select Application Extension from the iOS option and click Next after selecting Action Extension.

Now set the Product Name to ReadItAction. There are a few other options to note, especially the Action Type. We will discuss this topic in depth later. Now click Finish to create the Action extension.

Now you will be asked if you want to activate the ReadItAction project. Click Cancel for now, because we will install the Action extension by running the content application instead of activating it directly.

Action Type

There are two types of Action extensions, one with a user interface and one without a user interface. You may wonder what the real benefit of Action extensions without a user interface is? Let me explain.

Action extensions without a user interface act on the current project with the goal of changing content. For example, an Action extension can remove red-eye from a photo without any user interface. Content applications can then apply the changed content, in this case the corrected photo.

Action extensions with user interfaces can be displayed in full screen or formatted tables. The Action extension target template uses the full screen format, so we will use it as a design idea in the following creation process.

Step 3: Implementation of the User Interface

Now that we have completed the basic setup process, that is, we are ready to create the user interface, we will start with the application content.

First, click Main.storyboard under the SampleActionExtensionApp group in the Project Navigator. In the right panel, select File Inspector and uncheck Use size classes. Note that if you are planning to create a real app and do not need to support iPad, using size classes is probably the best choice.

Next, open the Object Library and drag the text view and toolbar into the view. In the Size Inspector on the right, set the text view's frame to {x:8, y:20, width:304, height:288}. For the toolbar, we also set it in the Size Inspector, with the specific parameters being {x:0, y:308, width:320, height:44}.

The toolbar should contain a BarButton. Select it, and in the Attributes Inspector set its Style to Plain and its Identifier to Action.

As a finishing touch, we need to remove the default text in the text view and replace it with "Tap the action button to invoke activity view controller. Then select 'Read it' action and this text will be read by our sample Action extension."

The view controller’s user interface should now appear as shown below:

Of course, we could leave the content app blank. After all, our goal is to build a sample app extension, so the app itself doesn't really need to execute any functionality. However, I wanted to show you how easy it is to call an activity controller from within an app, and I believe you can use this to learn how to incorporate other Action extensions into your own apps.

When you click the button in the toolbar, an activity view controller will be displayed, and we can call our Action extension from here. Another reason for choosing this approach is that if you plan to publish your extension to the App Store, it must be part of a real application, and the application must have functions to pass Apple's official approval.

Step 4: Current Active View Controller

Next, we need to add some code to ViewController.m. First, create a set of appearances for the text view in the view controller's class extension. The specific code is as follows.

 @interface ViewController () 
  
 @property (nonatomic, weak) IBOutlet UITextView *textView; 
  
 @end  

Create an action called actionButtonPressed, where we will initialize and display the UIActivityViewController instance and present it to the user.

 - (IBAction)actionButtonPressed:(id)sender {
    UIActivityViewController *activityVC = [[UIActivityViewController alloc] initWithActivityItems:@[self.textView.text]
                                                                             applicationActivities:nil];
    [self presentViewController:activityVC animated:YES completion:nil];
 }

Back in Main.storyboard, you can connect the text view skin to the text view by Control-dragging the text view skin from the View Controller object under View Controller Scene into the text view and then selecting textView from the pop-up menu.

To connect to the action method, we need to select the bar button in the tool and open the Connections Inspector. Drag it from the selector under Sent actions to the View Controller object and select actionButtonPressed: in the pop-up menu.

At this point the application's user interface has been designed and officially delivered for use. Now we can move on to creating the Action extension.

Step 5: User Interface Implementation

In the Project Navigator, expand the ReadItAction group and click MainInterface.storyboard. You'll notice that the storyboard is not empty, but already contains some user interface components. We can use some of them, but the image view is not very helpful. So select the image view and remove it by pressing the Delete key.

Next, open the Object Library and add a text view to the bottom navigation bar. Change its frame to {x: 8, y: 72, width: 304, height: 300}. Finally, double-click the title view of the navigation bar and set the title content to "Text reader".

Step 6: Implementation of ActionViewController

At this point, we need to finish implementing the Action extension. Select ActionViewController.m in the Project Navigator and make the following changes to it.

The following import statement will add an import statement to the AVFoundation framework so that we can use its speech synthesis API in our Action extension.

1 @import AVFoundation;

In the class extension of the ActionViewController class, remove the imageView appearance and add the new appearance we added to the text view earlier.

 @interface ActionViewController () 
  
 @property (nonatomic, strong) IBOutlet UITextView *textView; 
  
 @end  

In addition, we also need to make the following changes to the viewDidLoad method in the ActionViewController class.

 30 - ( void )viewDidLoad {
 [ super viewDidLoad]; 
      
 // Get the item we intend to process from the extended context information.  
 // In our Action extension, we only need one input item (the text), so we use the first item in the array.  
    NSExtensionItem *item = self.extensionContext.inputItems[ 0 ];
    NSItemProvider *itemProvider = item.attachments[ 0 ]; 
      
 if ([itemProvider hasItemConformingToTypeIdentifier:(NSString *)kUTTypePlainText]) { 
          
 // This is plain text!  
        __weak UITextView *textView = self.textView; 
          
        [itemProvider loadItemForTypeIdentifier:(NSString *)kUTTypePlainText options:nil completionHandler:^(NSString *item, NSError *error) { 
              
 if (item) {
                [[NSOperationQueue mainQueue] addOperationWithBlock:^{ 
                      
                    [textView setText:item]; 
                      
 //Set up speech synthesis and start it  
                    AVSpeechSynthesizer *synthesizer = [[AVSpeechSynthesizer alloc]init];
                    AVSpeechUtterance *utterance = [AVSpeechUtterance speechUtteranceWithString:textView.text];
                    [utterance setRate: 0.1 ];
                    [synthesizer speakUtterance:utterance];
 }];
 }
 }];
 }
 }

The whole implementation is pretty easy to understand. In viewDidLoad, we get the input text, assign it to the text view, and then create a speech synthesis object that can read it aloud.

Step 7: Configure Action extension

Although we are nearing the end of the project creation process, there are still some details that need to be paid attention to. First, we need to connect the text view in the storyboard to the appearance scheme we have created above.

Open MainInterface.storyboard and connect the text view to the Image scene, just as we did in Main.storyboard.

Next, we need to specify the data types that the Action extension can support. In this case, we only need to support plain text data. Expand the Supporting Files group and select Info.plist. In Info.plist, follow the NSExtension > NSExtensionAttributes > NSExtensionActivationRule navigation flow and finally change the type of NSExtensionActivationRule from String to Dictionary.

In the expanded dictionary, click the + button next to it to add a new child key. Set its name to NSExtensionActivationSupportsText, type to Boolean, and value to YES. This way, we can ensure that our Action extension will only be displayed when the input item contains text content.

Still in Info.plist, we need to change the Bundle Display Name to Read It. This will make it look clearer. The following figure shows the result of setting the relevant part of the Info.plist file:

Step 8

As a finishing touch, you can add an icon for the Action extension. In the Project Navigator, select the project and under Targets, select the ReadItAction target. In the App Icons and Launch Images section, under the General tab, click Use Asset Catalog next to App Icons Source. As prompted, we will then click Migrate. Then go to the Asset Catalog and drag the following icon to the iPhone App iOS 7, 8 60pt 2x location.

[[127275]]

Complete the steps of building and running the application to see if everything works as expected. However, there is one more thing to pay attention to: if the sound icon is not displayed properly in the Action extension, you need to make sure that the main Images.xcassets file has been correctly copied to the extension target.

To do this, select the project in the Project Navigator and choose the ReadItAction target from the Targets list. Open the Build Phases tab at the top of the screen and expand the Copy Bundle Resources step. If the Images.xcassets file does not appear in the list of resources, click the small plus sign to manually add it to the list.

3. Run and test

The last thing to do is to run the application and try out its functions. The two screenshots below show the extension in action. You can also try to call the activity view controller through the Notepad application and let our extension read the text content that has been recorded before. In addition, we might as well open the activity list in the Photos application, and you will find that your extension is not listed. Yes, this just meets the activation rules we set for it before.

Summarize

In today's tutorial, you learned how to build a simple Action extension. We also covered some basic knowledge, that is, how to use the speech synthesis API in the AVFoundation framework. If you have more ideas for creating extensions, you can also click here to view the Today extension creation guide brought by Cesar Tessarin.

If you have any questions or suggestions about this article, please share them with us in the comment section below.

Original English text: http://code.tutsplus.com/tutorials/ios-8-how-to-build-a-simple-action-extension--cms-2279