CODEWITHSUNDEEP
ioswidgettransparency
Zaur_M
Zaur_M

Reputation: 737

iOS Extension with transparent background

I would like to add transparency to iOS widget, but it looks like it is not supported by default. Most widgets are non transparent, but I have an example of transparent one.

That's why I ask you about any tips on how to implement such feature for widgets. Thanks in advance!

Upvotes: 2

Views: 901

Answers (2)

kakaiikaka
kakaiikaka

Reputation: 4487

Vym is right. We just developed a widget app that can implement such a pseudo-transparent effect.

enter image description here

Hoping this might help others who want to achieve such effect.

Here is how:

  1. Guide the user to take a screenshot(with current wallpaper) on a blank home screen, and save it.
  2. Tell the user to provide the widget with the widget position. This can be done via the Siri Intents Extension.
public enum WidgetCropPosition: Int {
    case smallTopLeft
    case smallTopRight
    case smallCenterLeft
    case smallCenterRight
    case smallBottomLeft
    case smallBottomRight
    
    case mediumTop
    case mediumCenter
    case mediumBottom
    
    case largeTop
    case largeBottom
}
  1. Crop the saved wallpaper according to the widget position.

The pain point here is the widget of the same position does don't have the same frame location on different devices. You have to do a lookup the table to find the correct position.

This is a Swift Package that helps to crop the correct frame on different iOS devices.Translucent

Upvotes: 1

Vym
Vym

Reputation: 543

Short answer is you can't (as of iOS 14.5).

Most "pseudo-transparent" non-Apple widgets involve asking the user for the wallpaper they're using, then cropping it accordingly and using the result as a widget's background, creating an illusion of transparency at that exact widget position. This can (and will) break parallax and other such effects.

That is if we're talking WidgetKit, of course; legacy Today widgets may give you a bit more freedom, although you likely won't achieve full transparency without hacks like above.

Upvotes: 2

Related Questions