Slide 1
Slide 1 text
5年更新していなかったアプリが
海外バイヤーから数万ドルで
買収されそうになったので、
久しぶりにアプリを更新しようと思ったら
色々仕様が変わっていたので、
細々したよくやるやつをツラツラと話す話
@_a_akira
荒谷 光
あらたに あきら
Slide 2
Slide 2 text
About me
@_a_akira AAkira
M3, Inc.
Akira Aratani
https://aakira.app
!"#$%&'()*+,-./0123456789
✈;<=⊿
https://aakira.studio
aakira.studio
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
ことの発端
ある日、こんなメールが来た
Slide 5
Slide 5 text
ことの発端
発表時だけの秘密♡
Slide 6
Slide 6 text
ことの発端
発表時だけの秘密♡
Slide 7
Slide 7 text
ことの発端
$ 40,000 = 40,000 * 109
= ¥
4,360,000
発表時だけの秘密♡
発表時だけの秘密♡ 発表時だけの秘密♡
Slide 8
Slide 8 text
ことの発端
Slide 9
Slide 9 text
ことの発端
念の為、色々ヒアリングすることに
Slide 10
Slide 10 text
ことの発端
< TOP3 countriesのActive User数は？
< 本当にその額で買ってくれるの？
< 4, 50000くらいのユーザがいれば
40k以上は確実だよ
発表時だけの秘密♡
Slide 11
Slide 11 text
ことの発端
< アプリとソースコードだけくれればいいよ
< 買ってどうするの？
< (答えになっていない...)
< 代わりにアプデしてくれるの？
そしたらソースコードもいるよね？
Slide 12
Slide 12 text
ことの発端
< で、TOP3 countries!>-のActive User数は？
< どうやって、売るの？
< flippa.com っていうサイトがあるやで
Slide 13
Slide 13 text
ことの発端
< 最近アップデートしてないし、
日本のユーザばっかりだよ
大体5000くらい
< なるほどー
ちょっと聞いてみる
< それだと$700だって
Slide 14
Slide 14 text
ことの発端
< うーん。それだったら売らないかなー
< 他にもいっぱいアプリ出してるじゃん。
他はどうなん？
< 他のも似たようなもんだから大丈夫
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
まとめ
• 買って何をするのか具体的に教えてくれないので、
ちょっと怪しい
• この人はバイヤーなので、裏に誰かがいる？
• TOP5 countries [!>-"?] で
50,000ユーザぐらいいれば4~500万円を手にすることが出来る
(可能性がある)
発表時だけの秘密♡
Slide 17
Slide 17 text
意外とこういうアプリでも需要があるんだなー
Slide 18
Slide 18 text
父さんな、会社辞めて
スマートフォンアプリ開発で食っていこうと思うんだ。
Slide 19
Slide 19 text
5年更新していなかったアプリが
海外バイヤーから数万ドルで
買収されそうになったので、
久しぶりにアプリを更新しようと思ったら
色々仕様が変わっていたので、
細々したよくやるやつをツラツラと話す話
@_a_akira
荒谷 光
あらたに あきら
Slide 20
Slide 20 text
5年更新していなかったアプリを
久しぶりに更新しようと思ったら
色々仕様が変わっていたので、
細々したよくやるやつをツラツラと話す話
@_a_akira
荒谷 光
あらたに あきら
Slide 21
Slide 21 text
大学時代に作ったアプリ達
Slide 22
Slide 22 text
大学時代に作ったアプリ達
ラブストーリーぐらい突然 ストアから消される
Slide 23
Slide 23 text
大学時代に作ったアプリ達
丁度昨晩タイムリーに削除
Slide 24
Slide 24 text
大学時代に作ったアプリ達
Slide 25
Slide 25 text
どんなアプリなのか
スマホ上にフィルターをかけて
覗き見防止するアプリ
端末の設定以上に
画面を暗くしたりも出来る
Slide 26
Slide 26 text
どんなアプリなのか
Androidアプリで、覗き見防止アプリがリリースされたのはこのアプリが多分２番目
Slide 27
Slide 27 text
どんなアプリなのか
昔のUI感がダサい... リニューアルしてみた(途中)
Slide 28
Slide 28 text
いろいろやったリスト
• QuickSettingsTiles(通知エリアのタイルボタン)
• Palette
• WindowManager
• バックグラウンド
• SharedElement
• Transition animation(Explode, 角丸ピッ)
• WindowInsets
• AnimatedVectorDrawable
• BottomAppBar
• ViewPager2 (Infinity Loop, ひょっこりはん)
Slide 29
Slide 29 text
いろいろやったリスト
• QuickSettingsTiles(通知エリアのタイルボタン)
• Palette
• WindowManager
• バックグラウンド
• SharedElement
• Transition animation(Explode, 角丸ピッ)
• WindowInsets
• AnimatedVectorDrawable
• BottomAppBar
• ViewPager2 (Infinity Loop, ひょっこりはん)
上3つは話す予定
あとは挙手制?
Slide 30
Slide 30 text
Quick settings Tile
https://www.instagram.com/p/B2ZWvA2AkRY/
Slide 31
Slide 31 text
Quick Settings Tile
Nougat(API24)から追加
カスタマイズToggle Buttonを
置くことが出来る
Slide 32
Slide 32 text
Quick Settings Tile
Notification Quick Settings Tile
Slide 33
Slide 33 text
Quick Settings Tile
class MyTileService: TileService(){
override fun onClick() {
super.onClick()
// ΫϦοΫ࣌ʹݺΕΔ
}
override fun onTileRemoved() {
super.onTileRemoved()
// ฤूը໘͔ΒλΠϧআ࣌ʹݺΕΔ
}
override fun onTileAdded() {
super.onTileAdded()
// ฤूը໘͔ΒλΠϧՃ࣌ʹݺΕΔ
}
override fun onStartListening() {
super.onStartListening()
// ௨ΤϦΞͷλΠϧ͕දࣔ͞Εͨ࣌
}
override fun onStopListening() {
super.onStopListening()
// ௨ΤϦΞͷλΠϧ͕ݟ͑ͳ͘ͳͬͨ࣌
}
}
Slide 34
Slide 34 text
class MyTileService: TileService(){
override fun onClick() {
super.onClick()
// ΫϦοΫ࣌ʹݺΕΔ
}
override fun onTileRemoved() {
super.onTileRemoved()
// ฤूը໘͔ΒλΠϧআ࣌ʹݺΕΔ
}
override fun onTileAdded() {
Quick Settings Tile
Slide 35
Slide 35 text
override fun onClick() {
super.onClick()
// ΫϦοΫ࣌ʹݺΕΔ
}
override fun onTileRemoved() {
super.onTileRemoved()
// ฤूը໘͔ΒλΠϧআ࣌ʹݺΕΔ
}
override fun onTileAdded() {
super.onTileAdded()
// ฤूը໘͔ΒλΠϧՃ࣌ʹݺΕΔ
}
override fun onStartListening() {
Quick Settings Tile
Slide 36
Slide 36 text
override fun onTileRemoved() {
super.onTileRemoved()
// ฤूը໘͔ΒλΠϧআ࣌ʹݺΕΔ
}
override fun onTileAdded() {
super.onTileAdded()
// ฤूը໘͔ΒλΠϧՃ࣌ʹݺΕΔ
}
override fun onStartListening() {
super.onStartListening()
// ௨ΤϦΞͷλΠϧ͕දࣔ͞Εͨ࣌
}
override fun onStopListening() {
Quick Settings Tile
Slide 37
Slide 37 text
override fun onTileAdded() {
super.onTileAdded()
// ฤूը໘͔ΒλΠϧՃ࣌ʹݺΕΔ
}
override fun onStartListening() {
super.onStartListening()
// ௨ΤϦΞͷλΠϧ͕දࣔ͞Εͨ࣌
}
override fun onStopListening() {
super.onStopListening()
// ௨ΤϦΞͷλΠϧ͕ݟ͑ͳ͘ͳͬͨ࣌
}
}
Quick Settings Tile
ここでState Checkした方が良い
Slide 38
Slide 38 text
override fun onTileAdded() {
super.onTileAdded()
// ฤूը໘͔ΒλΠϧՃ࣌ʹݺΕΔ
}
override fun onStartListening() {
super.onStartListening()
// ௨ΤϦΞͷλΠϧ͕දࣔ͞Εͨ࣌
qsTile?.state = if (isFeatureRunning()) Tile.STATE_ACTIVE
else Tile.STATE_INACTIVE
qsTile?.updateTile()
}
override fun onStopListening() {
super.onStopListening()
// ௨ΤϦΞͷλΠϧ͕ݟ͑ͳ͘ͳͬͨ࣌
}
Quick Settings Tile
通知エリアの状態表示
Slide 39
Slide 39 text
override fun onTileAdded() {
super.onTileAdded()
// ฤूը໘͔ΒλΠϧՃ࣌ʹݺΕΔ
}
override fun onStartListening() {
super.onStartListening()
// ௨ΤϦΞͷλΠϧ͕දࣔ͞Εͨ࣌
}
override fun onStopListening() {
super.onStopListening()
// ௨ΤϦΞͷλΠϧ͕ݟ͑ͳ͘ͳͬͨ࣌
}
}
Quick Settings Tile
Slide 40
Slide 40 text
Quick Settings Tile
AndroidManifest.xml
Slide 41
Slide 41 text
Quick Settings Tile
作成したService class
AndroidManifest.xml
Slide 42
Slide 42 text
Quick Settings Tile
QuickSettingsに表示するアイコン
AndroidManifest.xml
Slide 43
Slide 43 text
Quick Settings Tile
QuickSettingsに表示するラベル
AndroidManifest.xml
Slide 44
Slide 44 text
Palette
https://www.instagram.com/p/B0gJPMsg7VK/
知られざる名機能
Slide 45
Slide 45 text
Palette
SupportLibrary v7時代に追加
背景画像から "良い感じな" 色を抽出
Slide 46
Slide 46 text
Palette
import androidx.palette.graphics.Palette
Palette.from(bitmap).generate {
val lightPalette = it?.lightVibrantSwatch ?: return@generate
val mutedPalette = it.vibrantSwatch ?: return@generate
appBarContent.setStatusBarScrimColor(lightPalette.rgb)
appBarContent.setContentScrimColor(mutedPalette.rgb)
}
Slide 47
Slide 47 text
import androidx.palette.graphics.Palette
Palette.from(bitmap).generate {
val lightPalette = it?.lightVibrantSwatch ?: return@generate
val mutedPalette = it.vibrantSwatch ?: return@generate
appBarContent.setStatusBarScrimColor(lightPalette.rgb)
appBarContent.setContentScrimColor(mutedPalette.rgb)
}
Palette
非同期で取得(中身はAsyncTask)
Slide 48
Slide 48 text
import androidx.palette.graphics.Palette
Palette.from(bitmap).generate {
val lightPalette = it?.lightVibrantSwatch ?: return@generate
val mutedPalette = it.vibrantSwatch ?: return@generate
appBarContent.setStatusBarScrimColor(lightPalette.rgb)
appBarContent.setContentScrimColor(mutedPalette.rgb)
}
Palette.from(bitmap).generate()
Palette
同期取得
Slide 49
Slide 49 text
import androidx.palette.graphics.Palette
Palette.from(bitmap).generate {
val lightPalette = it?.lightVibrantSwatch ?: return@generate
val mutedPalette = it.vibrantSwatch ?: return@generate
appBarContent.setStatusBarScrimColor(lightPalette.rgb)
appBarContent.setContentScrimColor(mutedPalette.rgb)
}
Palette
Slide 50
Slide 50 text
import androidx.palette.graphics.Palette
Palette.from(bitmap).generate {
val lightPalette = it?.lightVibrantSwatch ?: return@generate
val mutedPalette = it.vibrantSwatch ?: return@generate
appBarContent.setStatusBarScrimColor(lightPalette.rgb)
appBarContent.setContentScrimColor(mutedPalette.rgb)
}
Palette
異なる鮮やかさが取れる
Slide 51
Slide 51 text
Palette
https://developer.android.com/training/material/palette-colors
Slide 52
Slide 52 text
https://www.instagram.com/p/B0vuB9rAMJh/
Window Manager
Slide 53
Slide 53 text
画面にフィルターを重ねる
•Lollipopまではこれだけ
•Marshmallow~ +Runtime permissionが必要
val intent = Intent(
Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:$packageName")
)
startActivityForResult(intent, OVERLAY_PERMISSION_REQUEST_CODE)
•Pie~ ManifestのPermission名変更
Slide 54
Slide 54 text
画面にフィルターを重ねる
TYPE_APPLICATION
TYPE_PHONE
TYPE_TOAST
TYPE_SYSTEM_ALERT
KEY_GUARD
STATUS_BAR
TYPE_SYSTEM_OVERLAY
Slide 55
Slide 55 text
画面にフィルターを重ねる
TYPE_APPLICATION
TYPE_PHONE
TYPE_TOAST
KEY_GUARD
STATUS_BAR
TYPE_SYSTEM_OVERLAY
TYPE_APPLICATION_OVERLAY
セキュリティの問題でだめ
TYPE_SYSTEM_ALERT
Slide 56
Slide 56 text
画面にフィルターを重ねる
TYPE_APPLICATION
TYPE_PHONE
TYPE_TOAST
KEY_GUARD
STATUS_BAR
TYPE_SYSTEM_OVERLAY
TYPE_APPLICATION_OVERLAY
TYPE_APPLICATION_OVERLAYに変更
Slide 57
Slide 57 text
画面にフィルターを重ねる
ステータスバーより下に表示される
Slide 58
Slide 58 text
画面にフィルターを重ねる
val view: View = View(this)
view.setBackgroundColor(Color.argb(170, 0, 0, 0))
val params = WindowManager.LayoutParams(
WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY,
WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE or
WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
PixelFormat.TRANSPARENT
)
params.windowAnimations = android.R.style.Animation_Toast
windowManager.addView(view, params)
Slide 59
Slide 59 text
画面にフィルターを重ねる
val view: View = View(this)
view.setBackgroundColor(Color.argb(170, 0, 0, 0))
val params = WindowManager.LayoutParams(
WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY,
WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE or
WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
PixelFormat.TRANSPARENT
)
params.windowAnimations = android.R.style.Animation_Toast
windowManager.addView(view, params)
Layer指定
Slide 60
Slide 60 text
画面にフィルターを重ねる
val view: View = View(this)
view.setBackgroundColor(Color.argb(170, 0, 0, 0))
val params = WindowManager.LayoutParams(
WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.TYPE_SYSTEM_ALERT,
WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE or
WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
PixelFormat.TRANSPARENT
)
params.windowAnimations = android.R.style.Animation_Toast
windowManager.addView(view, params)
8.0以降では落ちる
Slide 61
Slide 61 text
画面にフィルターを重ねる
val view: View = View(this)
view.setBackgroundColor(Color.argb(170, 0, 0, 0))
val params = WindowManager.LayoutParams(
WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY,
WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE or
WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
PixelFormat.TRANSPARENT
)
params.windowAnimations = android.R.style.Animation_Toast
windowManager.addView(view, params)
Flag指定
ContextCompat.checkSelfPermission(this,
Manifest.permission.FOREGROUND_SERVICE)
Slide 62
Slide 62 text
画面にフィルターを重ねる
• FLAG_NOT_TOUCHABLE
タッチ判定を貫通する。
Messengerアプリみたいなものは設定していない
• FLAG_NOT_FOCUSABLE
フォーカスをあてない
設定しないとフォーカスが当たるのでBackボタンのイベントが取られる
• FLAG_LAYOUT_IN_SCREEN
StatusBar部分も重ねる
https://developer.android.com/reference/android/view/WindowManager.LayoutParams
Slide 63
Slide 63 text
画面に重ねる
動画だとPIPという選択肢もある
Oreo以前はWindowMangerに描画していた
https://play.google.com/store/apps/details?id=jp.co.cyberagent.valencia
Slide 64
Slide 64 text
いろいろやったリスト
• QuickSettingsTiles(通知エリアのタイルボタン)
• Palette
• WindowManager
• バックグラウンド
• SharedElement
• Transition animation(Explode, 角丸ピッ)
• WindowInsets
• AnimatedVectorDrawable
• BottomAppBar
• ViewPager2 (Infinity Loop, ひょっこりはん)
Slide 65
Slide 65 text
https://www.instagram.com/p/B3rzRAGAfqi/
Background
Slide 66
Slide 66 text
バックグラウンド
•Oreo(26)まではこれだけ
startForeground(1, notification)
•Pie~
startForeground(1, notification)
Slide 67
Slide 67 text
バックグラウンド
•Oreo(26)まではこれだけ
startForeground(1, notification)
•Pie~
startForeground(1, notification) 5秒以内に呼ぶ
Slide 68
Slide 68 text
• アプリのウィンドウが、フォアグラウンドのアクティビティであるなど、画面上に表示されている。
• アプリのアクティビティが、フォアグラウンド タスクのバック スタックにある。
• アプリのアクティビティが、最近使ったアプリ画面の既存タスクのバックスタックにある。
• ごく最近開始した、このアプリのアクティビティがある。
• ごく最近、このアプリがアクティビティで finish() を呼び出した。これは、finish() が呼び出されたときに、このアプリのアクティビティがフォアグラウンドにあった、またはフォアグラウンド タス
クのバック スタックにあった場合のみに適用されます。
• システムによってバインドされたサービスがこのアプリにある。この条件は次のサービスにのみ適用されます（UI の起動が必要となる場合があります）。 AccessibilityService、AutofillService、
CallRedirectionService、HostApduService、InCallService、TileService、VoiceInteractionService、および VrListenerService。
• このアプリには、表示されている別のアプリによってバインドされたサービスがある。バックグラウンドのアプリが正常にアクティビティを開始できるようにするため、そのサービスにバインドされ
ているアプリは表示されたままでなければなりません。
• このアプリがシステムから通知 PendingIntent を受信している。サービスやブロードキャスト受信プログラムのインテントが保留中の場合は、保留中のインテントが送信されてから数秒間アプリは
アクティビティを開始できます。
• 表示されている別のアプリから送信された PendingIntent をこのアプリが受信している。
• アプリがシステム ブロードキャストを受信し、そのための UI を起動することになっている。その例として、ACTION_NEW_OUTGOING_CALL と SECRET_CODE_ACTION があります。アプリは、ブ
ロードキャストが送信されてから数秒間はアクティビティを開始できます。
• アプリが CompanionDeviceManager API によって付属ハードウェア端末に関連付けられている。この API により、アプリはペア設定した端末でユーザーが実行するアクションに反応して、アクティ
ビティを開始できます。
• アプリが端末所有者モードで実行されている端末ポリシー コントローラである。使用例には、完全管理対象エンタープライズ端末だけでなく、デジタル サイネージやキオスクなどの専用端末も含ま
れています。
• ユーザーによってアプリに SYSTEM_ALERT_WINDOW パーミッションが付与されている。
バックグラウンドからの起動条件
https://developer.android.com/guide/components/activities/background-starts
Slide 69
Slide 69 text
•アプリのウィンドウが、フォアグラウンドのアクティビティであるなど、画面上に表示されている。
•アプリのアクティビティが、フォアグラウンド タスクのバック スタックにある。
•アプリのアクティビティが、最近使ったアプリ画面の既存タスクのバックスタックにある。
•ごく最近開始した、このアプリのアクティビティがある。
•ごく最近、このアプリがアクティビティで finish() を呼び出した。これは、finish() が呼び出されたと
きに、このアプリのアクティビティがフォアグラウンドにあった、またはフォアグラウンド タスクの
バック スタックにあった場合のみに適用されます。
•システムによってバインドされたサービスがこのアプリにある。この条件は次のサービスにのみ適用さ
れます（UI の起動が必要となる場合があります）。 AccessibilityService、AutofillService、
CallRedirectionService、HostApduService、InCallService、TileService、VoiceInteractionService、
および VrListenerService。
バックグラウンドからの起動条件
Slide 70
Slide 70 text
•システムによってバインドされたサービスがこのアプリにある。この条件は次のサービスにのみ適用さ
れます（UI の起動が必要となる場合があります）。 AccessibilityService、AutofillService、
CallRedirectionService、HostApduService、InCallService、TileService、VoiceInteractionService、
および VrListenerService。
•このアプリには、表示されている別のアプリによってバインドされたサービスがある。バックグラウン
ドのアプリが正常にアクティビティを開始できるようにするため、そのサービスにバインドされている
アプリは表示されたままでなければなりません。
•このアプリがシステムから通知 PendingIntent を受信している。サービスやブロードキャスト受信プロ
グラムのインテントが保留中の場合は、保留中のインテントが送信されてから数秒間アプリはアクティ
ビティを開始できます。
•表示されている別のアプリから送信された PendingIntent をこのアプリが受信している。
•アプリがシステム ブロードキャストを受信し、そのための UI を起動することになっている。その例と
して、ACTION_NEW_OUTGOING_CALL と SECRET_CODE_ACTION があります。アプリは、ブロード
キャストが送信されてから数秒間はアクティビティを開始できます。
バックグラウンドからの起動条件
https://developer.android.com/guide/components/activities/background-starts
Slide 71
Slide 71 text
Shared Element
To fragment
using the navigation
https://www.instagram.com/p/B4-JtNegAZp/
Slide 72
Slide 72 text
Shared Element
FragmentのTransitionは
正直しんどかったけど
Navigationによって(少し)楽になった！
x0.5倍速
Slide 73
Slide 73 text
Shared Element
navigation.xml
Slide 74
Slide 74 text
xmlns:app="http://schemas.android.com/apk/res-auto"
app:startDestination="@id/navigationMainFragment"
>
Shared Element
navigation.xml
Slide 75
Slide 75 text
Shared Element
ViewCompat.setTransitionName(containerLayout, TRANSITION_KEY_CONTAINER)
ViewCompat.setTransitionName(previewImage, TRANSITION_KEY_IMAGE)
ViewCompat.setTransitionName(titleText, TRANSITION_KEY_TITLE)
findNavController().navigate(
R.id.navigationHogeFragment,
HogeFragmentArgs(hogeArgs1, hogeArgs2).toBundle(),
null,
FragmentNavigatorExtras(
containerLayout to containerLayout.transitionName,
previewImage to previewImage.transitionName,
titleText to titleText.transitionName
)
)
遷移元
Slide 76
Slide 76 text
Shared Element
ViewCompat.setTransitionName(containerLayout, TRANSITION_KEY_CONTAINER)
ViewCompat.setTransitionName(previewImage, TRANSITION_KEY_IMAGE)
ViewCompat.setTransitionName(titleText, TRANSITION_KEY_TITLE)
findNavController().navigate(
R.id.navigationHogeFragment,
HogeFragmentArgs(hogeArgs1, hogeArgs2).toBundle(),
null,
FragmentNavigatorExtras(
containerLayout to containerLayout.transitionName,
previewImage to previewImage.transitionName,
titleText to titleText.transitionName
)
)
いつも通りKeyをセット(xmlでも良い)
遷移元
Slide 77
Slide 77 text
Shared Element
findNavController().navigate(
R.id.navigationHogeFragment,
HogeFragmentArgs(hogeArgs1, hogeArgs2).toBundle(),
null,
FragmentNavigatorExtras(
containerLayout to containerLayout.transitionName,
previewImage to previewImage.transitionName,
titleText to titleText.transitionName
)
)
Destination Id
遷移元
Slide 78
Slide 78 text
Shared Element
findNavController().navigate(
R.id.navigationHogeFragment,
HogeFragmentArgs(hogeArgs1, hogeArgs2).toBundle(),
null,
FragmentNavigatorExtras(
containerLayout to containerLayout.transitionName,
previewImage to previewImage.transitionName,
titleText to titleText.transitionName
)
)
Safe args
遷移元
Slide 79
Slide 79 text
Shared Element
findNavController().navigate(
R.id.navigationHogeFragment,
HogeFragmentArgs(hogeArgs1, hogeArgs2).toBundle(),
null,
FragmentNavigatorExtras(
containerLayout to containerLayout.transitionName,
previewImage to previewImage.transitionName,
titleText to titleText.transitionName
)
)
NavOptions
遷移元
Slide 80
Slide 80 text
Shared Element
findNavController().navigate(
R.id.navigationHogeFragment,
HogeFragmentArgs(hogeArgs1, hogeArgs2).toBundle(),
null,
FragmentNavigatorExtras(
containerLayout to containerLayout.transitionName,
previewImage to previewImage.transitionName,
titleText to titleText.transitionName
)
)
ここ大事！
今まで通りTransition nameを設定する 遷移元
Slide 81
Slide 81 text
Shared Element
遷移先
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
ViewCompat.setTransitionName(destContainerLayout, TRANSITION_KEY_CONTAINER)
ViewCompat.setTransitionName(destPreviewImage, TRANSITION_KEY_IMAGE)
ViewCompat.setTransitionName(destTitleText, TRANSITION_KEY_TITLE)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
sharedElementEnterTransition = TransitionSet()
sharedElementReturnTransition = TransitionSet()
}
Slide 82
Slide 82 text
Shared Element
遷移先
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
ViewCompat.setTransitionName(destContainerLayout, TRANSITION_KEY_CONTAINER)
ViewCompat.setTransitionName(destPreviewImage, TRANSITION_KEY_IMAGE)
ViewCompat.setTransitionName(destTitleText, TRANSITION_KEY_TITLE)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
sharedElementEnterTransition = TransitionSet()
sharedElementReturnTransition = TransitionSet()
}
onCreateで設定
カスタムTransitionにしたい場合はここを変更する
Slide 83
Slide 83 text
sharedElementEnterTransition = TransitionSet()
sharedElementReturnTransition = TransitionSet()
}
Shared Element
遷移先
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
ViewCompat.setTransitionName(destContainerLayout, TRANSITION_KEY_CONTAINER
ViewCompat.setTransitionName(destPreviewImage, TRANSITION_KEY_IMAGE)
ViewCompat.setTransitionName(destTitleText, TRANSITION_KEY_TITLE)
}
いつも通りKeyをセット(xmlでも良い)
Slide 84
Slide 84 text
sharedElementEnterTransition = TransitionSet()
sharedElementReturnTransition = TransitionSet()
}
Shared Element
遷移先
override fun onViewCreated(view: View, savedInstanceState: Bundle?)
postponeEnterTransition()
destContainerLayout.doOnPreDraw {
startPostponedEnterTransition()
}
ViewCompat.setTransitionName(destContainerLayout, TRANSITION_KEY_C
ViewCompat.setTransitionName(destPreviewImage, TRANSITION_KEY_IMAG
ViewCompat.setTransitionName(destTitleText, TRANSITION_KEY_TITLE)
}
RecyclerViewとかを使っていると動かない時がある
描画まで待つ
Slide 85
Slide 85 text
sharedElementEnterTransition = TransitionSet()
sharedElementReturnTransition = TransitionSet()
}
Shared Element
遷移先
override fun onViewCreated(view: View, savedInstanceState: Bundle?)
postponeEnterTransition()
destContainerLayout.doOnPreDraw {
startPostponedEnterTransition()
}
ViewCompat.setTransitionName(destContainerLayout, TRANSITION_KEY_C
ViewCompat.setTransitionName(destPreviewImage, TRANSITION_KEY_IMAG
ViewCompat.setTransitionName(destTitleText, TRANSITION_KEY_TITLE)
}
描画されたらTransition開始
Slide 86
Slide 86 text
Transition Animation
https://www.instagram.com/p/B4IC2J8gYnI/
Slide 87
Slide 87 text
Transition Animation
• Radiusがかかったアイテムから
かかっていないアイテムへの遷移で
角丸がピッってなる問題
• 背景、両サイドのアイテムが
外側に逃げていく
Slide 88
Slide 88 text
Transition Animation
遷移先
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
sharedElementEnterTransition = TransitionSet()
sharedElementReturnTransition = TransitionSet()
}
ここをカスタムしていく
Slide 89
Slide 89 text
Transition Animation
https://speakerdeck.com/magiepooh/jin-sarajiao-wan-falsetransition
Slide 90
Slide 90 text
Transition Animation
https://github.com/android/animation-samples/tree/master/Motion
Explode animationは
Googleのanimation-samplesにある
Motionがわかりやすい
Slide 91
Slide 91 text
Transition Animation
private fun createSharedElementTransition(duration: Long): Transition {
return transitionTogether {
this.duration = duration
interpolator = FAST_OUT_SLOW_IN
this += SharedFade()
this += ChangeImageTransform()
this += ChangeBounds()
this += ChangeTransform()
}
}
operator fun TransitionSet.plusAssign(transition: Transition) {
addTransition(transition)
}
Slide 92
Slide 92 text
Transition Animation
private fun createSharedElementTransition(duration: Long): Transition {
return transitionTogether {
this.duration = duration
interpolator = FAST_OUT_SLOW_IN
this += SharedFade()
this += ChangeImageTransform()
this += ChangeBounds()
this += ChangeTransform()
}
}
operator fun TransitionSet.plusAssign(transition: Transition) {
addTransition(transition)
}
custom operator
Slide 93
Slide 93 text
Transition Animation
private fun createSharedElementTransition(duration: Long): Transition {
return transitionTogether {
this.duration = duration
interpolator = FAST_OUT_SLOW_IN
this += SharedFade()
this += ChangeImageTransform()
this += ChangeBounds()
this += ChangeTransform()
}
}
operator fun TransitionSet.plusAssign(transition: Transition) {
addTransition(transition)
}
こんな感じで書ける
Slide 94
Slide 94 text
private fun createSharedElementTransition(duration: Long): Transition {
return transitionTogether {
this.duration = duration
interpolator = FAST_OUT_SLOW_IN
addTransition(SharedFade())
addTransition(ChangeImageTransform())
addTransition(ChangeBounds())
addTransition(ChangeTransform())
}
}
Transition Animation
operator fun TransitionSet.plusAssign(transition: Transition) {
addTransition(transition)
}
Slide 95
Slide 95 text
Animated vector
drawable
https://www.instagram.com/p/B4fKculAVwI/
Slide 96
Slide 96 text
Animated Vector Drawable
アプリをちょっとおしゃれに見せる
Vectorなので容量を食わない
Slide 97
Slide 97 text
Animated Vector Drawable
SVGを作ってShape Shifterで編集
https://shapeshifter.design/
Slide 98
Slide 98 text
https://www.instagram.com/p/B3SBtgag64W/
View Pager2
Slide 99
Slide 99 text
View Pager2 (Loop)
class MyAdapter(
private val itemData: List
) : RecyclerView.Adapter() {
override fun getItemCount(): Int = Int.MAX_VALUE
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int)
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
val data = itemData[position % itemData.size]
...
}
}
RecyclerAdapter
Slide 100
Slide 100 text
View Pager2 (Loop)
class MyAdapter(
private val itemData: List
) : RecyclerView.Adapter() {
override fun getItemCount(): Int = Int.MAX_VALUE
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int)
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
val data = itemData[position % itemData.size]
...
}
}
Maxにする
RecyclerAdapter
Slide 101
Slide 101 text
View Pager2 (Loop)
class MyAdapter(
private val itemData: List
) : RecyclerView.Adapter() {
override fun getItemCount(): Int = Int.MAX_VALUE
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int)
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
val data = itemData[position % itemData.size]
...
}
}
positionを配列幅でmod
RecyclerAdapter
Slide 102
Slide 102 text
View Pager2 (Loop)
viewPager.also {
it.adapter = adapter
val center = Int.MAX_VALUE / 2
val start = center - (center % items.size)
it.setCurrentItem(start, false)
}
Activitym, Fragment側
Slide 103
Slide 103 text
viewPager.also {
it.adapter = adapter
val center = Int.MAX_VALUE / 2
val start = center - (center % items.size)
it.setCurrentItem(start, false)
}
View Pager2 (Loop)
Activitym, Fragment側
先頭を中心にする
Slide 104
Slide 104 text
viewPager.also {
it.adapter = adapter
val center = Int.MAX_VALUE / 2
val start = center - (center % items.size)
it.setCurrentItem(start, false)
}
View Pager2 (Loop)
Activitym, Fragment側
スワイプの上限
Slide 105
Slide 105 text
View Pager2 (ひょっこりはん)
左右にチラ見せするやつ
みんな大好きカルーセル
(とりあえずいい感じに情報を見せたい時に
使われがちなところがある)
Slide 106
Slide 106 text
View Pager2 (ひょっこりはん)
4dp
64dp
68dp
Slide 107
Slide 107 text
/>
View Pager2 (ひょっこりはん)
4dp
64dp
68dp
Slide 108
Slide 108 text
android:orientation="horizontal"
/>
View Pager2 (ひょっこりはん)
4dp
64dp
68dp
Slide 109
Slide 109 text
android:orientation="horizontal"
/>
View Pager2 (ひょっこりはん)
4dp
64dp
68dp
margin + offset
Slide 110
Slide 110 text
android:orientation="horizontal"
/>
View Pager2 (ひょっこりはん)
4dp
64dp
68dp
Slide 111
Slide 111 text
viewpager.offscreenPageLimit = 2
val pageMarginPx = resources.getDimensionPixelOffset(R.dimen.page_margin)
val offsetPx = resources.getDimensionPixelOffset(R.dimen.page_offset)
viewpager.setPageTransformer(CompositePageTransformer().apply {
addTransformer { page, position ->
val offset = position * (2 * offsetPx + pageMarginPx)
page.translationX = -offset
val scale = 1 - (abs(position) / 6)
page.scaleX = scale
page.scaleY = scale
}
})
android:orientation="horizontal"
/>
View Pager2 (ひょっこりはん)
Slide 112
Slide 112 text
viewpager.offscreenPageLimit = 2
val pageMarginPx = resources.getDimensionPixelOffset(R.dimen.page_margin)
val offsetPx = resources.getDimensionPixelOffset(R.dimen.page_offset)
viewpager.setPageTransformer(CompositePageTransformer().apply {
addTransformer { page, position ->
val offset = position * (2 * offsetPx + pageMarginPx)
page.translationX = -offset
val scale = 1 - (abs(position) / 6)
page.scaleX = scale
page.scaleY = scale
}
})
android:orientation="horizontal"
/>
View Pager2 (ひょっこりはん)
左右のアイテム描画
Slide 113
Slide 113 text
viewpager.offscreenPageLimit = 2
val pageMarginPx = resources.getDimensionPixelOffset(R.dimen.page_margin)
val offsetPx = resources.getDimensionPixelOffset(R.dimen.page_offset)
viewpager.setPageTransformer(CompositePageTransformer().apply {
addTransformer { page, position ->
val offset = position * (2 * offsetPx + pageMarginPx)
page.translationX = -offset
val scale = 1 - (abs(position) / 6)
page.scaleX = scale
page.scaleY = scale
}
})
android:orientation="horizontal"
/>
View Pager2 (ひょっこりはん)
Swipe時のアニメーションを自由に作れる
Slide 114
Slide 114 text
View Pager2
https://satoshun.github.io/2019/10/viewpager2-loop/
https://satoshun.github.io/2019/08/viewpager2-like-a-carousel/
Slide 115
Slide 115 text
Window Insets
https://www.instagram.com/p/B1bZtyEHHG8/
Slide 116
Slide 116 text
WindowInsets
https://github.com/chrisbanes/insetter
Insetter使っておけばおｋ 結構楽に出来るようになった
Slide 117
Slide 117 text
WindowInsets
https://github.com/chrisbanes/insetter
Insetter使っておけばおｋ 結構楽に出来るようになった
WindowInsetsは4系を切るだけでDXが全然違う@A
Slide 118
Slide 118 text
Bottom app bar
https://www.instagram.com/p/B0_RDbaAQ6D/
Slide 119
Slide 119 text
Bottom app bar
去年ぐらいにマテリアルデザインに
追加されたToolbarの下バージョン
FabがBottomAppBarに食い込む
Slide 120
Slide 120 text
Bottom app bar
•Bottom App Bar
•Bottom Navigation View
Slide 121
Slide 121 text
Bottom app bar
•Bottom App Bar
•Bottom Navigation View
xmlでアイコンセット出来る
Slide 122
Slide 122 text
Bottom app bar
•Bottom App Bar
•Bottom Navigation View
fabを食い込ませる
Slide 123
Slide 123 text
Bottom app bar
•Bottom App Bar
•Bottom Navigation View
endにすると端にずらせる(startは不可)
Slide 124
Slide 124 text
Bottom app bar
Slide 125
Slide 125 text
Bottom app bar
fabをBottomAppBarに紐付ける
Slide 126
Slide 126 text
Bottom app bar
• 最近のマテってるデザインは
下から出てきがち
• Android10からのジェスチャーとの
コンフリクトの影響だと思ってる
Slide 127
Slide 127 text
class MyBottomSheetFragment : BottomSheetDialogFragment() {
companion object {
fun newInstance(): BottomSheetNavigationFragment =
BottomSheetNavigationFragment()
}
...
}
Bottom app bar
bottomBar.setNavigationOnClickListener {
MyBottomSheetFragment.newInstance()
.show(supportFragmentManager, TAG_BOTTOM_SHEET)
}
MyBottomSheetFragment.kt
MainActivity.kt
Slide 128
Slide 128 text
class MyBottomSheetFragment : BottomSheetDialogFragment() {
companion object {
fun newInstance(): BottomSheetNavigationFragment =
BottomSheetNavigationFragment()
}
...
}
Bottom app bar
bottomBar.setNavigationOnClickListener {
MyBottomSheetFragment.newInstance()
.show(supportFragmentManager, TAG_BOTTOM_SHEET)
}
MyBottomSheetFragment.kt
MainActivity.kt
これだけで呼び出せる
Slide 129
Slide 129 text
https://www.instagram.com/p/B2HUrCxg12g/
Summary
Slide 130
Slide 130 text
まとめ
• 今でも結構ハマることはたくさんある
全部覚えてない
• 昔と比べて便利になったなー
•
久々にアプリ作って楽しかった
やっていきB