Coordinator Layout Behavior

kyobashi.dex #2の資料です。(Android向け)

1. Coordinator Layout Behavior
kyobashi.dex #2

2. 自己紹介
釘宮 愼之介 / @kgmyshin
・ Androidエンジニア
・ Androidエンジニア

3. 今回お話すること
CoordinatorLayoutのBehaviorについて
本当はCoordinatorLayoutについて隅から隅まで話そうと思ったけど
時間がなさそうだったので、 今回はBehaviorに焦点を当てます。

4. この発表で達成したいこと
聴いてくれた方が、聴き終わったあとに
Behaviorの仕組みを理解し、
右のようなカスタム Behaviorを
作れるようになっている 状態にすること。

5. 目次
・CoordinatorLayoutとは
・Behaviorとは
・Behaviorの仕組み
・すでにある Behaviorたち
・カスタムBehaviorを作ってみる

6. CoordinatorLayoutとは
CoordinatorLayoutというのは子ビュー同士が
相互に動くようなインタラクションをする 場合に使われるViewGroupです。
とくにMaterial Designガイドラインの Scrolling techniquesを実現するときに使う印象。

8. Behaviorとは
CoordinatorLayoutの子ビューの動きのプラグインです。

9. だいたいがこの 二つのメソッドを Overrideして使っているみたい
•layoutDependsOn
•onDependentViewChanged

10. Behaviorの仕組み(簡易版)

11. これ以外にも
TouchEventやScrollのイベントが 取れたりもする
~onNestedFling
~onNestedPreFling
~onNestedPreScroll
~onNestedScroll
~onTouchEvent

12. 実際のBehaviorを見てみましょう

13. FloatingActionButton.Behavior

14. FloatingActionButton.Behaviorの各メソッドはこのようになってます。(※1 )
public boolean layoutDependsOn(CoordinatorLayout parent,
FloatingActionButton child, View dependency) {
return dependency instanceof Snackbar.SnackbarLayout;
}
@Override
public boolean onDependentViewChanged (
CoordinatorLayout parent,
FloatingActionButton child,
View dependency
) {
if (dependency instanceof Snackbar.SnackbarLayout) {
updateFabTranslationForSnackbar (parent, child, dependency);
}
return false;
}
※1 説明のために一部ソースを削除してます

15. FloatingActionButton.Behaviorの各メソッドはこのようになってます。(※1 )
public boolean layoutDependsOn(CoordinatorLayout parent,
FloatingActionButton child, View dependency) {
return dependency instanceof Snackbar.SnackbarLayout;
}
@Override
public boolean onDependentViewChanged (
CoordinatorLayout parent,
FloatingActionButton child,
View dependency
) {
if (dependency instanceof Snackbar.SnackbarLayout) {
updateFabTranslationForSnackbar (parent, child, dependency);
}
return false;
}
※1 説明のために一部ソースを削除してます

16. FloatingActionButton.Behaviorの各メソッドはこのようになってます。(※1 )
public boolean layoutDependsOn(CoordinatorLayout parent,
FloatingActionButton child, View dependency) {
return dependency instanceof Snackbar.SnackbarLayout;
}
@Override
public boolean onDependentViewChanged (
CoordinatorLayout parent,
FloatingActionButton child,
View dependency
) {
if (dependency instanceof Snackbar.SnackbarLayout) {
updateFabTranslationForSnackbar (parent, child, dependency);
}
return false;
}
※1 説明のために一部ソースを削除してます

17. onPreDrawをトリガーにしている

18. AppBarLayout.ScrollingViewBehavior
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}

19. @Override
public boolean onDependentViewChanged (CoordinatorLayout parent, View child,
View dependency) {
final CoordinatorLayout.Behavior behavior =
((CoordinatorLayout.LayoutParams) dependency. getLayoutParams()).getBehavior();
if (behavior instanceof Behavior) {
// Offset the child so that it is below the app-bar (with any overlap)
final int appBarOffset = ((Behavior) behavior)
.getTopBottomOffsetForScrollingSibling ();
final int expandedMax = dependency. getHeight() - mOverlayTop;
final int collapsedMin = parent. getHeight() - child.getHeight();
if (mOverlayTop != 0 && dependency instanceof AppBarLayout) {
// If we have an overlap top, and the dependency is an AppBarLayout, we control
// the offset ourselves based on the appbar's scroll progress. This is so that
// the scroll happens sequentially rather than linearly
final int scrollRange = ((AppBarLayout) dependency). getTotalScrollRange();
setTopAndBottomOffset (AnimationUtils.lerp(expandedMax, collapsedMin,
Math. abs(appBarOffset) / (float) scrollRange));
} else {
setTopAndBottomOffset (dependency.getHeight() - mOverlayTop + appBarOffset);
}
}
return false;
}

20. @Override
public boolean onDependentViewChanged (CoordinatorLayout parent, View child,
View dependency) {
final CoordinatorLayout.Behavior behavior =
((CoordinatorLayout.LayoutParams) dependency. getLayoutParams()).getBehavior();
if (behavior instanceof Behavior) {
// Offset the child so that it is below the app-bar (with any overlap)
final int appBarOffset = ((Behavior) behavior)
.getTopBottomOffsetForScrollingSibling ();
final int expandedMax = dependency. getHeight() - mOverlayTop;
final int collapsedMin = parent. getHeight() - child.getHeight();
if (mOverlayTop != 0 && dependency instanceof AppBarLayout) {
// If we have an overlap top, and the dependency is an AppBarLayout, we control
// the offset ourselves based on the appbar's scroll progress. This is so that
// the scroll happens sequentially rather than linearly
final int scrollRange = ((AppBarLayout) dependency). getTotalScrollRange();
setTopAndBottomOffset (AnimationUtils.lerp(expandedMax, collapsedMin,
Math. abs(appBarOffset) / (float) scrollRange));
} else {
setTopAndBottomOffset (dependency.getHeight() - mOverlayTop + appBarOffset);
}
}
return false;
}

21. SwipeDismissBehavior
下記二つは実装していない。
•layoutDependsOn
•onDependentViewChanged
タッチイベントでごりごりやってる。

22. カスタムBehaviorを作ってみる
すごく簡単なやつ

23. •layoutDependsOn
•onDependentViewChanged
下記を実装するだけ

24. public class CustomBehavior extends CoordinatorLayout.Behavior<View> {
public CustomBehavior(Context context, AttributeSet attrs) {
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}
@Override
public boolean onDependentViewChanged (CoordinatorLayout parent, View child, View
dependency) {
if (dependency instanceof AppBarLayout) {
AppBarLayout appBarLayout = (AppBarLayout) dependency;
int totalScrollRange = appBarLayout. getTotalScrollRange();
int scrollY = appBarLayout. getTop();
float ratio = -scrollY / ( float) totalScrollRange;
child.setAlpha(1.f - ratio);
}
return true;
}
}

25. public class CustomBehavior extends CoordinatorLayout.Behavior<View> {
public CustomBehavior(Context context, AttributeSet attrs) {
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}
@Override
public boolean onDependentViewChanged (CoordinatorLayout parent, View child, View
dependency) {
if (dependency instanceof AppBarLayout) {
AppBarLayout appBarLayout = (AppBarLayout) dependency;
int totalScrollRange = appBarLayout. getTotalScrollRange();
int scrollY = appBarLayout. getTop();
float ratio = -scrollY / ( float) totalScrollRange;
child.setAlpha(1.f - ratio);
}
return true;
}
}

26. public class CustomBehavior extends CoordinatorLayout.Behavior<View> {
public CustomBehavior(Context context, AttributeSet attrs) {
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
return dependency instanceof AppBarLayout;
}
@Override
public boolean onDependentViewChanged (CoordinatorLayout parent, View child, View
dependency) {
if (dependency instanceof AppBarLayout) {
AppBarLayout appBarLayout = (AppBarLayout) dependency;
int totalScrollRange = appBarLayout. getTotalScrollRange();
int scrollY = appBarLayout. getTop();
float ratio = -scrollY / ( float) totalScrollRange;
child.setAlpha(1.f - ratio);
}
return true;
}
}

27. 注意 コンストラクタも 実装しよう
public CustomBehavior(Context context, AttributeSet attrs) {
}

29. リフレクションに 失敗して落ちます

30. まとめ
・Behaviorを使うと他の子ビューに依存した動きを定義しやすくなります。
・使う場合は大抵 layoutDependsOn とonDependentViewChanged を
Overrideすればなんとかなります。

31. 宣伝
・ shinobu.apkってのやります！
http://shinobu-apk.connpass.com/event/24921/
shinobu.apkとは
「Shinobu Okanoと愉快な仲間たちが繰り広げるファンタジーな 勉強会」
です。

32. ご静聴ありがとうございました。