その後のその後

iOSエンジニア 堤 修一のブログ github.com/shu223

Cocoa Controls で見つけたティッカー4種を比較してみました

ティッカーというのは、(本当の定義はわかりませんが)文字が流れるアレです。


文字を横方向に流すアニメーションをするだけのことですが、たとえばパズドラのティッカーを見てると、表示開始時は右から一気に左端まで移動させ、そのあとゆっくり左方向に流す、ということをやっていて、ティッカーと一口にいっても色々と表現方法がありそうです。


この辺り、いちいちつくるのは面倒なので、使い回しやすい感じで誰か作ってくれてそうだと思い、Cocoa Controls で検索してみました。


そんなわけで見つけたティッカーOSS 4つを比較してみました。


CLTickerView

シンプルなデモが入っています。



CLTickerView.hを見てみると、

@property (nonatomic, retain) CLScrollview *scrollview;
@property (nonatomic, retain) NSString *marqueeStr;
@property (nonatomic, retain) UIFont *marqueeFont;

- (CGSize)labelSizeForText:(NSString *)text forFont:(UIFont *)font;

APIはこれだけ。


で、デモのソースを見てみると、

CLTickerView *ticker = [[CLTickerView alloc] initWithFrame:CGRectMake(0, 20, 320, 30)];
ticker.marqueeStr = @"This is a sample ios marquee using scrollview and timer. You can also manually control it by scroling left or right, or touch on it to stop it, and release it to auto restart the marquee.";
ticker.marqueeFont = [UIFont boldSystemFontOfSize:16];

[self.view addSubview:ticker];
[ticker release];

ティッカーに対してやっていることはこれだけ。
アニメーションをスタートさせるとか、開始地点とかは自動のようです。(CLTickerView.m を見ると、drawRect でアニメーション開始してました)


https://github.com/caydenliew/CLTickerView


JHTickerView

アニメーション開始と停止ボタンのあるデモが入っています。



ヘッダをみると

@property(nonatomic, retain) NSArray *tickerStrings;
@property(nonatomic) float tickerSpeed;
@property(nonatomic) BOOL loops;
@property(nonatomic) JHTickerDirection direction;

-(void)start;
-(void)pause;
-(void)resume;

とあって、開始、停止、再開の他、方向を変えたり、スピードを調整したり、複数の表示文字列を配列で指定したりできるようです。


https://github.com/jeffhodnett/JHTickerView


MKTickerView

株式市場情報が流れるデモ。



MKTickerView の API は

@property (nonatomic, assign) IBOutlet id <MKTickerViewDataSource> dataSource;

-(void) reloadData;
-(void) startAnimation;

このようにデータソースを指定する仕組みになっていて、
MKTickerViewDataSource の定義は、

|@protocol MKTickerViewDataSource <NSObject>
@required
- (UIColor*) backgroundColorForTickerView:(MKTickerView*) tickerView;
- (int) numberOfItemsForTickerView:(MKTickerView*) tickerView;

- (NSString*) tickerView:(MKTickerView*) tickerView titleForItemAtIndex:(NSUInteger) index;
- (NSString*) tickerView:(MKTickerView*) tickerView valueForItemAtIndex:(NSUInteger) index;
- (UIImage*) tickerView:(MKTickerView*) tickerView imageForItemAtIndex:(NSUInteger) index;
@end
|<
こんな感じになってます。


ひとつひとつの表示アイテムは MKTickerItemView オブジェクトになっていて、<span class="deco" style="font-weight:bold;">タイトル、詳細、画像を指定</span>できます。
>|objc|
@interface MKTickerItemView : UIView {
  
  NSString *_title;
  NSString *_value;
  UIImage *_image;
}

- (void) setTitle:(NSString *) title value:(NSString*) value image:(UIImage*) image;


https://github.com/MugunthKumar/MKTickerViewDemo


DMScrollingTicker

タイトル、詳細が流れ、ポーズとレジュームボタンがあるデモが入っています。



ヘッダは長いので一部だけ紹介すると、

- (void) beginAnimationWithLazyViews:(LPScrollingTickerLazyLoadingHandler) dataSource
                          itemsSizes:(NSArray *) subviewsSizes
                           direction:(LPScrollingDirection) scrollDirection
                               speed:(CGFloat) scrollSpeed
                               loops:(NSUInteger) loops
                        completition:(LPScrollingTickerAnimationCompletition) completition;

このように UIView の blocks アニメーション形式で諸々のパラメータや終了後の処理を指定できたり、

- (void) scrollToOffset:(CGPoint) offsetPoint animate:(BOOL) animated;
- (void) scrollToStart:(BOOL) animated;

このようにオフセットを操作するAPIもあったりして、なかなか使い勝手と自由度のバランスが良さげです。


https://github.com/malcommac/DMScrollingTicker


まとめ

用途にもよると思いますが、導入の簡単さと、汎用性のバランスが良いのは DMScrollingTicker かなと感じました。
それか、もっとシンプルでよければ、JHTickerView か。


CLTickerView はできることが少なすぎ、MKTickerView はDataSourceプロトコルの実装が面倒、と感じました。


今回はデモを動かしてざっとヘッダを眺めただけの比較なので、実際に使ってみると実装が怪しかったりとかあるかもしれません。