How to Make an iOS-friendly Flat UI Design

30a0fa53945400e145718f57155869d3?s=47 cocopon
May 24, 2013

How to Make an iOS-friendly Flat UI Design

iOS7でデザインが刷新されるとの噂もあり、最近話題となっている「フラットデザイン」。

フラットデザイン電卓「Llumino」の開発経験を交えながら、iOSフレンドリーなフラットデザインについて、デザインとコードの視点から解説します。

30a0fa53945400e145718f57155869d3?s=128

cocopon

May 24, 2013
Tweet

Transcript

  1. 54.

    “ ” جຊઓུ UIAppearanceΛ͔ͭ͏ (iOS 5.0 and later) You use

    the UIAppearance protocol to get the appearance proxy for a class. You customize the appearance of instances of a class by sending appearance modification messages to the class’s appearance proxy UIίϯϙʔωϯτ୯ҐͰ ֎؍ΛΧελϚΠζͰ͖Δ࢓૊Έ
  2. 57.

    1px 1px 1px 1px UINavigationBar UIBarButtonItem΋Ͷ ୯৭ͷഎܠը૾Λઃఆͯ͠ϑϥοτʹ [[UINavigationBar appearance] setBackgroundImage:barImage

    forBarMetrics:UIBarMetricsDefault]; [[UIBarButtonItem appearance] setBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
  3. 59.

    BarButtonItemͷλΠτϧ NSDictionary *attrs = @{ UITextAttributeTextShadowColor:[UIColor clearColor]}; [[UIBarButtonItem appearance] setTitleTextAttributes:attrs

    forState:UIControlStateNormal]; [[UIBarButtonItem appearance] setTitleTextAttributes:attrs forState:UIControlStateHighlighted]; TextAttributesΛಁ໌ʹͯ͠ແޮԽ͢Δ
  4. 60.

    BackButton ʮ͋ͷܗʯͷֆΛ༻ҙͯ͠ʜ CGContextBeginPath(context); CGContextMoveToPoint(context, size.width, 0); CGContextAddLineToPoint(context, size.width, size.height); CGContextAddLineToPoint(context,

    kTriangleWidth, size.height); CGContextAddLineToPoint(context, 0, size.height / 2.0f); CGContextAddLineToPoint(context, kTriangleWidth, 0); CGContextClosePath(context);
  5. 69.

    NavigationBarͷӨ ( > iOS6) UIImage *emptyImage = [[UIImage alloc] init];

    [navigationBar setShadowImage:emptyImage]; ίϨ
  6. 70.