Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Make an iOS-friendly Flat UI Design

cocopon
May 24, 2013

How to Make an iOS-friendly Flat UI Design

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

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

cocopon

May 24, 2013
Tweet

More Decks by cocopon

Other Decks in Technology

Transcript

  1. “ ” جຊઓུ 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. 1px 1px 1px 1px UINavigationBar UIBarButtonItem΋Ͷ ୯৭ͷഎܠը૾Λઃఆͯ͠ϑϥοτʹ [[UINavigationBar appearance] setBackgroundImage:barImage

    forBarMetrics:UIBarMetricsDefault]; [[UIBarButtonItem appearance] setBackgroundImage:barButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
  3. BarButtonItemͷλΠτϧ NSDictionary *attrs = @{ UITextAttributeTextShadowColor:[UIColor clearColor]}; [[UIBarButtonItem appearance] setTitleTextAttributes:attrs

    forState:UIControlStateNormal]; [[UIBarButtonItem appearance] setTitleTextAttributes:attrs forState:UIControlStateHighlighted]; TextAttributesΛಁ໌ʹͯ͠ແޮԽ͢Δ
  4. 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. NavigationBarͷӨ ( > iOS6) UIImage *emptyImage = [[UIImage alloc] init];

    [navigationBar setShadowImage:emptyImage]; ίϨ