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

1. チュートリアルを
リッチにしよう
2016/2/17
potatotips #26
@sakebook
https://github.com/sakebook
http://sakebook.hatenablog.com/

2. 自己紹介
• 酒本伸也 @sakebook
• Android Developer
• 初級ライフロガー
• JX通信社
• NewsDigest
• 少しのSwift

3. 目次
• ViewPager
• インジケータをつける
• 背景をグラデーションさせる
• 視差をつける
• デモ

4. ViewPager

5. スワイプできるやつ
• ListViewと同じくAdapterでつなぐ
• Viewの再利用
• フォーカスが当たっているものと
1つのViewを保持

6. 20 1 3 4
{
FragmentPagerAdapter#getCount = 5
ViewPager#getCurrentItem = 1
・ViewPagerは1以外に、0と2を保持している。
・保持の範囲外となったものは破棄され、
範囲内になった時に再生成される。

7. インジケータをつける

8. インジケータ
• チュートリアルの進 を可視化
• Nページだから見ようと思わせる
• ViewPagerの動きと連動させたい

9. 10

10. 20 1

11. ViewPager#OnPageChangeListenerを
実装する。
• onPageScrolled(int position, float positionOffset, int
positionOffsetPixels)
• スクロール中に何度も呼ばれる
• onPageSelected(int position)
• 別のViewへフォーカスが移った時に呼ばれる
• onPageScrollStateChanged(int state)
• スクロールの状態が変わった時()に呼ばれる
• スクロール始め、スクロール中、View確定時

12. onPageScrolled(int position, float
positionOffset, int positionOffsetPixels)
• position
• 現在左端に見えているViewのページ番号
• positionOffset
• 現在左端に見えているViewの、横幅の表示され具合
• 0 <= positionOffset < 1
• positionOffsetPixels
• 現在左端に見えているViewの、横幅の表示され具合
• 0 <= positionOffsetPixels < view.getWidth()

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. onPageScrolledで
次のメソッドを作り呼び出す
• スライドの都合上先に説明
• private void indicatorTransform(int position,
float positionOffset)
• 5枚のViewのViewPagerで、インジケーターの大
きさを1 2倍へ変形

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. 背景を
グラデーションさせる

17. 背景をグラデーション
• シームレスな画面遷移
• 動きのあるものに注目させられる
• 真っ白でなく、質素でない

18. 10

19. 01

20. 1

21. ArgbEvaluatorを使う
• public Object evaluate(float fraction, Object startValue, Object endValue)
• 2色間の色を返す
• ObjectをIntegerにキャストして扱う
• fraction
• 0 <= fraction < 1
• startValue
• 始まりの色
• endValue
• 終わりの色

22. • startValue = Color.RED
• endValue = Color.BLUE
fraction0 1
0.25 0.5 0.75
※スライド上の色は厳密な色と違う

23. onPageScrolledで色を計算
• スライドの都合上先に説明
• fraction == positionOffsetとみなす
• スクロールと共に色を計算し、設定する。
• 3枚のViewのViewPagerで、赤 青, 青 緑とグラデーショ
ン
• 0 -> 赤、1 -> 青、2 -> 緑
• OutOfBoundsを防ぐために一つ多く色を用意

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. 視差をつける

26. 視差
• = Parallax
• かっこいい
• 見せ方に幅が出る
• じっくり見られる

27. 0 1 10 1 1
視差あり 視差なし

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. 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. 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. transformPageで
視差を生み出す
• スライドの都合上先に説明
• position < -1, position > 1 は画面に表示されていないView
• -1 <= position < =0 は画面左側に表示されているView
• 0 < position < =1 は画面右側に表示されているView
• FragmentでViewHolderを生成し、Tagとして設定
• setTranslationXでスワイプの動きとずらす
• transitionは自作ViewHolderのメソッド

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. デモ

34. 手段でしかない
• チュートリアルをリッチにするのは、ユーザにアプ
リを理解してもらうための手段。
• 手段を用いて、アプリを理解してもらえるようにす
るのが大切。
• 手段にとらわれて、かっこいいけど意味不明はダメ。

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