Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

チュートリアルをリッチにしよう

1,878 views

Published on

potatotips #26 で話した内容です。

Published in: Technology
  • Be the first to comment

チュートリアルをリッチにしよう

  1. 1. チュートリアルを リッチにしよう 2016/2/17 potatotips #26 @sakebook https://github.com/sakebook http://sakebook.hatenablog.com/
  2. 2. 自己紹介 • 酒本伸也 @sakebook • Android Developer • 初級ライフロガー • JX通信社 • NewsDigest • 少しのSwift
  3. 3. 目次 • ViewPager • インジケータをつける • 背景をグラデーションさせる • 視差をつける • デモ
  4. 4. ViewPager
  5. 5. スワイプできるやつ • ListViewと同じくAdapterでつなぐ • Viewの再利用 • フォーカスが当たっているものと
 1つのViewを保持
  6. 6. 20 1 3 4 { FragmentPagerAdapter#getCount = 5 ViewPager#getCurrentItem = 1 ・ViewPagerは1以外に、0と2を保持している。 ・保持の範囲外となったものは破棄され、 範囲内になった時に再生成される。
  7. 7. インジケータをつける
  8. 8. インジケータ • チュートリアルの進 を可視化 • Nページだから見ようと思わせる • ViewPagerの動きと連動させたい
  9. 9. 10
  10. 10. 20 1
  11. 11. ViewPager#OnPageChangeListenerを 実装する。 • onPageScrolled(int position, float positionOffset, int positionOffsetPixels) • スクロール中に何度も呼ばれる • onPageSelected(int position) • 別のViewへフォーカスが移った時に呼ばれる • onPageScrollStateChanged(int state) • スクロールの状態が変わった時()に呼ばれる • スクロール始め、スクロール中、View確定時
  12. 12. onPageScrolled(int position, float positionOffset, int positionOffsetPixels) • position • 現在左端に見えているViewのページ番号 • positionOffset • 現在左端に見えているViewの、横幅の表示され具合 • 0 <= positionOffset < 1 • positionOffsetPixels • 現在左端に見えているViewの、横幅の表示され具合 • 0 <= positionOffsetPixels < view.getWidth()
  13. 13. 2 1080 0 110 • position = 0 • positionOffset = 0.66 • positionOffsetPixels = 720 0 1080 21 1 2 • position = 1 • positionOffset = 0.33 • positionOffsetPixels = 360 0.66 0.33
  14. 14. onPageScrolledで 次のメソッドを作り呼び出す • スライドの都合上先に説明 • private void indicatorTransform(int position, float positionOffset) • 5枚のViewのViewPagerで、インジケーターの大 きさを1 2倍へ変形
  15. 15. private void indicatorTransform(int position, float positionOffset) { switch (position) { case 0: indicator1.setScaleX(2 - positionOffset); indicator1.setScaleY(2 - positionOffset); indicator2.setScaleX(1 + positionOffset); indicator2.setScaleY(1 + positionOffset); break; ... case 3: indicator4.setScaleX(2 - positionOffset); indicator4.setScaleY(2 - positionOffset); indicator5.setScaleX(1 + positionOffset); indicator5.setScaleY(1 + positionOffset); break; case 4: indicator5.setScaleX(2 - positionOffset); indicator5.setScaleY(2 - positionOffset); break; } }
  16. 16. 背景を グラデーションさせる
  17. 17. 背景をグラデーション • シームレスな画面遷移 • 動きのあるものに注目させられる • 真っ白でなく、質素でない
  18. 18. 10
  19. 19. 01
  20. 20. 1
  21. 21. ArgbEvaluatorを使う • public Object evaluate(float fraction, Object startValue, Object endValue) • 2色間の色を返す • ObjectをIntegerにキャストして扱う • fraction • 0 <= fraction < 1 • startValue • 始まりの色 • endValue • 終わりの色
  22. 22. • startValue = Color.RED • endValue = Color.BLUE fraction0 1 0.25 0.5 0.75 ※スライド上の色は厳密な色と違う
  23. 23. onPageScrolledで色を計算 • スライドの都合上先に説明 • fraction == positionOffsetとみなす • スクロールと共に色を計算し、設定する。 • 3枚のViewのViewPagerで、赤 青, 青 緑とグラデーショ ン • 0 -> 赤、1 -> 青、2 -> 緑 • OutOfBoundsを防ぐために一つ多く色を用意
  24. 24. // メンバ変数 private ArgbEvaluator argbEvaluator = new ArgbEvaluator(); private Integer[] colors; // どこかで初期化 private void initColor() { this.colors = new Integer[]{ Color.RED, Color.BLUE, Color.GREEN, Color.BLUE, // for end evaluate }; } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { viewPager.setBackgroundColor((Integer) argbEvaluator.evaluate(positionOffset, colors[position], colors[position + 1])); }
  25. 25. 視差をつける
  26. 26. 視差 • = Parallax • かっこいい • 見せ方に幅が出る • じっくり見られる
  27. 27. 0 1 10 1 1 視差あり 視差なし
  28. 28. ViewPager#PageTransformerを 実装する。 • 実装したクラスをセットする • ViewPager#setPagetransformer(false, 実装したクラス) • transformPage(View page, float position) • ViewPagerが保持しているViewの数だけ、スクロール中に何度も呼ばれる • ViewPager#setOffscreenPageLimit(int limit) • ViewPagerが保持するViewの数を設定できる。 • デフォルトのlimitは1 • Viewの数は 1 + (limit * 2) = 3
  29. 29. transformPage(View page, float position) • page • ViewPagerが保持しているView。tagやidで識別する。 • idはViewのルートのidが返る • position • 画面に表示されている左端を0とし、一画面分を1とみた時の、
 ViewPagerが保持しているViewの左端までの距離 • -(n + 1) / 2 <= position <= (n + 1) / 2 • nは奇数 • デフォルトのnは3
  30. 30. 0 110 • 2度呼ばれる • page = 0 • position = -0.66 • page = 1 • position = 0.33 1 0 32 2 3 • 3度呼ばれる • page = 1 • position = -1.33 • page = 2 • position = -0.33 • page = 3 • position = 0.660.33 0 1 0.66 1
  31. 31. transformPageで 視差を生み出す • スライドの都合上先に説明 • position < -1, position > 1 は画面に表示されていないView • -1 <= position < =0 は画面左側に表示されているView • 0 < position < =1 は画面右側に表示されているView • FragmentでViewHolderを生成し、Tagとして設定 • setTranslationXでスワイプの動きとずらす • transitionは自作ViewHolderのメソッド
  32. 32. @Override public void transformPage(View page, float position) { if (position <= -1) { // [-Infinity,-1) // This page is way off-screen to the left. } else if (position <= 1) { ((ViewHolder)page.getTag()).transition(page, position); } else { // (1,+Infinity] // This page is way off-screen to the right. } } @Override public void transition(View page, float position) { if (-1 < position && position < 0) { // left leftIcon.setTranslationX(position * page.getWidth() * 2); rightIcon.setTranslationX(-position * page.getWidth() / 4); } else if (0 <= position && position <= 1) { // right leftIcon.setTranslationX(position * page.getWidth() * 2); rightIcon.setTranslationX(position * page.getWidth()); } centerIcon.setTranslationX(-position * page.getWidth()); }
  33. 33. デモ
  34. 34. 手段でしかない • チュートリアルをリッチにするのは、ユーザにアプ リを理解してもらうための手段。 • 手段を用いて、アプリを理解してもらえるようにす るのが大切。 • 手段にとらわれて、かっこいいけど意味不明はダメ。
  35. 35. 以上 参考 http://qiita.com/ksoichiro/items/6a2ae3877bccf1c75860 https://developer.android.com/intl/ja/training/animation/screen-slide.html サンプルコード https://github.com/sakebook/android-sample-Tutorial

×