14

I'm creating a Share Extension to allow to share Youtube videos into my app and am having a hard time to present my custom UI smoothly. Instead of the default view controller which just contains the raw Youtube URL, I want to do something visually similar to Facebook's extension, displaying a thumbnail and the video title. My first attempt at it was editing the MainInterface storyboard ShareViewController, but doing so briefly shows my custom interface and thet get's "overriden" by the default UI layout. So I ended up adding another view controller with my UI to the storyboard and in the ShareViewController I added

override func presentationAnimationDidFinish() {
    super.presentationAnimationDidFinish()
    DispatchQueue.main.async {
        self.pushConfigurationViewController(customVC)
    }

The problem with this obviously is that I still get to see the default View Controller before my custom one is pushed. So the question would be how do I get to show my custom UI right away when the share extension is started? I've experimented with the NSExtensionPrincipalClass in the .plist but did not have any positive results

Thanks in advance

leandrodemarco
  • 1,552
  • 1
  • 15
  • 22

3 Answers3

24

These general steps worked for me without using SLComposeServiceViewController (here's the code at the commit when it was implemented). The image at the end shows our result, but step 6 can be anything, not just a form.

Steps:

  1. (code) Change ShareViewController to simple UIViewController

  2. (code) Add blur effect to ShareViewController

  3. (storyboard) Add container view to ShareViewController

  4. (storyboard) Add navigation controller

  5. (storyboard) Embed navigation controller in ShareViewController's container view

  6. Customize the view controllers in the navigation controller (see this SO thread for example)

Step 1. Change ShareViewController to simple UIViewController

import UIKit

class ShareViewController: UIViewController {
//                         ^^^^^^^^^^^^^^^^

Step 2. Add blur effect to ShareViewController

    // ShareViewController continued from Step 1.

    override func viewDidLoad() {
        super.viewDidLoad()

        // https://stackoverflow.com/questions/17041669/creating-a-blurring-overlay-view/25706250

        // only apply the blur if the user hasn't disabled transparency effects
        if UIAccessibilityIsReduceTransparencyEnabled() == false {
            view.backgroundColor = .clear

            let blurEffect = UIBlurEffect(style: .dark)
            let blurEffectView = UIVisualEffectView(effect: blurEffect)
            //always fill the view
            blurEffectView.frame = self.view.bounds
            blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

            view.insertSubview(blurEffectView, at: 0)
        } else {
            view.backgroundColor = .black
        }
        // Do any additional setup after loading the view.
    }

Step 3. Add container view to ShareViewController

Drag a Container View from the Object Library into the ShareViewController on the storyboard, and adjust dimension. For example:

enter image description here

Step 4. Add navigation controller

Drag a Navigation Controller from the Object Library to the storyboard.

Step 5. Embed navigation controller in ShareViewController's container view

Control-drag from the container view of ShareViewController to the navigation controller, select "Embed" from the menu. Should look similar to this:

enter image description here

Step 6. Customize the view controllers in the navigation controller (see this SO thread for example)

My result:

enter image description here

toraritte
  • 6,300
  • 3
  • 46
  • 67
  • Where do I put the code? Code in the view controller that is embedded in the container is not able to get access to the extensionContext in in ShareViewController. – daniel Jul 04 '22 at 12:43
5

Well, digging and searching a bit more I found out that I had to make my ShareViewController a subclass of UIViewController instead of ** SLComposeServiceViewController**. As I designed my interface on storyboard, I left the .plist as it was, but had to take into account the problem of VC going full screen described here: iOS 8 Share Extension custom view controller size

I took @Dale answer there for solving it.

leandrodemarco
  • 1,552
  • 1
  • 15
  • 22
1

According to Apple, you can simply deactivate the default VC upon creation of the Extension. See the note under "Use the Xcode Share Template" section.

https://developer.apple.com/library/archive/documentation/General/Conceptual/ExtensibilityPG/Share.html

Russ J
  • 828
  • 5
  • 12
  • 24
  • I was following those direction, and I do not see the “Use standard social compose interface” checkbox anywhere. Do you know what we have to do since the checkbox is no longer there? – daniel Jul 01 '22 at 23:00