ITエンジニア/デザイナ向けにオープンソースを毎日紹介

優れたUIを真似るのは、そこにある知識や試行錯誤を得るのに最適です。単に上辺だけを見るのではなく、なぜそのようなUIになっていて、なぜ優れていると感じるのかをコードをもって体感できます。

特にそれはスマートフォンアプリにおいて有効です。UI/UXが重視されるだけに優れたデザインを真似してみると面白い知見が得られることでしょう。今回はその一つ、HeaderViewPagerScrollViewを紹介します。

HeaderViewPagerScrollViewの使い方

HeaderViewPagerScrollViewはGoogle Play Newsstandアプリを模したデモアプリとなっています。

最初の表示です。ここからスクロールします。
最初の表示です。ここからスクロールします。

ヘッダーアイコンが小さくなっています。
ヘッダーアイコンが小さくなっています。

これが上に上がりきった状態です。
これが上に上がりきった状態です。

ヘッダーにあるラベルをタップすると左右にスクロールしてコンテンツが切り替わります。
ヘッダーにあるラベルをタップすると左右にスクロールしてコンテンツが切り替わります。

HeaderViewPagerScrollViewはスムーズな操作で縦へのスクロールに加えて、カテゴリが並んだヘッダー部からコンテンツを切り替えることができます。小さなデバイスで多くの情報を載せるのに最適なUIと言えそうです。

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

HeaderViewPagerScrollView - Android Apps on Google Play

naman14/PlayNewsStandDemo

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2