Viewを動的に変化させるアプローチ

DroidKaigi 2017 - 2017/03/09 @cattaka_net
Viewを動的に
変化させるアプローチ
Takao Sumitomo
@cattaka_net

自己紹介
●
住友孝郎(Takao Sumitomo)
●
Androidアプリ開発者
●
今やってること
●
Androidアプリケーション
●
昔やってたこと
●
いろいろ(MFCとかStrutsとか)
●
ウォンテッドリー株式会社所属
●
2014年12月〜
●
それ以前は関西で仕事してた

直近のアプリ
かしこく、名刺管理
人工知能を搭載したカメ
ラで、10枚までの名刺を
わずか3秒でデータ化、そ
して管理可能な、無料で
使えるビジネスパーソン向
けのアプリです。

発表の内容
●
お題
●
ユーザーの操作に追従させたい
●
キーワード
●
DataBinding
●
ConstraintLayout
●
Material Designに特化した話ではなく、どう実装
するかのお話

標準APIとSupport Libraryで
できること

アニメーション
●
ViewPagerの切替時
●
FABが操作の完了時に
出てくる

AppBarLayout
●
一定以上スクロールす
ると、色が変わる
●
タイトルのみ動かせる
●
補足：このサンプルはバ
グのため動かせなかっ
た、、

やりたいこと
ユーザーの操作に追従させたい

今回の話のゴール

実装アプローチのイメージ
●
意識するのは３つ
●
操作イベント
●
属性値の計算
●
Viewの更新
操作イベント
属性値の計算
Viewの更新

この３つを見ていきます
操作イベント
属性値の計算
Viewの更新

何を操作イベントとする？
操作イベント
属性値の計算
Viewの更新

操作イベント
属性値の計算
Viewの更新
タッチイベントは辛い
●
タッチイベントは種類がいっぱい
●
全部で何個種類があるか全部言える人いる？
●
マルチタッチになるとどうなる？
●
ネステッドスクロールはさらに難解
●
flingが入るともうカオス
●
CoordinatorLayoutのBehaviorも同じ

操作イベント
属性値の計算
Viewの更新
無難なイベント
●
スクロールイベント系
●
ScrollView
●
RecyclerView
●
AppBarLayout
●
レイアウト系イベント
●
OnLayoutChangeListener
●
OnGlobalLayoutListener
– ただし注意しないとループに嵌まる

操作イベント
属性値の計算
Viewの更新
よくよく考えると
●
タッチ操作でViewを変化させるというより
●
他のViewに合わせて動くと考えるほうが自然
ViewPagerで
発生したイベント
表示を更新
表示を更新
スクロール量から
計算

操作イベント
属性値の計算
Viewの更新
Viewの属性値の計算はどこでやる？

操作イベント
属性値の計算
Viewの更新
コードでゴリゴリやる
●
行数が増えがちになる
●
コードを読まないとどういう動きかわからない
●
なのであまりやりたくない

属性値の計算は分けて考える
●
スクロール量などの値を正規化した値にする
●
具体的な属性値への計算は別途やる
0.0〜1.0に
なるように
0.0〜3.0になるように

操作イベント
属性値の計算
Viewの更新
ViewPagerでの計算
●
タブは0.0〜3.0の値か
ら計算
●
FABは0.0〜1.0の値か
ら計算

@Override
public void onPageScrolled(
int position, // 0,1,2などのページ番号
float positionOffset, // 0.0〜1.0の範囲のオフセット
int positionOffsetPixels) {
float absolutePosition = position + positionOffset;
float fabFactor = (position == 0) ? positionOffset : 1;
/* 省略 */
}
本質はここ
0.0〜3.0 の値を算出

1ページ目のみ
0.0〜1.0 の値が欲しい
@Override
public void onPageScrolled(
int position, // 0,1,2などのページ番号
float positionOffset, // 0.0〜1.0の範囲のオフセット
int positionOffsetPixels) {
float absolutePosition = position + positionOffset;
float fabFactor = (position == 0) ? positionOffset : 1;
/* 省略 */
}

ScrollViewでの計算
●
0.0〜1.0の値から諸々の
属性値を計算する
●
ActionBar
●
タイトル
– 座標と色
●
アイコン
●
その他のテキスト
– 座標と色

@Override
public void onScrollChange(NestedScrollView v,
int scrollX, int scrollY, int oldScrollX, int
oldScrollY) {
int h = mBinding.layoutContents.image.getHeight();
float factor = (h > 0) ? (float) scrollY / h : 0f;
if (factor < 0f) {
factor = 0f;
} else if (factor > 1f) {
factor = 1f;
}
/* 省略 */
}
本質はここ
0.0〜1.0 の値を算出

@Override
public void onScrollChange(NestedScrollView v,
int scrollX, int scrollY, int oldScrollX, int
oldScrollY) {
int h = mBinding.layoutContents.image.getHeight();
float factor = (h > 0) ? (float) scrollY / h : 0f;
if (factor < 0f) {
factor = 0f;
} else if (factor > 1f) {
factor = 1f;
}
/* 省略 */
}
0除算に注意

Viewに設定する属性値の計算
●
対象となる属性
●
alpha
●
width / height
●
translationX / translationY
●
scaleX / scaleY
●
textSize
●
etc
●
この辺りの計算はDataBindingの計算が便利

Viewの更新のアプローチ
操作イベント
属性値の計算
Viewの更新

操作イベント
属性値の計算
Viewの更新
DataBindingが強い
●
変数を渡せる
●
計算式が書ける

DataBindingの変数
<layout>
<data>
<variable name="fabFactor" type="float" />
</data>
<RelativeLayout android:id="@+id/layout">

</RelativeLayout>
</layout>
mBinding.setFabFactor(fabFactor);
layout xmlでの定義
Java側から渡す
xmlで定義すると
setterが作られる

DataBindingで計算
<android.support.design.widget.FloatingActionButton
android:id="@+id/button_search"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:translationY="@{fabFactor *　 @dimen/fab_offset}" />
dimenの値に掛け算で
楽に設定できる
※：@dimen/fab_offset より良い方法を後述

具体的な例

FABの現れ方
●
完全に隠れるには
親のheight - 自分のtop
が必要になる
自分のtop
親のheight
これ

FABの現れ方
<RelativeLayout android:id="@+id/layout">

<android.support.design.widget.FloatingActionButton
android:id="@+id/button_search"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:translationY="@{fabFactor *
(layout.getHeight() - buttonSearch.getTop())}"
/>
</RelativeLayout>
translationYに
必要な値をここで計算

タブの動き
●
文字サイズを変える
●
背景色を変える
●
elevationを変える
●
幅を変える

タブの動き
<TextView
　　　　android:id="@+id/tab_0"
　　　　android:layout_width="0dp"
　　　　android:layout_height="match_parent"
　　　　android:layout_weight="1"
　　　　android:background="@{DataBindingFunctions.evaluateColor(position,　0f,　@color/bgTab,　@color/bgTabSelected)}"
　　　　android:elevation="@{DataBindingFunctions.evaluateFactor(position,　0f,　0f,　@dimen/elevation_tab)}"
　　　　android:gravity="center"
　　　　android:text="List"
　　　　android:textAppearance="?android:textAppearanceMedium"
　　　　android:textSize="@{DataBindingFunctions.evaluateFactor(position,　0f,　@dimen/text_tab_small,　@dimen/text_tab_large)}"
　　　　app:layout_constraintBottom_toBottomOf="parent"
　　　　app:layout_constraintEnd_toStartOf="@+id/tab_1"
　　　　app:layout_constraintStart_toStartOf="parent"
　　　　app:layout_constraintTop_toTopOf="parent"
　　　　app:setLayoutWeight="@{DataBindingFunctions.evaluateFactor(position,　0f,　3f,　4f)}"
/>

タブの動き：文字サイズを変える
<TextView
/>
android:textSize="@{
DataBindingFunctions.evaluateFactor(
position, ←スクロール位置(0.0〜3.0)
0f, ←対象タブの番号(0,1,2)
@dimen/text_tab_small,←未選択時のサイズ
@dimen/text_tab_large ←選択時のサイズ
)}"
独自の補間用メソッド

タブの動き：背景色を変える
<TextView
/>
android:background="@{
DataBindingFunctions.evaluateColor(
@color/bgTab, ←未選択時の色
@color/bgTabSelected ←選択時の色
)}"

タブの動き：elevationを変える
<TextView
/>
android:elevation="@{
0f, ←未選択時の値
@dimen/elevation_tab ←選択時の値
)}"

タブの動き：幅を変える
<TextView
/>
app:setLayoutWeight="@{
3f, ←未選択時のlayout_weight
4f ←選択時のlayout_weight
)}"
独自のlayout_weight指定用メソッド(後述)

DataBindingの制限
●
LayoutParamに直接的に値を設定できない
●
xml上で android:layout_***** となっているもの
●
BindingAdapter用のメソッドを作ればできる
@BindingAdapter("setLayoutWeight")
public static void setLayoutWeight(View view, float value) {
ViewGroup.LayoutParams params = view.getLayoutParams();
if (params instanceof LinearLayout.LayoutParams) {
((LinearLayout.LayoutParams) params).weight = value;
view.setLayoutParams(params);
}
}

CollapsingToolbarLayout
みたいなことをやる
●
アイコンを動かす
●
テキストを動かす
●
ステータスバーの色を
変える

<ImageView
　　　　android:id="@+id/image_icon"
　　　　android:layout_width="?android:actionBarSize"
　　　　android:layout_height="?android:actionBarSize"
　　　　android:background="@drawable/oval_fill_white"
　　　　android:padding="4dp"
　　　　android:scaleType="centerCrop"
　　　　android:scaleX="@{2f-scrollFactor}"
　　　　android:scaleY="@{2f-scrollFactor}"
　　　　app:layout_constraintBottom_toBottomOf="@+id/dummy_action_bar"
　　　　app:layout_constraintTop_toTopOf="@+id/dummy_action_bar"
　　　　app:loadImage="@{item.file}"
　　　　app:loadImageTransformation="@{CircleTransform.instance}"
　　　　app:setLayoutMarginStart="@{(int)((1f-scrollFactor)　*　@dimen/icon_offset_x)}"
　　　　app:setLayoutMarginTop="@{(int)((1f-scrollFactor)　*　@dimen/icon_offset_y)}"
　　　　app:useFit="@{false}"
　　　　tools:layout_marginStart="@dimen/icon_offset_x"
　　　　tools:layout_marginTop="@dimen/icon_offset_y"
　　　　tools:scaleX="2"
　　　　tools:scaleY="2"
　　　　tools:src="@drawable/dummy_icon"　/>
android:scaleX="@{2f-scrollFactor}"
android:scaleY="@{2f-scrollFactor}"
app:setLayoutMarginStart="@{
(int)((1f-scrollFactor) * @dimen/icon_offset_x)
}"
app:setLayoutMarginTop="@{
(int)((1f-scrollFactor) * @dimen/icon_offset_y)
}"

<TextView
　　　　android:id="@+id/text_name"
　　　　android:layout_width="wrap_content"
　　　　android:layout_height="wrap_content"
　　　　android:text="@{item.name}"
　　　　android:textAppearance="?android:textAppearanceLarge"
　　　　android:textColor="@{DataBindingFunctions.evaluateColor(scrollFactor,　@android:color/white,　@android:color/black)}"
　　　　android:textSize="@{(1f-scrollFactor)　*　@dimen/text_title_large　+　scrollFactor　*　@dimen/text_title_small}"
　　　　app:layout_constraintBottom_toBottomOf="@+id/image_icon"
　　　　app:layout_constraintStart_toEndOf="@id/image_icon"
　　　　app:layout_constraintTop_toTopOf="@+id/image_icon"
　　　　app:setLayoutMarginStart="@{(int)((1f-scrollFactor)　*　@dimen/spacing_x4)}"
　　　　tools:layout_marginStart="@dimen/spacing_x4"
　　　　tools:text="Name"
　　　　tools:textColor="@android:color/white"
　　　　tools:textSize="@dimen/text_title_large"　/>
android:textColor="@{
DataBindingFunctions.evaluateColor(
scrollFactor,
@android:color/white,
@android:color/black)
}"
android:textSize="@{
(1f-scrollFactor) * @dimen/text_title_large
+ scrollFactor * @dimen/text_title_small}"
app:setLayoutMarginStart="@{
(int)((1f-scrollFactor) * @dimen/spacing_x4)}"

ステータスバーの色を変える
●
LOLLIPOP以降なら普通に変えられる
●
FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS
※：これはDataBinding使わない
int color = DataBindingFunctions.evaluateColor(
factor, mOriginalStatusBarColor, mVibrantColor);
Window window = getWindow();
if (window != null && Build.VERSION.SDK_INT
>= Build.VERSION_CODES.LOLLIPOP) {
window.setStatusBarColor(color);
}

tip & trap

toolsNSを活用しよう
●
layout xmlの最終形がイメージしづらい
●
レイアウトエディタ上でイメージできるようにしよう

表示が切れる問題
●
親のViewGroupを飛び出すと...
●
表示が切れる
●
elevationの影が切れる
●
android:clipToPadding="false" で回避できる

OnLayoutChangeListenerのtrap
●
気をつけないとループに嵌まることがある
●
変更通知→レイアウト変更→変更通知→...
●
フリーズはしないので知らないうちにCPUを食い潰す...
●
直前の値を保持して、不要ならメソッドを叩かない
ようにする

OnGlobalLayoutListenerのtrap
●
removeを忘れるとメモリリークする

ConstraintLayoutが強力
●
LayoutParamを弄ると、相対的な配置を維持したまま
動く
●
layout_width
●
layout_height
●
layout_margin
●
layout_constraintHorizontal_weight
●
layout_constraintVertical_weight
●
etc

ConstraintLayoutが強力
●
例
●
３つのテキストはアイコンに対
して相対的に動いている

ConstraintLayoutのtrap
●
layout_width=0でmatch_parentと同じ挙動
●
100dp→0dpのように動かすと、
0dpのときに突然広がる挙動をして困る
●
BindingAdapterのメソッドの中で0.01などにして、
誤魔化用にすることで回避できる
●
ネガティブマージンが使えない問題
●
ダミーのSpaceを挟むことで回避できる

ConstraintLayoutのtrap
●
Android Studio 2.3現在
レイアウトエディタでxmlを触ると
たまにxmlが壊れる(´；ω；｀)

DataBindingは
暗黙的型変換をしない
●
計算でfloat, double, intの場合は明示的にキャス
トが必要
●
型が違っているとビルドエラーになる
●
Java言語の仕様に従って、floatなら1.0f、double
なら1.0とか書かないとダメ

考察

DataBindingを使う理由
●
色や大きさはXMLに入れるべきか、Javaに入れるべきか
●
Javaに書くと
●
行数が増える
●
xmlと距離が遠くて把握しづらい
●
コードが読める人じゃないとメンテナンスできない
●
DataBindingに書くと
●
xmlの属性の@{...}の部分を見ればだいたいわかる
●
ただ、横に長くなる...

パフォーマンスに関する考察
●
LayoutParamsをいじるのは正直重い
●
LayoutParamsを変えると、measure系が走る
●
ただ複数のViewが相対的に変化するならどのみち必要
●
必要が無いならtranslateやscaleを使うほうが良
い

工数に関すること
●
極論で言うと、タッチイベントからやるのがパフォーマ
ンスが出る
●
CoordinatorLayoutと同じアプローチ
– すなわち、CoordinatorLayoutのBehaviorを作る
●
でも難解
●
イベント＋DataBindingが楽（と考える）
操作イベント
属性値の計算
Viewの更新
Behaviorだと
これを全部やることになる...

まとめ

まとめ
操作イベント
属性値の計算
Viewの更新
スクロールやレイアウトイベントを
トリガーにする
コード側で
値を正規化する
DataBindingで
具体的な値の算出と設定をする

サンプルアプリ
https://github.com/cattaka/ProteanLayoutExample

ご清聴ありがとうございました
Takao Sumitomo
@cattaka_net

Viewを動的に変化させるアプローチ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to Viewを動的に変化させるアプローチ

Similar to Viewを動的に変化させるアプローチ (20)

More from Takao Sumitomo

More from Takao Sumitomo (20)

Recently uploaded

Recently uploaded (9)

Viewを動的に変化させるアプローチ