2013/11/14

400個以上のフリーなアイコンをiOSで楽に使えるようにするライブラリIonIcons-iOSを試す

現在開発中のモバイルアプリ用フレームワークIonicのアイコンであるIoniconsをiOS向けに利用しやすくしたものがionicons-iOSです。

現在437個のアイコンがあり、フリー (Ioniconsとionicons-iOSは共にMITライセンスで公開されています) で、かつ導入と利用が簡単そうなので試してみました。

使いかた

UIImageを取得するにはimageWithIcon:size:colorを利用します。

UIImage* icon = [IonIcons imageWithIcon:icon_ios7_search
                                   size:30.0f
                                  color:[UIColor blackColor]];

余白を設けたい場合にはimageWithIcon:iconColor:iconSize:imageSize:を利用します。

UIImage* icon = [IonIcons imageWithIcon:icon_settings
                              iconColor:[UIColor colorWithRed:0 green:0.48 blue:1 alpha:1]
                               iconSize:30.0f
                              imageSize:CGSizeMake(50.0f, 50.0f)];

また、ラベルに利用したり、

UILabel *label = [IonIcons labelWithIcon:icon_ionic size:20.0f color:[UIColor blackColor]];

フォントを得ることもできます。

UIFont* ionIconsFont = [IonIcons fontWithSize:30.0f];

アイコンの調べかた

Ionicons: The premium icon font for Ionic Frameworkやヘッダファイルionicons-codes.hを見てください。

Ioniconsのサイトではアイコンをクリックするとアイコン名が表示されます。

ただし、Ionicons-iOSで利用するアイコン名とはちょっと違うので注意してください (例: ion-trash-a → icon_trash_a)。

導入方法

ここではCocoaPodsを利用してIonicons-iOSを導入します。

  1. Podfileに次のように書きます。

    pod 'ionicons'
    
  2. インストールします。

    $ pod install
    
  3. Info.plistの「Fonts provided by application」に「ionicons.ttf」を追加します。

CocoaPodsを利用しない場合でもフォルダをプロジェクトに追加するだけなので簡単です。

サンプルアプリ

UICollectionViewで一覧表示するだけの簡単なアプリを作成してみました。

アイコンをタップすると名前がタイトルバーに表示されます。

おわりに

Ionicons-iOSの導入と利用方法を簡単に紹介しました。

Ionicons-iOSと同様のものに、FontlAwesome+iOSがあり、こちらはBootstrapでも利用されているFont Awesome IconsをiOSで簡単に利用できるようにしたものです。

アイコンの数ではFontlAwesome+iOSは369個なので少ないのですが、こちらにしかないアイコンもあるみたいなので両方入れておくのもよいかもしれませんね。

関連項目

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。