iOS7の気に入らない背景やテキストの色を変更する方法!



iOS7の登場で、全体的なデザインがフラットデザインとなりました。
また、どうやらiOS7のデザインコンセプトとして『重ねて魅せる』があるようで、
座標の取り方もかなり変更されています。
主に、ステータスバーとナビゲーションバーが一体化してしまったり、
座標0地点がステータスバーを考慮しないスクリーンの左上となってしまったりと、
iOS6のコーディングのままでは結構デザイン崩れが起きてしまいます。

そこで、今回はiOS7の変更点の一つで有るデフォルトの『色』について、
変更する方法を解説します。


  1. iOS7判別方法
  2. ナビゲーションバーの色を変更する
  3. ステータスバーの色を変更する
  4. テーブルの背景色を変更する




iOS7判別方法


iOS7は、iOS6までと異なった処理を行う事が多いので、
実行されている端末のOSバージョンを調べて、『iOS7の場合は○○する』的な実装となる事も
あるかと思います。

そこで、iOS7か否かを判別する専用のメソッドをUtilityとして、共通で扱える様にすると便利です。
具体的に、下記の様なメソッドを用意すると良いかと思います。


+ (BOOL)isIOS7
{
    //  バージョン情報を『.』で分割し、配列に保持
    NSArray*    versions        = [[[UIDevice currentDevice] systemVersion] componentsSeparatedByString:@"."];

    //  配列の先頭をメジャーバージョンとして取得する
    NSInteger   major_version   = [[versions objectAtIndex:0] intValue];

    //  メジャーバージョンが7?
    if(major_version == 7){
        return YES;
    }

    return NO;
}


例えば、AppUtilityというクラスに上記メソッドを定義したとして、
下記の様に判定に使用する事が出来ます。


if( [AppUtility isIOS7] ){
    //  IOS7です!
}

簡単ですね。また、今回示した例ですと、iOS8等へのアップデートに対応出来ません。
ですので、判定を『iOS7か否か』ではなく、『iOS7以上か否か』として実装しても良いかも知れません。
その場合は、メソッド名もそれなりに変更しておくと分かり易いでしょう。



ナビゲーションバーの色を変更する


iOS6では、ナビゲーションバーの背景色というかスタイルはグレーっぽい丸みをおびた
スタイルで、タイトルやボタンのテキストは白でした。

iOS7では、ナビゲーションバーのスタイルがフラットデザインと成り、
デフォルトでは背景色が白、タイトルは黒、ボタンのテキストも黒といった
iOS6とは真逆の色合いです。

更に、若干透けたデザインですので、ベースとなる背景色の影響を受けてしまうので
デザインによってはとても見難くなってしまいます。

そんな、iOS7のナビゲーションバーの各色を新たに設定しなおし、
iOS6の色合いに近づける方法を解説します。

大きく分けて変更する対象は三つ有ります。

  • ナビゲーションバーの背景の色
  • ナビゲーションバーのボタンに使用されるテキストの色
  • ナビゲーションバーのタイトルの色


ナビゲーションバーの背景の色を変更する


iOS7では、ナビゲーションバーの背景色を持つプロパティ『barTintColor』が
新たに追加されました。
デフォルトで白となっているナビゲーションバーの背景の色を変更するには、
『barTintColor』へ『UIColor』を新たに設定しなおしましょう。

//  ナビゲーションバーの背景色を青色に変更する
self.navigationController.navigationBar.barTintColor = [UIColor blueColor];



ナビゲーションバーのボタンに使用されるテキストの色を変更する


iOS6では、ナビゲーションバーのボタンのテキストの色はデフォルトで白でした。
それが、iOS7では黒がデフォルトです。
変更するには、iOS6での色変更に使用していた『tintColor』が
iOS7ではボタンのテキスト色に割り当てられていますので、
『tintColor』に対して『UIColor』にて白等を設定しましょう。

//  ナビゲーションバーのボタンに使用されるテキストの色を白色に変更する
self.navigationController.navigationBar.tintColor = [UIColor whiteColor];


ナビゲーションバーのタイトルの色


iOS6ではデフォルトで白かったナビゲーションバーのタイトルも、
iOS7では黒がデフォルトとなっています。
ナビゲーションバーのタイトルの色を白色とするには、下記の様に実装して下さい。

//  ナビゲーションバーのタイトルの色を白色に変更する
[UINavigationBar appearance].titleTextAttributes = @{NSForegroundColorAttributeName: [UIColor whiteColor]};



ステータスバーの色を変更する


iOS6では、ステータスバーの文字色はデフォルトで白色でしたが、
iOS7では、黒色がデフォルトです。
そんな、ステータスバーの文字色も白色へ変更する事が可能です。

変更方法としては、ステータスバーのスタイルを『UIStatusBarStyleLightContent』として設定しなおします。


//  ステータスバーのスタイルを、文字色を白色としたスタイルへと変更する
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

また、iOS7ではステータスバーのスタイルをViewController毎に変更する事も出来、
info.plistの『View controller-based status bar』プロパティに対して
変更を可能とするか否かの設定を真偽値にて指定する事が出来ます。

今回は、基本となるステータスバーのスタイルとしたいので、
『View controller-based status bar』の値は『NO』としておきます。

また、ViewController毎にステータスバーに対して制御を掛けたい時は
『View controller-based status bar』の値を『YES』とする事で、
下記のデリゲートメソッドの使用が有効となります。

//  ステータスバーのスタイルを上書き
- (UIStatusBarStyle)preferredStatusBarStyle;

// ステータスバーの表示状態を上書き
- (BOOL)prefersStatusBarHidden;

上記のメソッドの利用を伝える為に、iOS7から下記のメソッドが追加されました。

//  ステータスバーへの上書きを行う
- (void)setNeedsStatusBarAppearanceUpdate;

上記のメソッドを『viewDidLoad』内等で叩く事により、
ステータスバーのスタイルや表示状態を上書きするメソッドが
起動されますので、目的の内容を返却して指定して下さい。





テーブルの背景色を変更する


UITableViewの背景色を指定したとしても、iOS7では、UITableViewCellの背景色がデフォルトで白な為、
背景を透明等にしたい際は下記メソッドにて随時指定する必要があります。
(iOS6では、デフォルトで透明です。)

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell
forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.backgroundColor = [UIColor clearColor];
}

読み込まれるcellに対してbackgroundColorを新たに指定しなおします。
これで、iOS6の様に透明なテーブルを使用する事が出来ます。





筆者はテーブルの各セルに対して半透明の画像を使用していたので、
iOS7になってから白いセルになっていて驚きました。
ステータスバーの座標問題も然る事ながら、ナビゲーションバーがとても見難く
本当にズタボロな状態でした。
今回の記事では、そんな状態からiOS6を意識してiOS7対応を行う際に
修正した箇所について、色を中心に解説しました。

他にも、iOS7対応については随時更新して行きたいと思いますが、
まずは色関係の調整を行って頂ければ幸いです。



コメントをお待ちしています

人気の投稿

Category

Algorithm (2) Android (8) ASP/aspx (1) Blogger (2) C/C++ (1) Chrome (5) CSS (9) Firefox (4) Fortran (1) Google (9) GoogleMap (2) HTML (12) IE (3) Information (4) iOS (2) iPhone/iPad/iPod (2) Java (6) JavaScript (16) jQuery (9) JSP (1) LifeRecipe (5) Linux (2) Macintosh (2) MapKit (4) Marketing (7) MySQL (3) NAMAZU (2) Objective-C (7) Other (7) Perl (1) PHP (9) Python (1) RSS/Atom (2) Ruby (1) Safari (2) SEO (11) Smarty (2) SQL (2) Tex (1) Three.js (1) Twitter (1) TwitterLog (313) UIKit (5) Unix (1) VBA/VBS (1) Windows (5) WordPress (3) Writing (5) XAMPP (1) XML (1) Yahoo (2) ZendFramework2 (14)

Archives