Hatena::ブログ(Diary)

Over&Out その後 このページをアンテナに追加 RSSフィード Twitter

2013-06-18

【iOS7】フラットデザインUI実装に役立つライブラリのまとめ

iOS7で採用されたフラットデザインっぽいUIを、現行iOS(〜6.x)で実装する際に役立つOSSをまとめました。後半ではiOS7っぽく下のビューをブラーかけて半透過表示するライブラリや、パララックス表示するライブラリも紹介しています。


* English version of this article


※(2013年7月17日追記)9点追加し、カテゴリ毎に分類しました。


総合

FlatUIKit

フラットデザインなUIコンポーネント詰め合わせ。ソースをみると、ほとんどのコンポーネントが該当するUIKitコンポーネントのカテゴリやサブクラスとしてつくってあって、使いやすそうです。






FlatUI

同様にUIコンポーネント詰め合わせですが、かなりiOS7に似せてつくられている点が特長です。


DrawingDrawingDrawingDrawing


UI7Kit

iOS5, iOS6 で iOS7 の見た目を実現するUIKitのサブクラス集。



iPhone Flat Design UI

フラットデザインのサンプル集的なXcodeプロジェクト。コンポーネント化されて使い回せるわけではありませんが、こう設定すればこういう見た目にできるのか、という参考になります。



スイッチ

SevenSwitch

iOS7のUISwitchの見た目をかなり忠実に実現したコンポーネント。切り替え時のアニメーションにこだわりを感じます。UISwitchのサブクラスではなく、UIControlのサブクラスとして実装されています。




MBSwitch

こちらも切り替え時のアニメーションにこだわりが感じられます。

  • OFF border color
  • ON tint color
  • OFF fill color
  • thumb tint color

を別々に設定できます。



KLSwitch


UIColor+MLPFlatColors for iOS

フラットUI向けにデザインされた20色をUIColorで利用できるようにしたカテゴリ。



色名(メソッド名)を忘れてもXcodeのコード補完で取り出しやすいように、各色は "flatXXXX" と命名されています。

+ (UIColor *)flatRedColor;
+ (UIColor *)flatDarkRedColor;

+ (UIColor *)flatGreenColor;
+ (UIColor *)flatDarkGreenColor;

// etc...

また、ランダムに色を生成するメソッドも備えていて、モック作成時等、配色で迷いたくないときに便利そうです。

+ (UIColor *)randomFlatColor;
+ (UIColor *)randomFlatLightColor;
+ (UIColor *)randomFlatDarkColor;

CocoaFlatUIColor

フラットデザインでよく利用されるカラーを20色揃えたカラーサンプルサイト『Flat UI Colors』の色をUIColorで利用できるようにしたカテゴリ。


こちらも MLPFlatColors と同様に、デザイナーがいないモック段階等でさくっとフラットUI風にしたい場合に配色で悩む手間が省けて便利そうです。


参考記事


ボタン

DBTileButton

Metro UI風のUIButtonサブクラス。


QBFlatButton

フラットな見た目にできるUIButtonのサブクラス。



3D的にアニメーションします(動画)。


Flat Pill Button


FlatButton


その他

RESideMenu

iOS7スタイルのサイドメニュー。


RESideMenu Screenshot


DribbbleのこちらのUIにインスパイアされたとのことです。(下記インスパイア元の画像と比べると、細かい動きがあまりしっかり再現されていない。。)



FlatDatePicker

フラットな DatePicker。



FlatWebView

UIWebViewの後ろのドロップシャドウをなくしたUIWebViewサブクラス。実装をみると、subviewsを辿ってUIImageViewをhiddenにしているようです。



おまけ1:iOS7ぽいビューを実現するUIライブラリ

DKLiveBlur

動的に下のビューをぼかして半透過っぽく表示してくれるビュー。ちゃんとAccelerate.frameworkを使用して実装されてるのでレスポンス面は期待してよさげ。



CFIFrostedOverlayView

上記同様、superviewをブラーをかけて表示してくれるビュー。こっちはGPUImageを使用



Parallax

パララックス表示するビュー。ただサンプルのアニメーションGIFにあまりパララックス感がないような。。(あとで動かしてみます)



おまけ2:フラットUIデザイン素材

Free iOS 7 UI Kit

Start designing iOS 7 apps today with this comprehensive GUI kit for Photoshop. Absolutely every element you see is 100% vector and completely editable!



2013-06-17

[iOS 7]Open source collection for Flat Design UI

This is a collection of OSS which helps you implement Flat Design UI on your current version of iOS (iOS5,6) just like that on iOS 7.


FlatUIKit

A collection of flat UI components.






UI7Kit

Backport flat-style UIKit from iOS7 to iOS5+.



iPhone Flat Design UI

A Xcode project which has many templates for Flat Design UI.



QBFlatButton

Flat Style UIButton.



FlatWebView

A subclass of UIWebView that hides the drop shadows behind said UIWebView.



Flat Pill Button


FlatButton


UI components which reproduce iOS7 effects

DKLiveBlur

Live blur effect similar to yahoo weather iOS app and iOS 7. This OSS uses Accelerate.framework, so the blur processing is extremely fast.



CFIFrostedOverlayView

A view that renders its superview with a gaussian blur like iOS 7's Control Center. This OSS uses GPUImage.



Parallax

A view that reproduces the parallax effect of the iOS7 home screen.



Flat UI kit for Photoshop

Free iOS 7 UI Kit

Start designing iOS 7 apps today with this comprehensive GUI kit for Photoshop. Absolutely every element you see is 100% vector and completely editable!



2009 | 08 |
2011 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2012 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2013 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2014 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2015 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2016 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 11 | 12 |
2017 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 10 | 11 | 12 |
2018 | 02 |