Custom Tabsの高さを変更しよう

Transcript

1. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. Custom Tabsの高さを変更しよう
 チームラボ 堀江

2. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 自己紹介
 堀江 達矢
 チームラボ 2013年入社
 スマホアプリエンジニア
 https://www.wantedly.com/id/tatsuya_horie_c
 

3. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. Custom Tabs紹介
 Webページを開くときに
 - アプリから離脱させたくない
 - WebViewでは動かないかもしれない
 という悩みを解決するために、
 ブラウザ側でAndroidアプリ向けに提供される機能
 管理しているドメイン以外のWebページを開くときに利用が推奨されている
 refs:https://developer.chrome.com/docs/android/custom-tabs/
4. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. Custom Tabsの新しい機能
 Custom Tabs起動時の高さを設定できる

5. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 注意点
 - ブラウザによって対応状況が異なるため、
 Chromeの場合は最新版を利用する
 - 端末横向きでは表示できない
 - マルチウィンドウモードでは表示できない

6. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 起動時の高さの設定方法
 2種類の方法
 1. CustomTabsServiceConnectionを利用
 2. ActivityResultLauncherを利用
 

7. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. CustomTabsServiceConnectionを利用
 ※CustomTabsSessionは 　利用シーンに合わせて作成
8. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. CustomTabsServiceConnectionを利用

9. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 高さが変更されたイベント
 CustomTabsCallback #onActivityResized でハンドリング
10. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ActivityResultLauncherを利用

11. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. ActivityResultLauncherを利用

12. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 項目の説明：Toolbarの角丸
 角丸の設定は現状 0dp ~ 16dp の範囲のみ対応 それ以外を設定す るとクラッシュ refs:https://developer.android.com/reference/androidx/browser/customtabs/CustomTabsIntent#EXTRA_TOOLBAR_CORNER_RADIUS_DP()
13. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 項目の説明：起動時の高さ
 起動時の高さは 画面の高さの 50% ~ 100% の範囲のみ対応 それ以外を設定し ても50%か100% 表示になる refs:https://developer.android.com/reference/androidx/browser/customtabs/CustomTabsIntent#EXTRA_INITIAL_ACTIVITY_HEIGHT_PX()
14. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 項目の説明：起動時の高さ追加設定
 refs:https://developer.android.com/reference/androidx/browser/customtabs/CustomTabsIntent.Builder#setInitialActivityHeightPx(int) ActivityHeightRe sizeBehaviorを 指定可能 - DEFAULT - ADJUSTABLE - FIXED の3種
15. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 項目の説明：閉じるボタンの位置
 閉じるボタンの 表示位置 - DEFAULT - START - END の3種 refs:https://developer.android.com/reference/androidx/browser/customtabs/CustomTabsIntent.Builder#setCloseButtonPosition(int)
16. We are the future. www.team-lab.com チームラボ株式会社 teamLab inc. 最後に
 androidx.Browserのバージョン 1.5には他にも更新されたものがあるので、
 是非試してみてください