Cocoaの日々情報局

HMDTさんよりiOS/OSX向けXHTMLレンダリングエンジンがオープンソースとして公開された。

紹介記事：iOSアプリ『大辞泉』でも使われている、Sayoriレンダリングエンジンをオープンソースとして公開

Sayoriレンダリングエンジンは、OS XおよびiOSで動作するXHTMLのレンダリングエンジンです。SYLabelというクラスが提供されていて、UILabelと似た使い勝手になっています。リッチテキストのUILabelが使いたい場合や、電子書籍を作りたい場合におすすめです。

Sayoriレンダリングエンジンを採用したアプリとしては、『大辞泉』があります。というか、大辞泉のエンジンをほぼそのまま公開しているのが、Sayoriですね。

使い方はこんな感じ。

// Create SYLabel
SYLabel*    label;
label = [[SYLabel alloc] initWithFrame:self.view.bounds];
label.html = @"
Hello Sayori!";
label.cssString = @"p.class { font-size: 24px; }";
 
// Add label
[self.view addSubview:label];

プロジェクトページは今後充実していくとのこと。概要を知るには下記のページが参考になる。



すばらしい。

This post is archived under GUIライブラリ

表示だけでなく編集もできるようになったとのこと。

紹介ビデオで雰囲気が分かる。すばらしい。

SECoreTextView Demo from kishikawa katsumi on Vimeo.

This post is archived under GUIライブラリ

描画＆アニメーションコードが参考になった。実機で見たが出来もいい。

背景、プログレス、アイコンの３つのレイヤーを作り、それぞれを描きわけている。なるほど。

@property (nonatomic, strong) CAShapeLayer *progressBackgroundLayer;
@property (nonatomic, strong) CAShapeLayer *progressLayer;
@property (nonatomic, strong) CAShapeLayer *iconLayer;

面白いのは✓マークまでUIBazierPathで描いているところ。
描画コード。

- (void) drawTick {
    CGFloat radius = MIN(self.frame.size.width, self.frame.size.height)/2;
    
    /*
     First draw a tick that looks like this:
     
     A---F
     |   |
     |   E-------D
     |           |
     B-----------C
     
     (Remember: (0,0) is top left)
     */
    UIBezierPath *tickPath = [UIBezierPath bezierPath];
    CGFloat tickWidth = radius * kTickWidthRatio;
    [tickPath moveToPoint:CGPointMake(0, 0)];                            // A
    [tickPath addLineToPoint:CGPointMake(0, tickWidth * 2)];             // B
    [tickPath addLineToPoint:CGPointMake(tickWidth * 3, tickWidth * 2)]; // C
    [tickPath addLineToPoint:CGPointMake(tickWidth * 3, tickWidth)];     // D
    [tickPath addLineToPoint:CGPointMake(tickWidth, tickWidth)];         // E
    [tickPath addLineToPoint:CGPointMake(tickWidth, 0)];                 // F
    [tickPath closePath];
      :

上記図形を最後に傾けて✓にしている。面白い。

This post is archived under GUIライブラリ

デモを実行するとテーブルの上にブラーのかかった（ボケた）ダイアログが表示される。テーブルをスクロールするとそれに合わせてボケも変化していく。

今までも同様のライブラリはいくつかあったが、Viewの体裁を取っているので使いやすい。DRNRealTimeBlurViewを作ってぼかしたいビューの上に重ねるだけ。

デモでは順番に addSubView: して行って下記のような階層になっている。

　↑　UIImageView
　↑　DRNRealTimeBlurView
　↑　UITableView
　↑　UIViewController.view

この場合 DRNRealTimeBlurViewより下、この場合 UITableViewの内容が良い感じでボケる。一方、それより上の UIImageViewはボケが適用されない。

This post is archived under GUIライブラリ

ViewController切替時のトランジション・アニメーションを提供するライブラリ。

デモプログラムでひと通りのトランジションが試せる。

使えるトランジションは１５個。

BackFade
Cross
Cube
Fade
Flip
Fold
Ghost
Glue
PushRotate
Scale
Slide
Swap
Swipe
SwipeFade
Zoom

最近のアプリで使われるようなトランジションがひと通り網羅されている。なかなかいい。ドキュメントにはカスタムなトランジションの作り方の解説もある。

This post is archived under GUIライブラリ

アプリのバージョンアップと共に SDKも新バージョンが登場 (1.4.0)。

Google Maps SDK for iOS
目玉の一つはストリートビューへの対応。GMSPanoramaViewを使う。デリゲート GMSPanoramaViewDelegateも用意されていて移動前後やエラーなどのイベントを処理することができる。他に indoor maps, 3D buildingsへの対応など。

日本語の紹介記事も出てた。
1.4.0 登場! Google Maps SDK for iOS
新機能・バグ修正・1.3系からの移行などが紹介されていて参考になる。

This post is archived under GUIライブラリ

>> DKLiveBlur

こんな感じ。

ぼかし画像を作るために Accelerate.framework（vImage）を使用している。

この辺り、使い方も参考になる。
DKLivewBlurView.m

- (UIImage *)blurryImage:(UIImage *)image withBlurLevel:(CGFloat)blur {
　　　：
    vImage_Buffer inBuffer, outBuffer;
    vImage_Error error;
    void *pixelBuffer;
    
    CGDataProviderRef inProvider = CGImageGetDataProvider(img);
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);
    
    inBuffer.width = CGImageGetWidth(img);
    inBuffer.height = CGImageGetHeight(img);
    inBuffer.rowBytes = CGImageGetBytesPerRow(img);
    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);
    
    pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));
　　　：
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL,
                                       0, 0, boxSize, boxSize, NULL,
                                       kvImageEdgeExtend);
　　　：

オリジナル画像をセットしたタイミングで非同期にこれを呼び出してあらかじめぼかし画像を作っておく。

- (void)setOriginalImage:(UIImage *)originalImage {
    _originalImage = originalImage;
    
    self.image = originalImage;
    
    dispatch_queue_t queue = dispatch_queue_create("Blur queue", NULL);
    
    dispatch_async(queue, ^ {
        
        UIImage *blurredImage = [self blurryImage: self.originalImage withBlurLevel: self.initialBlurLevel];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            
            self.backgroundImageView.alpha = 0.0;
            self.backgroundImageView.image = blurredImage;
        });
    });

This post is archived under GUIライブラリ

いわゆる画像のスライドショーを行うライブラリ。画像が拡大縮小しながら動く効果（Ken Burns Effectと呼ばれる）が加えられている。この効果は色々なところで使われているので一度は見たことがあるはず。

動画　※いきなり再生されるので注意


実装は簡単で所定のデータソースプロトコルを実装するだけ。

@interface MyViewController ()  // Conform to the protocol

@end
@implementation MyViewController

- (NSUInteger)animatedImagesNumberOfImages:(JSAnimatedImagesView *)animatedImagesView
{
    return self.myImageNames.count;
}

- (UIImage *)animatedImagesView:(JSAnimatedImagesView *)animatedImagesView imageAtIndex:(NSUInteger)index
{
    return [UIImage imageNamed:[self.myImageNames objectAtIndex:index]];
}
@end

写真の動きの実装は比較的シンプルで、位置と大きさをランダムに変えているだけ。簡単なスライドショーであればサクっと実装できそう。


もう一つ紹介。こちらはライブラリ名にずばり Ken Burnsと入っている。
最初のと比べると中身は結構複雑なことをやっている。デリゲートが用意されていて、画像の切り替わり一枚毎に処理を挟むことができるので何か付加情報を表示させる時に便利。完了時のデリゲートもある。今写真ビューアアプリを作っていて、このライブラリをデータソース化したりデリゲートを増やしたりとカスタマイズして使っている。なかなかいい感じ。

This post is archived under GUIライブラリ

CAKeyframeAnimation のサブクラスとして提供されていて簡単にバウンス効果を与えることができる。

デモを立ち上げると色々な利用パターンが見られる。

オーソドックスな一方向のパターン。青い矩形が上から下へ移動し、終点付近でバウンスする。

下は静止画でわかりにくいが、小さな矩形がアニメーションしながら一定の大きさに拡大される。その最後の大きさに達した前後でバウンス効果（小刻みに拡大縮小）が起きる。なるほど確かにバウンスは移動だけでなく拡大・縮小したの利用も効果的。


アニメーション追加はこんな感じ。

NSString *keyPath = @"position.y";
id finalValue = [NSNumber numberWithFloat:300];
[view.layer setValue:finalValue forKeyPath:keyPath];

SKBounceAnimation *bounceAnimation = [SKBounceAnimation animationWithKeyPath:keyPath];
bounceAnimation.fromValue = [NSNumber numberWithFloat:view.center.x];
bounceAnimation.toValue = finalValue;
bounceAnimation.duration = 0.5f;
bounceAnimation.numberOfBounces = 2;

[view.layer addAnimation:bounceAnimation forKey:@"someKey"];

デモのアニメーションは少しおとなしいので、durationとnumberOfBouncesを増やすと見た目はわかりやすい（それぞれ 2.0, 14にすると一方向のパターンはやや大げさだがはっきりとバウンスがわかるレベル）。

面白いプロパティとしては shouldOvershoot や shake がある。前者は終点を行きすぎてバウンスするかどうかの制御。デフォルトではYESとなっている。これをONにすると壁にぶつかった感じに変わる。

- - -
バウンスアニメーションは iOSの基本ともいえる動きだが、意外にも専用のアニメーションAPIが用意されていない。これは重宝しそう。

This post is archived under GUIライブラリ

紙を折り畳んだり広げたりする効果を見せるGUIライブラリ。@setoh2000さんのツィートで知った。

付属のデモ。


デモを実機で試したがいい感じ。指でドラッグして左右の開閉をコントロールできる。

試験的に垂直方向の折り畳みもある。じゃばらの開閉感がいい感じ。

使い方は PagerFolderViewのインスタンスに左と右に配置するビューを追加し、View controllerへ追加するだけ。

_paperFoldView = [[PaperFoldView alloc] initWithFrame:CGRectMake(0,0,100,[self.view bounds].size.height)];

_leftTableView = [[UITableView alloc] initWithFrame:CGRectMake(0,0,100,[self.view bounds].size.height)];
[_paperFoldView setLeftFoldContentView:_leftTableView foldCount:3 pullFactor:0.9];

_mapView = [[MKMapView alloc] initWithFrame:CGRectMake(0,0,240,[self.view bounds].size.height)];
[_paperFoldView setRightFoldContentView:_mapView foldCount:3 pullFactor:0.9];

[self.view addSubview:_paperFoldView];

This post is archived under GUIライブラリ

サムネイルとラベルを表示できるカスタムアノテーション。以下は付属のデモ。

サムネイルをタップすると吹出しがアニメーションして広がり、ラベルが表示される。

ソースコードに手を入れてサムネイルのサイズを変えてみた。
黒い吹出しはCoreGraphicsで描画していて（newBubbleWithRect:）、拡大縮小も問題なし。それにしてもこうやって簡単に変更できるのがオープンソースのいいところ。

使い方。

JPSThumbnail *thumbnail = [[JPSThumbnail alloc] init];
thumbnail.image = [UIImage imageNamed:@"empire.jpg"];
thumbnail.title = @"Empire State Building";
thumbnail.subtitle = @"NYC Landmark";
thumbnail.coordinate = CLLocationCoordinate2DMake(40.75, -73.99);
thumbnail.disclosureBlock = ^{ NSLog(@"selected Empire"); };

JPSThumbnailAnnotation *annotation = [[JPSThumbnailAnnotation alloc] initWithThumbnail:thumbnail];

[mapView addAnnotation:annotation];

モデル JPSThumbnailを作りこれをカスタムアノテーション JPSThumbnailAnnotationに入れてマップへ追加する。ボタンを押した時の処理はblocksで定義しておける。

オーソドックスなGUIだが悪くない。デザインはソースを修正すれば自分で微調整できるし、今度使おうか検討中。

This post is archived under GUIライブラリ

真似て作った実装が早速出てた。なるほどこんな感じかー

サンプルを立ち上げると人の顔が上部に表示される。

これをタップすると顔が中心へつつーっと移動して、下にペロッとビューが開く。

顔アイコンはドラッグして移動できて、左右の端にスナップされる。


移動はバウンスするようになっていて細かい配慮あり。

このバウンスは２段階のアニメーションで実現されている。
CHDraggableView.m

- (void)_snapViewCenterToPoint:(CGPoint)point edge:(CGRectEdge)edge
{
  :
    [UIView animateWithDuration:0.28f delay:0.0f options:UIViewAnimationOptionCurveEaseInOut animations:^{
        self.center = CGPointIntegral(step1);
    } completion:^(BOOL finished){
        if (finished) {
            [UIView animateWithDuration:0.25f delay:0.0f options:UIViewAnimationOptionCurveEaseInOut animations:^{
                self.center = CGPointIntegral(step2);
            } completion:^(BOOL finished){}];
        }
    }];
}

あらかじめ方向を計算しておき、最初のアニメーションで目的位置を行きすぎて、２番目のアニメーションで目的位置に戻すことを行っている。単純だが悪くない。

This post is archived under GUIライブラリ

画面上部に出てくる帯状の通知を表示するライブラリ。

シンプルだが色合いやレイアウトが個人的に好き。ちなみにナビゲーションバーはライブラリとは関係無いので注意。

あらかじめエラーや警告などのタイプが定義されていて、それぞれ毎に色やアイコンが変わる。

typedef enum {
    kNotificationMessage = 0,
    kNotificationWarning,
    kNotificationError,
    kNotificationSuccessful
} notificationType;

表示後しばらくすると自動的に消える。メッセージを連続で登録すると内部でキューイングされ、順番に表示されていく。こういう細かやかな配慮はありがたい。


ライセンスはBSD

（参考情報）

使い方などが参考になる。

This post is archived under GUIライブラリ