サポートライブラリを支える技術

# サポートライブラリを 支える技術

Android Bazaar and Conference 2016 Autumn

2016/11/19

荒木佑一

---

# 自己紹介

荒木佑一

[@yuichi_araki](https://twitter.com/yuichi_araki)

Developer Programs Engineer @Google

- サポート ライブラリ (主に design と transition)
- Google I/O アプリ
- Google Santa Tracker アプリ
- [d.android.com/samples](http://d.android.com/samples) のサンプルいろいろ
- [CameraView](https://github.com/google/cameraview)
]

---

# サポート ライブラリ

---

# サポート ライブラリとは

Android プラットフォーム本体と並行して開発される

- プラットフォーム本体の機能のバックポート
- プラットフォーム本体には存在しない追加の機能

最新版 25.0.1

]

???

- Web の世界では "shim" や "polyfill" と呼ばれるもの
- 当初は API レベル間の互換性のためのライブラリだったが、今はいろいろ

---

# サポート ライブラリ 一覧

.card[
.small[
- インフラ互換性: support-v4, support-v13, support-annotations, vector-drawable, animated-vector-drawable, transition
- UI 互換性: appcompat-v7, preferences-v7, preferences-v14, gridlayout-v7
- UI ライブラリ: recyclerview-v7, design, percent, cardview-v7
- その他: palette-v7, customtabs, renderscript-v8, mediarouter-v7, leanback-v17, recommendation, preference-leanback-v17
- 特殊: Testing Support Library (Espresso 含む), Data Binding, MultiDex
]
]

???

- 20 個と少し
- 「特殊」は他のサポート ライブラリとバージョンが別

---

# 最小 SDK バージョン

~~そのライブラリがサポートする最小 API レベル~~  
すべてのライブラリの最小 SDK バージョンは最低でも 9

v4, v7 は歴史的経緯
]

???

- バージョン 24.2.0 のアップデートで、すべてのライブラリの最小 SDK バージョンが 9 以上になった
  - support-v4、各種 -v7、design
  - 前から 9 より上だったものはそのまま
- パッケージ名の v4 や v7 も同様

---

# support-v4 の分割

.card[
- support-compat
- support-core-ui
- support-core-utils
- support-fragment
- support-media-compat

[分割されたv4 Support Librariesのリスト](http://androhi.hatenablog.com/entry/2016/08/19/011805)
]

???

- バージョン 24.2.0 のアップデートで分割された
- support-v4 はメタ ライブラリとして残る
  - ほとんどのアプリはそのままで良い

---

# 依存関係

]

???

- 一部割愛

---

# Transition Support Library

---

# Transition Support Library

アニメーションを自動的に生成して実行する

API レベル 14 (Ice Cream Sandwich) 以降で使える

[Transitions in the Android Support Library](https://medium.com/google-developers/transitions-in-the-android-support-library-8bc86a1d688e#.z2vlc95mo)

---

# beginDelayedTransition

```java
TransitionManager.beginDelayedTransition(root);
```

アニメーションしたい変更を行う

```java
view.setVisibility(View.INVISIBLE);
```
]

---

# Scene

それぞれのレイアウト XML ごとに Scene を作る

```java
Scene scene = Scene.getSceneForLayout(root, R.layout.scene, this);
```

遷移

```java
TransitionManager.go(scene);
```
]

---

# バージョン 25.0.1

Lollipop 以降で追加された API は (まだ) ない
- Slide, Explode, 各種 Propagation など
- Activity/Fragment Transition
]

---

# サポート ライブラリの開発

---

# ソース取得

適当なディレクトリを作成して cd

```sh
# 作業ディレクトリを初期化
$ repo init -u https://android.googlesource.com/platform/manifest

# サポート ライブラリのプロジェクトを取得
$ repo sync frameworks/support
```

または
```sh
# リポジトリ全体を取得
$ repo sync -c
```
]

???

- サポート ライブラリは Android プラットフォーム本体といっしょに開発されている
- ここに記載している URL は AOSP (オープンソース版) のリポジトリ

---

# ビルド

.card[
```sh
# 依存しているものを取得
$ repo sync -c external/proguard \
               external/doclava \
               external/antlr \
               prebuilts/gradle-plugin \
               prebuilts/tools \
               prebuilts/maven_repo/android \
               prebuilts/sdk \
               tools/external/gradle \
               build

$ cd frameworks/support

$ ./gradlew assembleDebug
```

`../../out` に AAR ができるはず
]

---

# 開発の流れ

frameworks/support の中のコードを編集

[Gerrit](https://www.gerritcodereview.com/) によるコード レビュー

リリース
]

---

# 今日の話題

View を動かす

CoordinatorLayout
]

???

---

# レイアウト

---

# View と ViewGroup

Button, ImageView などなど

## ViewGroup

FrameLayout, LinearLayout, RelativeLayout など
]

---

# LayoutParams

- FrameLayout.LayoutParams 
 margin, gravity
- LinearLayout.LayoutParams 
 margin, weight, gravity
- RelativeLayout.LayoutParams 
 alignParent*, above, below, …
- …
]

???

- ViewGroup ごとに利用できるパラメーターの種類が違う

---

# レイアウト

[How Android Draws Views](https://developer.android.com/guide/topics/ui/how-android-draws.html)

- [View#onMeasure(int widthMeasureSpec, int heightMeasureSpec)](https://developer.android.com/reference/android/view/View.html#onMeasure(int, int%29)
- [ViewGroup#onLayout(boolean changed, int l, int t, int r, int b)](https://developer.android.com/reference/android/view/ViewGroup.html#onLayout(boolean, int, int, int, int%29)
]

???

- 重要なのは、レイアウトが比較的重たい処理だということ
  - ネットワーク通信やディスク読み込みに比べれば全然軽いが、60 FPS の画面描画の毎フレーム行うには重すぎる
- アニメーション中は絶対避けるべき
- それ以外でも最小限に留める

---

# レイアウトを引き起こす操作を知る

## 親のレイアウトを引き起こさない

- setTextColor

## 親のレイアウトを引き起こす

- setTextSize
]

???

- 端的に言えばその View の大きさが変わるかどうか
- その他
  - invalidate: 描画し直す
  - requestLayout: レイアウトを引き起こす

---

# 例: TextInputLayout

???

- design サポート ライブラリに入っているコンポーネント
- EditText をくるむことで色んな機能を追加する
  - エラー表示
  - カウンター表示
- ヒントのテキストをアニメーション
  - アニメーションの毎フレームごとに setTextSize するわけにはいかない

---

# 文字のアニメーション

文字サイズの変更

- API Level 17 以上: Paint#setTextSize
- 16 以前: 画像の縮小
]

???

- ただし API Level 17 以下では文字描画にハードウェア アクセラレーションが効かないので、一番大きいサイズの文字列で作った画像をスケールして描画
- cf. CollapsingTextHelper

---

# レイアウト まとめ

アニメーション中は絶対にレイアウトを引き起こしてはいけない

それ以外の時も最小限に留める
]

---

# View を動かす

---

# View の位置

- レイアウト
- offsetLeftAndRight, offsetTopAndBottom
- setTranslationX, setTranslationY
]

---

# レイアウト

.card[
- FrameLayout.LayoutParams 
 margin, gravity
- LinearLayout.LayoutParams 
 margin, weight, gravity
- RelativeLayout.LayoutParams 
 alignParent*, above, below, …

- 親の padding

レイアウトを引き起こす
]

---

# offsetLeftAndRight, offsetTopAndBottom

指定した値だけ View を現在の位置からずらす

レイアウトを引き起こさない
]

???

- あまり知らない、使ったことがない人が多いのでは
- 以前のバージョンのプラットフォームでは盛大にバグっていた
  - Marshmallow でやっとまともに直った
  - ViewCompat の中にバグ修正版が入っている

---

# setTranslationX, setTranslationY

View の本来の位置からどれだけずらすかを指定する

レイアウトを引き起こさない
]

---

# offsetLeftAndRight/TopAndBottom と setTranslationX/Y の違い

.card[
```java
ViewCompat.offsetLeftAndRight(view, 100);
ViewCompat.offsetLeftAndRight(view, 100);
```

View は 200 ずれる

```java
ViewCompat.setTranslationX(view, 100);
ViewCompat.setTranslationX(view, 100);
```

View は 100 ずれたまま
]

---

# getLeft/Top と getX/Y の違い

- レイアウトの値を含む
- offsetTopAndBottom/LeftAndRight の値を含む
- translationX/Y の値を含まない (= base position)

```java
float x = ViewCompat.getX(view);
float y = ViewCompat.getY(view);
```

- 〃
- translationX/Y の値を含む (= transformation position)
]

---

# View の位置まとめ

.card[
| 位置の種類 | 含むもの | ずらす | 取得 |
|:---------------|:----------------------------|-------------|-------------|
| base | レイアウト | offset | getLeft/Top |
| transformation | base + 各種変形 | translation | getX/Y |

- offsetTopAndBottom/LeftAndRight
- setTranslationX/Y

どちらもレイアウトは**引き起こさない**ことが大切
]

---

# offsetT&B/offsetL&R の使い道

例: ViewDragHelper

ViewGroup の中で子 View をずらしたい場合
]

---

# setTranslationX/Y の使い道

```java
ViewCompat.animate(view).translationX(300);
```

```java
ObjectAnimator.ofFloat(view, "translationX", 300).start();
```
]

---

# CoordinatorLayout

---

# CoordinatorLayout

Design サポート ライブラリの中心的なコンポーネント

- Keyline
- Behavior
- View inset
- Anchor

]

---

# FloatingActionButton (FAB)

影付きの丸い ImageButton

```xml
<a.s.d.w.FloatingActionButton
 android:id="@+id/fab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:fabSize="normal"
 app:srcCompat="@drawable/ic_done" />
```
]

---

# Snackbar

Toast の進化版

アクションを設定できる

```java
Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
        .setAction("Action", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // ...
            }
        })
        .show();
```
]

???

- 下からスライドでアニメーションしつつ表示される

---

# FAB が Snackbar を避ける

アニメーションのリスナーなどをセットする必要はない

Snackbar は setTranslationY でアニメーションしている

FAB は Snackbar をアニメーションしつつ避ける

]

???

- どうやってアニメーションする相手を追跡しているのか
  - レイアウトが発生しているなら話は簡単。配置しなおせばいいだけ
  - だがそれだと遅すぎる。レイアウトを引き起こさないようなやり方で動いているはず

---

# CoodinatorLayout が取り持つ

.card[
- FAB は CoodinatorLayout の下端に沿うと宣言 (app:layout_dodgeInsetEdges="bottom")
- Snackbar は CoordinatorLayout の下端を押し上げると宣言 (app:layout_insetEdge="bottom")
- CoordinatorLayout は FAB に下端が押し上げられていることを通知
- FAB が避ける

CoodinatorLayout はどうやって Snackbar の動きを検知している？
]

---

# Anchor

FAB が AppBarLayout の下端に anchor されている (app:layout_anchor="@id/ab")

スクロールして AppBarLayout の下端が動けば FAB も追従する

CoodinatorLayout はどうやって AppBarLayout の動きを検知している？
]

---

# ViewTreeObserver.OnPreDrawListener

CoodinatorLayout は追従すべき View の位置を取得する

それに従って他の View をずらす

**遅い？**
]

---

# なぜ遅くないか

座標計算は高速

View をずらすのは offsetLeftAndRight/TopAndBottom (= **レイアウトが発生しない**)
]

---

# 再び beginDelayedTransition

.card[
```java
TransitionManager.beginDelayedTransition(root);
view.setVisibility(View.INVISIBLE);
```

なぜこれだけでアニメーションできるのか

どうやって setVisibility 前の状態と後の状態を検知しているのか
]

---

# ViewTreeObserver.OnPreDrawListener

1. 画面変更前の状態を取得
2. OnPreDrawListener をセットする
3. (画面を変更)
4. OnPreDrawListener が呼ばれる = 画面変更後の状態を取得
5. 変更前と変更後を比較してアニメーションを開始
6. OnPreDrawListener を外す
]

---

# まとめ

適切な方法を使って**不必要なレイアウトを引き起こさない**ようにする

複雑なユーザー インターフェイスを作るときも、**基本が大切**
]

---

# サポート ライブラリ

## b.android.com

### バグ報告、機能要望はこちらから
### ※ スクリーンショット重要