ニュース系アプリで利用されているUIの実装を調べることがあったのでまとめてみた
みぃむ( id:ml_myme )ですこんばんわ！！
そういえば最近めっきりおそ松さんにハマっています。
さて、メモっていたニュース系アプリのスクロールを実現するライブラリやサンプルを検索することがあり、ブックマークが溜まっていたのでせっかくなのでまとめてみました。
ライブラリ紹介とサンプルや実装について記載されている記事を厳選してお届けします・ω・♪
ニュース系アプリのUIとは
上部に画面切り替え用のタブがあり、そのタブがスクロールして複数のViewが表示されるUIのことです。
下記３つ例にあげてみます！
ニュース系アプリだとニュースがカテゴリ別に分かれていて、かつ、スクロールができることからデフォルトのタブよりも多くのカテゴリが追加できるのでもってこいのUIです。
横スクロールで簡単に切り替えられるのも魅力的です。
簡単実装ライブラリたち
YSLContainerViewController
Objective-Cでの実装。実はちょっとつながりのある方が作ったライブラリなので一番に紹介させていただきます。
機能がたくさんあるわけではないですが、最低限のシンプルなつくりで、コード量が少なく、組み込み・カスタマイズしやすいのが特徴です。
最近改修がないですが、ご本人曰く、スターが増えたら頑張る、とのことですｗ
日本語でのプルリクも待っているそうですｗ
RMPScrollingMenuBarController
Objective-Cでの実装。サンプルコードはObjective-C,Swift共に用意されており、READMEも丁寧に記載されているので導入が簡単なのがこちらです。
設定用のプロパティも豊富に用意されているので、ちょっとしたカスタマイズはプロパティをいじるだけで簡単に自分ナイズに設定できます。
個人的にスワイプ時のアニメーションが少し不自然な気もします(※動作事態はサンプルしか見てません)
PageMenu
Objective-C,Swiftでの実装。こちらは出来上がりが完璧なのでそのまま使うにはいいですが、すこしカスタマイズするには難しい印象です。
記事を書いた時点で更新が少し古く、最新のXcodeだと少し手直しが必要です。
PagingMenuController
Swiftでの実装。フルSwiftで書かれており、Swiftプロジェクトには重宝するかも。
タブ部分の長さがタブによって可変になっているところもポイントです。
直近でも更新されているので、これから利用するには良さそうです。
UI実現のための実装に関する記事
メディア系アプリでよくあるUIを実現した簡易サンプル
qiita.com
こちらは考え方を図で一緒に説明してくださっているため、自分で実装する場合、方法はいろいろありますが、考え方の１つとしてとてもわかりやすい記事でした。
ありがとうございます。
swift初心者がSmartNews風ニュースアプリを作ってみる過程を晒す
qiita.com
こちらは連載記事になっており、Swiftで制作される過程を細かく記載してくださっています。
まだ私はSwiftを利用しはじめたばかりで、Swiftで作成するにあたって参考になった記事や、読んでおきたいもの等も一緒に記載してくださっているため、そのままSwiftの勉強にもなります。ありがとうございます。
TitaniumであのGunosy風UIを作ってみた
cheekit.com
Titaniumは利用していないのですが、利用している方にはとても貴重な記事だと思います。
公開してくださっているソースコードもあります。
【ニュースアプリ/リーダー】tableView/ScrollView上に浮いているUIButtonを実装する 【Gunosy風】
tjnet555.hatenablog.com
こちらは実際に作成されたコードも後悔してくださっているのでとても参考になりました。
まとめ
はじめに紹介したYSLContainerViewControllerがコードが少なくシンプルで、製作者を知っているため利用しています。
解説記事は根本的な考え方は共通するところですが、それぞれいろいろな実装方法があるので、自分で作成するには他の記事やライブラリの実装方法等さらっと見ておくといいかなと思います。
なんにしろ、ライブラリは全てをライブラリに依存するのではなく、自分でもある程度ソースコードを読んだり、どのように実装されているかは確認すべきです。
と、思っています。
