Adding a Share Button to an Objective-C iOS App

Xuni gives you the ability to turn your chart or gauge control into an image using the getImage method, but you may wonder how you can easily share this with others. Apple provides some tools to for this purpose that not only give you easy access to any available sharing options (Mail, Message, Facebook, etc.), but also the ability to quickly save and print your data visualization. In this article, we'll cover the highlights of implementing a sharing button in a small iOS app.

Implementing a Share Button

Creating the share button is a straightforward process. First we need to declare our shareButton object (which is of the type UIBarButtonItem).

UIBarButtonItem *shareButton;  

In the ViewController, we'll need to initialize the button, and add it as the right navigation item of our ViewController. We'll also specify the share method (which I'll get to shortly) to handle when the button is clicked.

shareButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(share:)];  
self.navigationItem.rightBarButtonItem = shareButton;  

The Share Method

The next step is to handle what happens when our shareButton is clicked. This is actually pretty straightforward too. We'll use the getImage method of our FlexChart object to return an NSData object that can be used to create a UIImage. This image can then be added into an array of activityItems which we can pass into our UIActivityViewController. If we wanted to share other items we could also add it to this array (for example if we wanted to pass a string in to automatically provide a caption). Next we'll need to create a new activityViewController of type UIActivityViewController. The UIActivityViewController is what we associate with a sharing screen. We can also exclude Activity types if we want to restrict what shows up in our UIAlertViewController as options for sharing or saving the image. Apple has a list of the builtin activityTypes if you want to exclude any in your own implementation. We'll also need to handle a special condition that occurs if our app is running on an iPad since that requires some extra logic. On an iPad, the sharing menu is present as a popover which means that we'll need to handle the sourceView (which is just our ViewController represented as self.view) and the sourceRect which is where the popover will be drawn on the screen.

- (void)share:(id)sender {  
    UIImage *image = [UIImage imageWithData:[chart getImage]];  
    NSArray *activityItems = @[image];  
    UIActivityViewController *activityViewControntroller = [[UIActivityViewController alloc] initWithActivityItems:activityItems applicationActivities:nil];  
    activityViewControntroller.excludedActivityTypes = @[];  
    if (UI\_USER\_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {  
        activityViewControntroller.popoverPresentationController.sourceView = self.view;  
        activityViewControntroller.popoverPresentationController.sourceRect = CGRectMake(self.view.bounds.size.width/2, self.view.bounds.size.height/4, 0, 0);  
    }  
    [self presentViewController:activityViewControntroller animated:true completion:nil];  
}  

Once we've finished up our implementation we should be able to run the app. Note that the options displayed in the sharing menu will vary based on what activities are installed and available on the device the app has been installed on.

Wrap Up

Adding a share button is actually a pretty simple process and gives your users a lot of flexibility. Not only does it make it trivial to share data via email and social media, but it also gives fast and easy access to file saving and printing.

Download the FlexChartImageShare sample >>