iOS

iOSのウィジェットの不具合対応まとめ

 

Androidには昔からあったのですが、iPhoneはiOS14からウィジェットが登場しました。

その後、OSのアップデートを重ねるごとにウィジェットの仕様も変わり、iOS14時の実装のままだと表示がおかしくなる問題が起こり始めました。

この記事では実際に起こる不具合とその対処法を解説します。

 

変な英語が出て表示できない問題

XCode15系でビルドを行うとウィジェットに変な英語が出て表示できなくなります。致命的。
こちらはiOS16からのロック画面に出せるウィジェットでも起こるので注意してください。

Please adopt containerBackground API … ？？？？

 

これには、下記のようにwidgetBackgroundモディファイアをウィジェットのファイルに追加してあげて、最後の部分に追加すればOKです＿。

extension View {
    func widgetBackground(_ backgroundView: some View) -> some View {
        if #available(iOSApplicationExtension 17.0, *) {
            return containerBackground(for: .widget) {
                backgroundView
            }
        } else {
            return background(backgroundView)
        }
    }
}


.....


struct TodoWidExtEntryView : View {

....
    var body: some View {
        .....
        return ZStack(alignment: Alignment(horizontal: .leading, vertical: .top)) {
            ....
        }
        .widgetBackground(Color.clear) // 最後に足しておく
}

 

 

変な白い線が出る問題

XCode15系でビルドを行うとウィジェットの上下に白い線が出てしまう問題が起こります。

これには下記の通り、WidgetConfigurationのextensionを追加して、Configurationを定義している所に追加すれば直ります。

// このextensionを追加して
extension WidgetConfiguration
{
    func contentMarginsDisabledIfAvailable() -> some WidgetConfiguration
    {
        if #available(iOSApplicationExtension 17.0, *)
        {
            return self.contentMarginsDisabled()
        }
        else
        {
            return self
        }
    }
}


@main
struct TODOWidget: Widget {
    let kind: String = "TODOWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            TODOWidgetEntryView(entry: entry)
        }
        .configurationDisplayName(NSLocalizedString("widget.displayname", comment: ""))
        .description(NSLocalizedString("widget.description", comment: ""))
        .contentMarginsDisabledIfAvailable()  // これを足す
    }
}

 

直った！

 

ロック画面ウィジェットの角がカクつく問題

これは僕が適当に実装していたせいで、みなさんには起こっていないかもしれませんが、このようにXCode15でビルドするとロック画面ウィジェットの角がカクついてしまいます。

本来は左側のウィジェットの様にまん丸表示になっていたのですが…。

これは下記の通り「AccessoryWidgetBackground」を使えば直ります。
僕はColorを使っていました。

struct LockWidExtensionEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        return ZStack {
            AccessoryWidgetBackground()  // これにする
            Image("lockwidget").resizable().frame(width: 50, height:50)
        }
        .widgetBackground(Color.clear)
    }
}

 

 

RELATED POST