Maccle

[Obj-C]FacebookやPathライクな左右にスライドするビューのサンプル

約 3 分
[Obj-C]FacebookやPathライクな左右にスライドするビューのサンプル

slideviewcontrollers
最近は、フィードリーダー、ニュースアプリ、Facebookをはじめとするあらゆるソーシャルネットワークアプリなんかでもよく採用されている、左右にスライドするビューのUIが流行りのようです。

そう、レイヤーのようにUIViewが重なっていてフリックしたりオブジェクトをタップすると左右にアニメーションでスライドする アレ です。

iPhone 5 で4インチになって、例えばアプリのメニューを表示するのにスクリーン上部(ナビゲーションバー)のボタンが親指では届きにくくなり、片手でビューをサクサク切り替えるには、やっぱこういうフリック操作だけでページを前後するようにメニューやコンテンツのビューを表示できるUIは便利だなぁ~と。

そう、こんな感じのスライドパネル。
eyeem_

自前で実装しようかと思ったんですが、今の世の中ググれば既にこのスライドビューを実現するためのサンプルプロジェクトがちらほらあったので、メモしときます。

JASidePanels

jaslidepanels
FacebookやPathなどのアプリでは、よくみると四隅が微妙に丸くなっています。

そんな角丸具合も調整して再現できるスライドパネルのサンプル。

スライド式のニュースアプリやソーシャルサービス系のアプリを作りたいなら、このサンプルコードだけでFacebook等の流行りのUIにかなり近い動作を実現できるのでと思います。

動作・前提環境

  • iOS 5以降 / Xcode 4.3以降
  • ARCモード
    ※非ARCモードの場合は、Target -> Build Phases -> Compile Sources の「Compiler Flag」に “-fobjc-arc” を追加

Download JASidePanels from GitHub

ViewDeck

sliderviews
Path風のスライドビューのサンプル。

プロジェクトは、ARCモード、非ARCモードを自動で判別するため、両方のモードに対応しています。

MITライセンス。

機能・特徴

  • 左右、中央のビュー。
  • 中央のビューが表示される際(左右のビューのクローズ時)のバウンス・アニメーション。
  • アニメーション速度の設定。
  • ビューのシャドウ。
  • スライド操作による追随アニメーションとビューの切り替え。

iOS Open Source: Expose Sideviews Similar to Path 2.0

Download ViewDeck from GitHub

類似サンプル

その他、公開されている類似のオープンソースのサンプルコードはこちら。

この記事を書いたひと

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

コメントはこちら

*

COMMENT ON FACEBOOK