iOS 7 ユーザー インターフェイスの概要

iOS 7 では、ユーザー インターフェイスの変更が多数導入されています。 この記事では、コントロールの外観と、新しいデザインをサポートする API の両方における大きな変更の一部について説明します。

iOS 7 では、クロムよりもコンテンツを重視しています。 iOS 7 のユーザー インターフェイス要素は、コンテンツ ビューに使用する画面領域の量を減らす余分な境界線、ステータス バー、ナビゲーション バーなどの属性を排除することで、クロムに重点を置くことをやめます。 iOS 7 では、コンテンツは画面全体を使用するようにデザインされています。

iOS 7 にはその他にも、ボタンの境界線などの属性の代わりに色を使用してユーザー インターフェイス要素を区別するなど、いくつかの変更が導入されています。 ナビゲーション バーやステータス バーなどの多くの要素をぼかして半透明または透明にし、その下にコンテンツ ビューが表示されるようになりました。 これらのコンテンツ ビューは、ぼかしたバー越しに表示されるため、ユーザー インターフェイスの奥行きを感じさせます。

この記事では、iOS 7 のユーザー インターフェイス要素に対する変更の一部と、新しいユーザー インターフェイスのデザインに関連するさまざまな API について説明します。

表示とコントロールの変更点

UIKit のすべての表示は、iOS 7 の新しい概観に適合しています。 このセクションでは、これらの表示の変更の一部と、新しい UI をサポートするために変更された関連 API について説明します。

UIButton

次に示すように、UIButton クラスから作成されたボタンは、既定では背景なしで、境界線のない状態になりました。

UIButtonType.RoundedRect スタイルは非推奨となりました。 iOS 7 で UIButtonType.RoundedRect を使用した場合、上に示すように UIButtonType.System が使用され、背景や目に見える縁のない、既定のボタン スタイルとなります。

UIBarButtonItem

UIButton と同様に、バー ボタンにも境界線がなく、既定では次に示すような新しい UIBarButtonItemStyle.Plain スタイルになります。

また、UIBarButtonItemStyle.Bordered スタイルは非推奨になりました。 iOS 7 でUIBarButtonItemStyle.Bordered を設定すると、UIBarButtonItemStyle.Plain スタイルが使用されます。

UIBarButtonItemStyle.Done スタイルは非推奨になっていません。 ただし、太字のテキスト スタイルの場合のみ、次のように境界線のないボタンが作成されます。

UIAlertView

新しい iOS 7 の外観に向けたスタイル変更に加えて、アラート ビューではサブビューによるカスタマイズがサポート対象から除外されました。 UIAlertView は UIView を継承していますが、AddSubview を UIAlertView で呼び出しても効果はありません。 表すクレソン、ダン橄欖岩製品構文解析木作法:

UIBarButtonItem button = new UIBarButtonItem ("Bar Button", UIBarButtonItemStyle.Plain, (s,e) =>
{
    UIAlertView alert = new UIAlertView ("Title", "Message", null, "Cancel", "OK");

    alert.AddSubview (new UIView () {
        Frame = new CGRect(50, 50,100, 100),
        BackgroundColor = UIColor.Green
    });

    alert.Show ();
});

このコードでは、次に示すように標準のアラート ビューが生成され、サブビューは無視されます。

注: UIAlertView は iOS 8 で非推奨になりました。 iOS 8 以降でのアラート ビューの使用については、アラート コントローラーのレシピを参照してください。

UISegmentedControl

iOS 7 のセグメント付きントロールは透明で、色付けに対応しています。 色付けは、テキストと境界線の色に使用されます。 セグメントを選択すると背景とテキストの間で色が入れ替わり、次に示すように色付けが使用されて、選択したセグメントが強調表示されます。

また、UISegmentedControlStyle は iOS 7 では非推奨になりました。

ピッカー ビュー

ピッカー ビューの API はほとんど変更されていません。ただし、iOS 7 の設計ガイドラインでは、以前の iOS バージョンと同様に、画面の下部からアニメーション化された入力ビューとして、またはナビゲーション コントローラーのスタックにプッシュされた新しいコントローラーを介してではなく、ピッカー ビューをインラインで表示すべきであると記載されるようになりました。 これは、システム カレンダー アプリで確認できます。

UISearchDisplayController

UISearchDisplayController.DisplaysSearchBarInNavigationBar プロパティが true に設定されている場合、検索バーがナビゲーション バー内に表示されるようになりました。 false に設定されている場合、既定では、検索コントローラーが表示されるときにナビゲーション バーは非表示になります。

次のスクリーンショットは、UISearchDisplayController 内の検索バーを示しています。

UITableView

UITableView 関連の API は主に変更されていませんが、スタイルは新しいユーザー インターフェイスのデザインに適合するために大幅に変更されています。 内部のビュー階層も多少異なっています。 この変更は大半のアプリには影響しませんが、注意が必要です。

グループ化されたテーブル スタイル

次のように、グループ化されたスタイルが更新され、コンテンツが画面の端まで拡大されるようになりました。

SeparatorInset

UITableVIewCell.SeparatorInset プロパティを設定することで、行区切りをインデントできるようになりました。 たとえば、次のコードを使用すると、セルを左端からインデントできます。

cell.SeparatorInset = new UIEdgeInsets (0, 50, 0, 0);

これにより、次のようにインデントされたセルを含むテーブル ビューが生成されます。

テーブルのボタンのスタイル

テーブル ビューで使用されるさまざまなボタンがすべて変更されています。 次のスクリーンショットは、編集モードのテーブル ビューです。

その他のコントロールの変更

スライダー、スイッチ、ステッパーなど、その他の UIKit コントロールも変更されています。 これらの変更は純粋に視覚的なものです。 詳細については、Apple の「iOS 7 UI Transition Guide」(iOS 7 UI 移行ガイド) を参照してください。

一般的なユーザー インターフェイスの変更

iOS 7 では UIKit の変更に加えて、以下を含む UI に対するさまざまな視覚的変更が導入されています。

• 全画面表示コンテンツ
• バーの外観
• 色付け

全画面表示コンテンツ

iOS 7 は、アプリケーションが画面全体を活用できるように設計されています。 ビュー コントローラーは、ステータス バーとナビゲーション バーの下に表示されるのではなく、ステータスおよびナビゲーション バー (存在する場合) が上に重なった状態で表示されるようになりました。

iOS 7 用にアプリケーションを準備するとき、Interface Builder または Xamarin iOS Designer を使用してサブビューを視覚的に再調整できます。 また、新しい API の 1 つを使用して、全画面表示コンテンツをプログラムで処理することもできます。 これらの API を以下に紹介します。

TopLayoutGuide と BottomLayoutGuide

TopLayoutGuide および BottomLayoutGuide は、次の例のように半透明の UIKit バーがコンテンツに重ならないようにするために、ビューの始まりと終わりの位置の基準として機能します。

これらの API を使用すると、画面の上部または下部からのビューの移動距離を計算し、それに応じてコンテンツの配置を調整できます。

public override void ViewDidLayoutSubviews ()
{
    base.ViewDidLayoutSubviews ();

    if (UIDevice.CurrentDevice.CheckSystemVersion (7, 0)) {
        nfloat displacement_y = this.TopLayoutGuide.Length;

        //load subviews with displacement
    }

}

上で計算した値を使用して、画面の上部からの ImageView の移動距離を設定し、画像全体が表示されるようにできます。

移動距離の値は、ビューが階層に追加された後に動的に生成されるため、TopLayoutGuide および BottomLayoutGuide の値を ViewDidLoad 内で読み取ろうとすると、0 が返されます。 値はビューが読み込まれた後で計算してください。たとえば、ViewDidLayoutSubviews 内で行います。

重要

TopLayoutGuide および BottomLayoutGuide は、iOS 11 では新しいセーフ エリア レイアウトを優先して非推奨とされます。 Apple は、セーフ エリアの使用は iOS 11 以前の iOS バージョンと互換性があると述べています。 詳細については、iOS 11 向けにアプリを更新するためのガイドを参照してください。

EdgesForExtendedLayout

この API は、バーの透明度に関係なく、ビューのどの辺を全画面表示に拡大するかを指定します。 iOS 7 では、ナビゲーション バーとツール バーがコントローラーのビューの上に重なって表示されます。以前の iOS バージョンでは、同じ領域を占有していませんでした。 iOS 7 の写真アプリケーションでは、UIViewController.EdgesForExtendedLayout のデフォルト値、UIRectEdge.All が示されています。 この設定では、ビュー内の 4 つの辺すべてがコンテンツで埋められ、重なり合った全画面表示効果が生み出されます。

画像をタップするとバーが消え、画像が全画面表示されます。

全画面表示コンテンツが既定であるため、iOS 6 用に構成されたアプリケーションでは、次のスクリーンショットのようにビューの一部が切り取られます。

UIViewController.EdgesForExtendedLayout プロパティを変更することで、この動作を調整できます。 ビューで辺を埋めないように指定できるため、(どの方向でも) ナビゲーション バーまたはツールバーが占める領域にコンテンツが表示されないようにできます。

if (UIDevice.CurrentDevice.CheckSystemVersion (7, 0)) {
    this.EdgesForExtendedLayout = UIRectEdge.None;
}

このアプリでは、ビューの位置が再び変わり、画像全体が表示されるようになっています。

TopLayoutGuide/BottomLayoutGuide および EdgesForExtendedLayout API の効果は似ていますが、それぞれの目的は異なります。 EdgesForExtendedLayout の設定を既定から変更すると、iOS 6 用に設計されたアプリケーションでは切り取られたビューが修復されるかもしれませんが、iOS 7 の優れたデザインでは、全画面表示の美観を尊重し、TopLayoutGuide おび BottomLayoutGuide に依存して、操作されることを前提としたコンテンツをユーザーにとって快適な場所に適切に配置し、全画面表示のエクスペリエンスを提供するべきです。

ステータス バーとナビゲーション バー

ステータス バーとナビゲーション バーは、透過表示されます。 ステータス バーは透明ですが、ツールバーとナビゲーション バーは半透明でぼかされており、ユーザー インターフェイスの奥行き感を出します。 次のスクリーンショットは、このぼかしと透明度を示しています。コレクション ビューの青色の背景色がステータス バーとナビゲーション バーの両方に透けて見え、薄い青色の見た目になります。

ステータス バー スタイル

ぼかしと透明度に加えて、ステータス バーの前景には、薄い色または濃い色 (既定は濃い色) を指定できます。 ステータス バーのスタイルは、ビュー コントローラーから設定できます。 ビュー コントローラーでは、ステータス バーの非表示または表示も設定できます。

たとえば、次のコードは、ビュー コントローラーの PreferredStatusBarStyle メソッドをオーバーライドして、ステータス バーの前景を薄い色にします。

public override UIStatusBarStyle PreferredStatusBarStyle ()
{
    return UIStatusBarStyle.LightContent;
}

これにより、ステータス バーは次のように表示されます。

ビュー コントローラーのコードからステータス バーを非表示にするには、次のように PrefersStatusBarHidden をオーバーライドします。

public override bool PrefersStatusBarHidden ()
{
    return true;
}

これにより、ステータス バーは非表示になります。

色付け

ボタンは、クロムレス テキストとして表示されるようになりました。 テキストの色は、UIView の新しい TintColor プロパティを使用して制御できます。 TintColor を設定すると、設定するビューのビュー階層全体に色が適用されます。 アプリ全体に TintColor を適用するには、Window で設定します。 また、UIView.TintColorDidChange メソッドを使用して、色が変化するタイミングを検出することもできます。

たとえば、次のスクリーンショットは、ナビゲーション コントローラーのビューの色付けを紫色に変更した場合の効果を示しています。

色付けは、RenderingMode が UIImageRenderingMode.AlwaysTemplate に設定されている場合にも適用できます。

重要

UIAppearance を使用して色付けを設定することはできません。

動的な型

iOS 7 では、ユーザーがシステム設定でテキスト サイズを指定できます。 動的な型を使用すると、フォントはサイズに関係なく、見た目が良くなるように動的に調整されます。 ユーザーが制御するサイズに最適化されたフォントを取得するには、UIFont.PreferredFontForTextStyle を使用する必要があります。

まとめ

この記事では、iOS 7 のユーザー インターフェイス要素の変更について説明しました。 UIKit のビューとコントロールに加えられたいくつかの変更について、ビジュアルの変更と関連 API の変更の両方に焦点を当てて考察しました。 最後に、全画面表示コンテンツ、新しい色付けのサポート、動的な型を使用するための新しい API を紹介しました。