Google+ もご覧ください
ユーザーアイコン

モバイル/タブレット向けオープンソース紹介

ScrollMenuBarDemo - SmartNews風のスクロールメニューを実現

ScrollMenuBarDemo - SmartNews風のスクロールメニューを実現

いいUIというのはつい真似したくなるものです。それが特にデザインの良さを売りにしているアプリの場合はそうでしょう。今回はキュレーションニュース配信アプリ、SmartNewsに注目したScrollMenuBarDemoを紹介します。 ScrollMenuBarDemoはSmartNewsアプリのメニューバー部分、タブ風に分かれていてスクロールできる機能に注目しています。それでは見ていきましょう。

ScrollMenuBarDemoのスクリーンショット

トップ
トップ

おお、実にそれっぽいデザインです。タブは最大幅が決められ、それに従って幅が増減する仕組みになっています。

スクロール
スクロール

もちろんスクロール可能です。

タップ
タップ

どのタブをタップしたか補足できます。タブの下の小さいバー部分の色も変わっています。

別タブに切り替え
別タブに切り替え

スムーズな操作で分かりやすいです。

ScrollMenuBarDemoの使い方

使い方としては、まず立ち上げ時にタブを設定します。

-(void)viewDidLoad {
    :
    // メニューバー追加
    NSArray *menus = @[
            @{
                    @"title":@"トップ",
                    @"color":[ScrollMenuBar smartYellow]
            }, @{
                    @"title":@"エンタメ",
                    @"color":[ScrollMenuBar smartGreen]
            }, @{
                    @"title":@"スポーツ",
                    @"color":[ScrollMenuBar smartRed]
            }, @{
                    @"title":@"テクノロジー",
                    @"color":[ScrollMenuBar smartBlue]
            }, @{
                    @"title":@"政治",
                    @"color":[ScrollMenuBar smartOrange]
            }, @{
                    @"title":@"経済",
                    @"color":[ScrollMenuBar smartPurple]
            }, @{
                    @"title":@"設定",
                    @"color":[ScrollMenuBar smartGray]
            },
    ] ;
    ScrollMenuBar *scrollMenuBar = [[ScrollMenuBar alloc] initWithArray:menus
                                                            point:CGPointMake(0, 20)] ;
    scrollMenuBar.delegate = self ;
    [self.view addSubview:scrollMenuBar];

そしてタップされた時のイベントは scrollMenuBar で補足されます。

-(void)scrollMenuBar:(ScrollMenuBar *)scrollMenuBar selected:(NSInteger)selectedIndex {
    NSLog(@"HH") ;
    _label.text = [NSString stringWithFormat:@"index:%d Clicked",selectedIndex] ;
}

とてもシンプルで分かりやすいのではないでしょうか。

ScrollMenuBarDemoはiOS用のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

sekitaka/ScrollMenuBarDemo

Opensource
タグ:

記事をリクエストする

関連記事

コメント