Recently, I found widgets outside the app quite interesting when I played with my mobile phone, so I checked some information on the Internet. It is a quick display operation function that has been opened in iOS 8 system, which makes up for the lack of 3D Touch function in iPhone. Although relevant development materials can be found on Baidu, I find that they are basically objective-C examples. I only read one article about Swift development (maybe I haven’t seen some), mainly because it is not detailed enough. As a novice, I also want to reduce the number of pits for beginners. I’ll explain how to play this widget in more detail. The picture

Development environment: Xcode 8.2.1 Development language: Swift 3.0 (above)

1. Step 1: How do I create widgets? There have been a lot of online, here I still give you a screenshot:

Select Today Extension, click Next, and a folder like the one shown below will be automatically created in your project:

(The swiftWidget folder here is my own name)

There is a TodayViewController. Swift, MainInterface. Storyboard and Info. The file (the inside of the image of two folders is I later put the picture)

That’s it! Can run to see the effect (it is recommended that the real machine run more)

Step 2: UI layout The UI layout of widgets is divided by iOS 10. IOS 10 and above is one type, and iOS 8 to iOS 10 (excluding iOS 10) is another type, as shown in the following figure:

The main difference is the background, although the background color can be customized for the widget, it is best to use the system’s own background color! So here I’ve given you two sets of UIs.

There are two ways to write a UI layout, but it is important to write a configuration file in pure code that needs to modify the NSExtension inside the info.plist file in the Widget folder

NSExtensionMainStoryboard: MainInterface (your storyboard) this is the default

The name of the NSExtensionPrincipalClass: TodayViewController widget controller (you)

Focus on: UI layout of widgets developed in Swift (current Swift 3.0 version) must use storyboard pull controls, which is the default above. This will not work if you write widgets in pure code. It took me dozens of attempts to find this bug. There is no record on the Internet, I can’t understand the official Apple document, and I don’t know what happened when I asked Da Shen. The process of climbing the pit is painful… . If anyone knows how to layout the UI using Swift pure code, I’d love to hear from you, and I take back my Swift bug. But objective-C can do both, so I’m just going to show you how to write Swift.

Specific how to give restraint, or you do it yourself! It’s not hard! Swift may not be able to use pure code for the UI, but the properties and methods defined by the storyboard pull control must be written in code. Otherwise, widgets cannot be developed! ^_^ for how to use two UI sets, this needs to be determined according to the iOS system, change the image!

3. Certificate application: If you want to be on the shelf, you must apply for a certificate. Since the widget is a separate control, it requires a separate bundle ID and certificate

Of course, the bundle ID of the main app is also the same, but they cannot have the same name. Here I applied for it using the enterprise certificate.

Note that the widget is a component of the app. To share data, there is an ID set and application called app Groups:

Note that the app Groups function needs to be enabled for both the id of the main app and the ID of the widget. Here I will only use a screenshot of the id of the widget as an example:

The bundle ID must also be associated with the ID of your App group and the ID of your main App. If you have already applied for a certificate but have not been associated with it, please edit the bundle ID and add it again:

Then be sure to update the certificate in Xcode by opening App Groups:

(Must be able to update the certificate after the use of oh! Because apple’s certificate is not updated in your Xcode after it is updated on the website, it will generate a new one, which you need to manually delete and add).

At this point, the certificate and App Groups are added. If there is an error, check it carefully (you can trust that the program will not error on purpose; There is a mistake, must be you there did not do well, in their own body to find the reason).

4. Data sharing and transmission: With the addition of App Groups above, we can use code to transfer and share data. In general, widgets are just a quick display of data and actions on your phone. You can test them out using your phone’s Alipay app.

Here I’m going to take a screenshot of the code, and I’m going to use UserDefaults to store the data, check it in the main app, and open the corresponding interface.

Note that widget is a separate control operation, so if you click on the widget button to jump to the main app, you need to give the main app a URL access scheme:

Then judge the data you have stored in the main app (note that there are two kinds of iPhone apps, one is in the background state, one is completely closed state) and jump to the corresponding interface. To clarify, the charging status above is the dead data I gave myself, I did not do the relevant data sharing operation, think about it by myself, it is very simple. If you need a demo, please download it on Github: https://github.com/chenwupeng/CCwidget/tree/7f28c5f458a38cb174b7e038dc21db7a7710dcd6 to summarize, this time with the Swift development of widgets, did get a lot of detours, But fortunately, from the pit up, also hope apple can quickly fill up the pit! Here, I hope that this article can be of some help to you in the same industry, if found about the pit of SWIFT development, as far as possible will help you point out!