[iOS 8] Today Extension で余白を調整する

[iOS 8] Today Extension で余白を調整する

Clock Icon2014.10.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Today Extension に対応した便利なアプリが続々とリリースされています。

iOS 8で使えるようになった通知センターのウィジェット対応アプリまとめ(10月25日更新)

さて、Today Extension は大変簡単に実装できます。一方で、ノウハウについての情報がまだ少なく、開発には多少困難が伴います。
そんな Today Extension について、いくつかのトピックに分けて、記事を投稿していきたいと思います。

さて今回は、Today Extension の表示領域・余白についてです。

サクッとStoryboard

スクリーンショット 2014-10-27 18.29.25
わかりやすいよう、View全体を青くしてしまいます。

余白を調整したい

Today Extension の表示領域は、UIEdgeInsetsで定義されています。
通常は何もしなくても、デフォルトの値を用いて表示してくれます。
しかし時には表示領域を変えてみたいと思うこともあるでしょう。

そんな時は、NCWidgetProvidingのデリゲートメソッドを用いましょう。
- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets

このメソッドから UIEdgeInsets のオブジェクトを返すことで、余白を調整できます。
上記デリゲートのdefaultMarginInsetsには、デフォルトの値が入っています。

左端の余白だけをデフォルトのままする

一定の余白
Today Extension は、通常左側に一定の余白が入っています。
様々な Extension はこの余白幅にしたがって設定・表示されています。

余白なし
まずは、あえて余白なしにしてみました。 コードは以下のとおり。

- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets
{
    return UIEdgeInsetsZero;
}

しかし、左端は揃っていたほうが綺麗ですので、あまり変えたくないところ。
そこで、以下の様に、左端のみデフォルトの値を取得する実装を試してみたいと思います。

- (UIEdgeInsets)widgetMarginInsetsForProposedMarginInsets:(UIEdgeInsets)defaultMarginInsets
{
    UIEdgeInsets insets = UIEdgeInsetsMake(50, defaultMarginInsets.left, 50, 50);
    return insets;
}

上記コードで、UIEdgeInsetsMakeでは4つの値を使っています。上辺、左辺、下辺、右辺の順で指定します。

iOS Simulator Screen Shot 2014.10.27 18.57.56
こんなふうに表示されます。

Today Extension の不具合に注意

App Extension は iOS 8から導入されたばかりの機能ですので、不安定な部分も多数あります。
筆者の開発環境(iOS 8.1のiPhone 6 / iOS 6.1)では、Today Extension の不具合と思われるものを幾つか確認しています。
表示関連では、Today Extension のビルドが正常に通ったにもかかわらず、ウィジェット表示欄に全く表示されない、Extension の項目名のみが表示され、中身が表示されないといった現象が時折起こります。
そうした時は、再度ビルド・実行をするとうまくいくことがあります。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.