Tutorial: Creating a Sharing Panel

On iOS, many apps include a share button that lets you share your app’s features, whether it be a message, an achievement, or a high score via various services like Facebook, Twitter, email, etc. On Android, the Corona SDK plugin shows all of the device’s valid methods of sharing, but on iOS, Corona doesn’t offer a pre-built sharing panel. As such, expanding upon last week’s widget.newPanel() tutorial, let’s walk through the steps to construct a sharing panel.

For iOS, this panel is implemented in two different ways, one with a block of icons and one with text-like buttons. This tutorial will focus on the latter and we’ll implement it with a widget.newTableView() so that the entire row is touchable and triggers the event.

Note that for true iOS-style functionality, this tutorial depends on the native.showPopup() API and the social plugin. The social plugin is a premium feature for Pro and Enterprise subscribers, so if you’re a Starter or Basic subscriber, you’ll need to rewrite some aspects to utilize the native.showPopup() version of Twitter and void support of Facebook.

Setting Up

Like previous tutorials, we’ll attach our new sharing panel to the widget library for easy reference. Let’s begin by requiring the widget library. Next, we’ll need to add the widget.newPanel() function from the previous tutorial. Third, begin a new function for our sharing panel.

1

2

3

4

local widget=require("widget")

--Insert core functionfrom the widget.newPanel()tutorial here!

functionwidget.newSharingPanel()

Create the Table View Helpers

Implementing a table view in Corona requires some “helper” functions that handle row rendering (creation) and touching of the rows. Because we must adhere to proper scoping rules in Lua, this tutorial will explain the process in a way that presents these functions before they’re actually referenced by the table view constructor. To make the table view work, two functions are necessary:

onRowRender() — function to draw each row

onRowTouch() — function to handle each row being tapped

The onRowRender() function is straightforward — it basically just determines the appearance of each row. If it’s a category row, we create a text label Share and center it within the row. If it’s not a category row, we create a text label based on what is passed to the params.label value.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

local functiononRowRender(event)

local row=event.row

local id=row.index

local params=event.row.params

if(row.isCategory)then

row.text=display.newText("Share",0,0,native.systemFont,14)

row.text:setFillColor(0.67)

row.text.x=display.contentCenterX

row.text.y=row.contentHeight *0.5

row:insert(row.text)

else

row.text=display.newText(params.label,0,0,native.systemFont,18)

row.text:setFillColor(0.5,0.5,1.0)

row.text.x=display.contentCenterX

row.text.y=row.contentHeight *0.5

row:insert(row.text)

end

end

The onRowTouch() function is a little more complex…

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

local functiononRowTouch(event)

local popupName=event.row.params.popupName

local service=event.row.params.service

if(popupName==nil)then--the cancel button

local myPanel=event.row.params.parent

myPanel:hide()

returntrue

end

if(popupName=="mail")then

native.showPopup(popupName,

body=body,attachment=attachment)

elseif(popupName=="sms")then

native.showPopup(popupName,

body=body)

elseif(popupName=="social")then

local isAvailable=native.canShowPopup(popupName,service)

if(isAvailable)then

native.showPopup(popupName,

service=service,message=message,image=image,url=url)

else

if(isSimulator)then

native.showAlert("Build for device","This plugin is not supported on the Corona Simulator, please build for an iOS/Android device or the Xcode simulator","OK")

First, there must be a way to determine the functionality of the cancel button. Since there is no popup for this, if the row has no popupName in its parameters, we can assume that it’s the cancel row. This also needs a reference to the parent’s panel function to call its :hide() method (this is passed in with the params as the parent option). Thus, if the cancel button is pressed, the panel will slide off the screen.

Second, each of the popups require different parameters, so we use the table view row params table to pass in the bits that each sharing popup requires. In the conditional logic, the entry popupName indicates which popup to use, and for the social plugin, service defines which service to use. Note that the social plugin may or may not be available, so we test for it and also test if we’re using the Simulator.

This panel is rather standard. We set its location to "bottom" so that it will slide up from the bottom of the screen. We also make it the width of the screen and set the height to 240. This assumes that the panel will support Facebook, Twitter, email, and SMS, in addition to a header row and a cancel row. At a height of 40 pixels each, these 6 rows will occupy the height of the table view. Finally, we set a speed of 500 and include some easing parameters to create a more pleasing transition effect.

Create the Empty Table View

The only thing that will be added to the panel is the table view. The following code creates an empty table view widget and inserts it in the panel widget. Note that the rendering and touch parameters reference the functions that we created above.

1

2

3

4

5

6

7

8

9

10

11

12

13

local tableView=widget.newTableView

top=0,

left=0,

width=display.contentWidth-16,

height=240,

backgroundColor=0.9,

noLines=true,

onRowRender=onRowRender,

onRowTouch=onRowTouch

}

tableView.x=0

tableView.y=0

panel:insert(tableView)

Insert the Rows

Next, we’ll insert the rows into the table — a header row, rows for the various popups, and a cancel row.

Close the Function

Finally, don’t forget to close the widget.newSharingPanel() function with an end statement!

1

end

Showing the Panel

To create the actual panel and get an object reference to it, simply call the newSharingPanel() function:

1

local sharePanel=widget.newSharingPanel()

Then, to show and hide the panel, use the following methods that are built in to the widget.newPanel() function:

sharePanel:show()

sharePanel:hide()

Conclusion

Hopefully this tutorial gets you started with implementing a basic sharing panel in the iOS 7 style. To experiment with this project further, please download the sample project and, as usual, leave your feedback below.

Disclaimer: SDKNews.com only syndicates the blog entries from various SDK blogs.
We are not the creator/author of these entries (posts). Product names, brand names
and company names mentioned on this site may be trademarks of their respective owners.