Tag Archives: OSA2013

[OSA2013] AwesomeMenu – Path風のメニュー

1
Filed under オープンソースライブラリ
Tagged as , , ,

OSS Sampler Advent Calendar 2013
「OSS Sampler AdventCalender 2013」 21日目は、「AwesomeMenu」です。

AwesomeMenu

SNS「Path」のアプリは結構斬新なインターフェイスを実装していることで有名です。その中でも面白いのがメインストーリー画面下にあるメニューボタン。これと同じような仕組みを実現するライブラリがAwesomeMenuです。
levey/AwesomeMenu – github
OSS Sampler - AwesomeMenu
MITライセンスです。

結構使いやすい設計

アニメーションが派手で面白いのですが、実装自体も割としっかり作られていますので、設定の手順を追いかけてみます。
各メニュー項目はAwesomeMenuItemクラスのインスタンスとして生成します。

1
2
3
4
5
6
// メニュー1を生成.
AwesomeMenuItem *starMenuItem1 =
[[AwesomeMenuItem alloc] initWithImage:storyMenuItemImage
                      highlightedImage:storyMenuItemImagePressed
                          ContentImage:starImage
               highlightedContentImage:nil];

上記のコードを見ると画像ベースで作られているのがわかると思います。
最初の画像、2つ目の画像は、ボタンの背景部分です。
後半の2つのContentImageはボタンの中身の画像となります。デモで言うと★の部分です。
それぞれをボタン押下時の表示切り替えも用意するわけで、デザインしやすいですね。
そして、このボタンを必要な数だけ作って、まとめるのが AwesomeMneuクラスです。
基準となるボタンもAwesomeMenuItemを使って作成し、そこに飛び出すボタンを配列で渡す、というイメージです。

1
2
3
4
AwesomeMenu *menu = [[AwesomeMenu alloc] initWithFrame:self.window.bounds
  startItem:startItem
  optionMenus:[NSArray arrayWithObjects:starMenuItem1, starMenuItem2]];
menu.delegate = self;

アニメーションの動きについても、いろいろなパラメータが用意されているので、調整は簡単です。

1
2
3
4
5
6
7
8
9
10
@property (nonatomic, assign) CGFloat nearRadius;
@property (nonatomic, assign) CGFloat endRadius;
@property (nonatomic, assign) CGFloat farRadius;
@property (nonatomic, assign) CGPoint startPoint;
@property (nonatomic, assign) CGFloat timeOffset;
@property (nonatomic, assign) CGFloat rotateAngle;
@property (nonatomic, assign) CGFloat menuWholeAngle;
@property (nonatomic, assign) CGFloat expandRotation;
@property (nonatomic, assign) CGFloat closeRotation;
@property (nonatomic, assign) CGFloat animationDuration;

UI的にも優れているメニューですので、気に留めておくと、アプリ設計に役立ちそうです。

badge_AppStore – OSS Sampler – iOSオープンソースライブラリ集
(今回紹介したAwesomeMenuの動作も確認できます)


[OSA2013] BMXSwitch – 画像でデザインできるスイッチ

0
Filed under オープンソースライブラリ
Tagged as , , ,

OSS Sampler Advent Calendar 2013
「OSS Sampler AdventCalender 2013」 20日目は、「BMXSwitch」です。

BMXSwitch

昨日の2つとはまた違うUISwitch互換のオープンソースライブラリです。
mbigatti/BMXSwitch – github
OSS Sampler - BMXSwitch
MITライセンスです。

最も便利かもしれないスイッチ

最大の特徴は「画像でデザイン出来る」ということ。
GitHubに上がっている説明画像が分かりやすいので見てください。
BMXSwitch diagram
私もプログラマ的視点からは、パラメータで見た目を設定できるようコードで描画している仕組みが良いとは思うのですが、一方、世の中のデザインを全て網羅できるわけでもないのも事実。
優れたデザイナーと言うのは必ずプログラマの予測を超えたデザインを出してきます。
それをじっくり実装できる(資金的な)体力があれば問題ないのですが、大抵そこまで時間(コスト)を割くことは出来ません。
そういうときこそ、全てが画像の組み合わせで出来ているこのスイッチライブラリの出番です。
画像レイヤーの仕組みを渡して、そのとおりに画像を切り出してもらえれば問題解決なのです!

badge_AppStore – OSS Sampler – iOSオープンソースライブラリ集
(今回紹介したBMXSwitchの動作も確認できます)


[OSA2013] NKColorSwitch vs SevenSwitch – iOS7にフィットするスイッチ

0
Filed under オープンソースライブラリ
Tagged as , , , ,

OSS Sampler Advent Calendar 2013
「OSS Sampler AdventCalender 2013」 19日目は、「NKColorSwitch」「SevenSwitch」です。

iOS 7ライクなUISwitch

新しいアプリのみならず、iOSの新バージョンで新しいUIが出てきたら、それを我先にと誰かが実装をやってみるのがオープンソースコミュニティ。
iOS 7になってデザインがガラッと変わってフラットに合わせたUISwitch互換のクラスがいくつか出てきました。
今回はOSS Samplerで収録しているスイッチライブラリのうち、似ている2つ、NKColorSwitchとSevenSwitchを比べてみました

NKColorSwitch

まずはNKColorSwitch。
naokosaka/NKColorSwitch – github
OSS Sampler - NKColorSwitch
MITライセンスです。
どういう機能が入っているかは、ヘッダーを見てみましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
typedef enum {
    kNKColorSwitchShapeOval,
    kNKColorSwitchShapeRectangle,
    kNKColorSwitchShapeRectangleNoCorner
} NKColorSwitchShape;
 
@interface NKColorSwitch : UIControl <UIGestureRecognizerDelegate>
 
@property (nonatomic, getter = isOn) BOOL on;
 
@property (nonatomic, assign) NKColorSwitchShape shape;
 
@property (nonatomic, strong) UIColor *onTintColor;
 
@property (nonatomic, strong) UIColor *tintColor;
 
@property (nonatomic, strong) UIColor *thumbTintColor;
 
@property (nonatomic, assign) BOOL shadow;
 
@property (nonatomic, strong) UIColor *tintBorderColor;
 
@property (nonatomic, strong) UIColor *onTintBorderColor;

ポイントは3つ。

  • シェイプを3種類選べる(丸、角丸、四角)
  • ON時のボーダーカラーを指定できる
  • つまみをゆっくり動かすとキチンと追随する

3つめの「追随する」というのは、「ゆっくり動かしてやっぱりキャンセル」というときに戻せる、ということです。
こういうのを自分で細かく実装しようとするとなかなか大変です。
オリジナルのフラットデザインなUISwitchを実装するには申し分なさそうです。
(上記スクリーンショットは現在のOSS Sampler 1.6より分かりやすくしたものです。)

SevenSwitch

続いてSevenSwitch
bvogelzang/SevenSwitch – github
OSS Sampler - SevenSwitch
MITライセンスです。
こちらもヘッダーを見てみましょう。(充実しているコメントは削除しました)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@interface SevenSwitch : UIControl
 
@property (nonatomic, assign) BOOL on;
 
@property (nonatomic, strong) UIColor *inactiveColor;
@property (nonatomic, strong) UIColor *activeColor;
 
@property (nonatomic, strong) UIColor *onColor;
 
@property (nonatomic, strong) UIColor *borderColor;
 
@property (nonatomic, strong) UIColor *knobColor;
 
@property (nonatomic, strong) UIColor *shadowColor;
 
@property (nonatomic, assign) BOOL isRounded;
 
@property (nonatomic, strong) UIImage *onImage;
@property (nonatomic, strong) UIImage *offImage;
 
- (void)setOn:(BOOL)on animated:(BOOL)animated;
- (BOOL)isOn;

こちらのポイントも3つ。

  • 形状は丸と四角の2種類
  • ON/OFFそれぞれに画像を指定できる
  • つまみを押している間プニュっと大きくなる

3つめはさわってみると分かるのですが、つまみを動かそうと触ると、ちょっとだけ大きくなるのです。その感じが気持ち良いのが最大の特徴ですね。

結局どっち?

  • ON/OFFに画像を指定したいなら、SevenSwitch
  • 触った気持よさを演出したいなら、SevenSwitch
  • 指への追随をキチンとしたいなら、NKColorSwitch
  • ボーダーの色を指定したいなら、NKColorSwitch

と、書いてみましたが、まぁ、両方を見比べつつ、ベースを選び、あとは使いやすくカスタマイズしておくのがベストかもしれません。オープンソースならそれが可能ですから!

badge_AppStore – OSS Sampler – iOSオープンソースライブラリ集
(今回紹介したNKColorSwitch、SevenSwitchの動作も確認できます)


[OSA2013] JASidePanels – 横のサブ画面表示

0
Filed under オープンソースライブラリ
Tagged as , , ,

OSS Sampler Advent Calendar 2013
「OSS Sampler AdventCalender 2013」 18日目は、「JASidePanels」です。

JASidePanels

JASidePanelsは、画面を横にスワイプしたりして出てくる画面の仕組みです。
gotosleep/JASidePanels – github
OSS Sampler - JASidePanels
タブの切り替えは良いのですが、画面サイズが大きくなってきた4inchのiPhoneですと、上とか下が操作しにくいことがあります。そういうときに便利なのが左右にフリックしてメニューを出したりするこの方式です。
MITライセンスです。

実装の内幕

JASidePanelsの仕組みは、3つのUIViewControllerを切り替える仕組みになっていて、次のようなプロパティを持っています。

1
2
3
4
5
6
7
@interface JASidePanelController : UIViewController
<UIGestureRecognizerDelegate>
 
// set the panels
@property (nonatomic, strong) UIViewController *leftPanel;   // optional
@property (nonatomic, strong) UIViewController *centerPanel; // required
@property (nonatomic, strong) UIViewController *rightPanel;  // optional

各UIViewControllerから別のUIViewControllerを操作する場合、例えば左のパネルから真ん中のパネルの操作をする場合なども考慮されていて、その機能はUIViewControllerのカテゴリとして実装されています。

1
2
3
4
5
6
@interface UIViewController (JASidePanel)
 
// The nearest ancestor in the view controller hierarchy that is a side panel controller.
@property (nonatomic, weak, readonly) JASidePanelController *sidePanelController;
 
@end

iOS 7では左端から右側にスワイプするとUINavigationControllerで戻ってしまうこともありますので、若干注意してUI設計する必要がありますが、自分でゼロから実装するのは大変ですので、覚えておいて損はないライブラリです。

badge_AppStore – OSS Sampler – iOSオープンソースライブラリ集
(今回紹介したJASidePanelsの動作も確認できます)