Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
WebView+ViewGroupを実現するAOSPメールアプリの内部実装とニュースアプリへの応用 / DroidKaigi2019
ogapants
February 07, 2019
Technology
3
2.8k
WebView+ViewGroupを実現するAOSPメールアプリの内部実装とニュースアプリへの応用 / DroidKaigi2019
https://droidkaigi.jp/2019/timetable/70923
ogapants
February 07, 2019
Tweet
Share
More Decks by ogapants
See All by ogapants
5分でわかるWebView+ViewGroupを実現するAOSPメールアプリの内部実装と ニュースアプリへの応用 / Otemachi.apk02
ogapants
0
640
ScrollViewで 読了計測した話
ogapants
0
590
「AndroidはiOSと同じデザインで!」と言われたときのTips
ogapants
17
8k
たのしいAndroidかいはつ
ogapants
0
140
Fabric Digitsで始めるSMS認証
ogapants
1
950
MediaController をカスタマイズするぞ
ogapants
0
2.3k
Other Decks in Technology
See All in Technology
Virtual Thread - 導入の背景と、効果的な使い方 -
skrb
3
240
LINEにおけるネットワーク自動化チーム / Network Automation Team in LINE
line_developers
PRO
0
220
PHPのimmutable arrayとは
hnw
1
130
ROS_Japan_UG_#49_LT
maeharakeisuke
0
190
2023年は何する宣言
shigeruoda
0
230
テクニカルライターよ概念図を描くのです 〜テクニカルライターのためのイラストテクニック2〜 / cybozu illust technique2
yuki_kondo
13
3.6k
lt53
98_justdoit
0
110
WebLogic Server for OCI 概要
oracle4engineer
PRO
3
830
SPA・SSGでSSRのようなOGP対応!
simo123
2
130
The Stable Team - 機能する安定したチームをつくる - / The Stable Team
takaking22
14
7.5k
速習 Machine Learning Lens
asei
1
410
Deep dive in Reserved Instance ~脳死推奨量購入からの脱却~
kzkmaeda
0
130
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
299
110k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
128
8.8k
Into the Great Unknown - MozCon
thekraken
2
280
How to train your dragon (web standard)
notwaldorf
66
4.2k
Embracing the Ebb and Flow
colly
75
3.6k
Side Projects
sachag
451
37k
Scaling GitHub
holman
453
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
Git: the NoSQL Database
bkeepers
PRO
418
60k
Art, The Web, and Tiny UX
lynnandtonic
284
18k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
KATA
mclloyd
12
9.7k
Transcript
WebView+ViewGroupΛ࣮ݱ ͢ΔAOSPϝʔϧΞϓϦͷ෦ ࣮ͱχϡʔεΞϓϦͷԠ༻ 2019/02/08 DroidKaigi @ogapants
ࣗݾհ • ͓͕ͺΜ@ogapants • ຊܦࡁ৽ฉࣾ • ٕज़ॻయͰνʔϜվળͱAndroidStudioͷ Tipsʹ͍ͭͯॻ͖·ͨ͠ɻnoteͰݟΕ·͢ʂ https://goo.gl/AWv7v1
WebView+ViewGroupΛ࣮ݱ ͢ΔAOSPϝʔϧΞϓϦͷ෦ ࣮ͱχϡʔεΞϓϦͷԠ༻
͍͖ͳΓͰ͕͢ • ͜͏͍͏ߏͷը໘ɺͲ͏ͬͯ εΫϩʔϧͤ͞·͔͢ʁ TextView WebView Image View Text View
TextView
͍͖ͳΓͰ͕͢ • ScrollViewͰ ғͬͪΌ͍·ͤΜ͔ʁ TextView WebView Image View Text View
TextView ScrollView?
• ScrollViewͰWebViewΛғ͍͚ͬͯ·ͤΜ • ғ͏ͱͲ͏ͳΔͷʁ • ͡Ό͋Ͳ͏͢Ε͍͍ͷʁ
͜ͷൃදͰ͢͜ͱ • ͳͥScrollViewͰWebViewΛғ͏ͷ͕Α͘ͳ͍͔ • AOSPϝʔϧͰWebViewͲ͏ΘΕ͍ͯΔͷ͔ • Ͳ͏Ԡ༻ͨ͠ͷ͔
AOSPϝʔϧΞϓϦͱ
AOSPͱ • Android Open Source Project • ࣗ༝ʹӾཡɺ࠶ར༻͕Մೳ • OSपลͷใɺ։ൃπʔϧɺαϯϓϧΞϓϦͳͲఏڙ
• ϒϥβిɺΪϟϥϦʔΞϓϦͳͲ
AOSPϝʔϧΞϓϦͱ
AOSPϝʔϧΞϓϦͱ • AOSPʹ্͕ͬͯΔϝʔϧΞϓϦ • 2014͝Ζ·ͰҰ෦ͰϓϦΠϯετʔϧ • ࠓճϝʔϧৄࡉը໘ͷ • ·ͩΞοϓσʔτ͞Ε͍ͯΔ
AOSPϝʔϧΞϓϦϦϙδτϦ • ΞΧϯτपΓ https://android.googlesource.com/platform/packages/ apps/Email/ • ϝΠϯػೳ https://android.googlesource.com/platform/packages/ apps/UnifiedEmail/
AOSPϝʔϧΞϓϦϦϙδτϦ • ͲͪΒEclipseͷϑΝΠϧߏ • Γͳ͍ίϯϙʔωϯτଟ
ඇެࣜAOSPϝʔϧΞϓϦ • https://github.com/jinkg/YalinEmail • ඞཁͳίϯϙʔωϯτ܈ΛαϒϞδϡʔϧԽ͍ͯ͠Δ • AndroidStudioͰϏϧυͰ͖ΔΑ͏ʹͨ͠ඇެࣜΞϓϦ
[ิ]jinkg/YalinEmail modules • app... https://android.googlesource.com/platform/packages/apps/ Email/ • android-bitmap... https://android.googlesource.com/platform/ frameworks/opt/bitmap/
• android-chips... https://android.googlesource.com/platform/ frameworks/opt/chips/ • android-common... https://android.googlesource.com/platform/ frameworks/ex/+/master/common/
[ิ]jinkg/YalinEmail modules • android-emailcommon... https://android.googlesource.com/ platform/packages/apps/Email/+/master/emailcommon/ • android-photoviewer... https://android.googlesource.com/ platform/frameworks/opt/photoviewer/
• android-unifiedemail... https://android.googlesource.com/ platform/packages/apps/UnifiedEmail/
෦࣮Λ͏ܦҢ
͜Ε·Ͱͷݸผهࣄը໘ͷߏ TextView WebView Image View Text View TextView ScrollView ϔομʔViewGroupɿهࣄͷλΠτϧͳͲ
ίϯςϯπWebViewɿهࣄ༰ ϑολʔViewGroupɿؔ࿈هࣄͳͲ
࣮ࡍʹى͖ͨ
࣮ࡍʹى͖ͨᶃ • Ұ෦ͰසͰ هࣄ͕Εͯදࣔ͞ΕΔ • (WebViewͷΞοϓσʔτ ʹΑͬͯఆղܾ)
࣮ࡍʹى͖ͨᶄ • Ұ෦ͰසͰIllegalStateException >Unable to create layer for WebView •
(Ұ෦ͷϋʔυΣΞΞΫηϥϨʔγϣϯOFF Ͱఆղܾ)
࣮ࡍʹى͖ͨ • ͍ͣΕఆରԠͰ͔͠ͳ͍… • ߃ٱରԠ͘͢GoogleͷΤϯδχΞʹ࣭
࣮ࡍʹى͖ͨ • ScrollViewWebViewΛೖΕΔ͜ͱΛఆͯ͠ ࡞͍ͬͯͳ͍ʂ by GoogleΤϯδχΞ
ߟ͑ͨղܾࡦ
ߟ͑ͨղܾࡦ • WebViewΛΊΔ ˠશͯωΠςΟϒʹ͢Δɹ ˠ Өڹൣғ͕େ͖͘ࠔ
ߟ͑ͨղܾࡦ • WebViewͷΈʹ͢Δɹ ˠViewGroup෦ͷHTMLԽ ˠ ը໘ͷঢ়ଶ͕ଟ͘ࠔ
ߟ͑ͨղܾࡦ • AppBarLayoutͷΈΛར༻͢Δ ˠNestedScrollͰಈ͔͢ ˠ ٕज़తʹࠔ
ߟ͑ͨղܾࡦ • ϝʔϧΞϓϦΛࢀߟʹ͢Δ ˠ WebViewΛ͍ͬͯΔͣ ˠ AOSPΛݟΕ͍͚ͦ͏ʁ ˠ deep dive
ͪͳΈʹ • https://developer.android.com/reference/android/widget/ ScrollView • >Never add a RecyclerView or
ListView to a scroll view. • WebViewʹ͍ͭͯͷهࡌແ͠…
WebView+ViewGroupΛ ࣮ݱ͢ΔAOSPϝʔϧΞϓϦͷ ෦࣮
AOSPϝʔϧΞϓϦͰͷߏ • ֬ೝͨ͠όʔδϣϯ https://android.googlesource.com/platform/ packages/apps/UnifiedEmail/ ͷϦϏδϣϯ `1668ada` •
Ϗϧυڥjinkg/YalinEmail
AOSPϝʔϧΞϓϦͰͷߏ ϔομʔViewGroup ίϯςϯπWebView ϑολʔViewGroup
AOSPϝʔϧΞϓϦͰͷߏ WebView in ScrollView AOSPϝʔϧΞϓϦ WebView ViewGroup ScrollView ViewGroup WebView
ViewGroup ViewGroup
AOSPϝʔϧΞϓϦͰͷߏ • WebViewͰεΫϩʔϧͤ͞Δ • ViewGroup࿈ಈ • ViewGroupͷߴ͞cssͰpadding WebView ViewGroup ViewGroup
padding padding
ϝʔϧඳը·ͰͷྲྀΕ ᶃWebViewʹΦʔόʔϨΠ͍ͤͨ͞ViewGroupΛmeasure()ͯ͠ߴ͞ΛଌΔ ᶄςϯϓϨʔτͷhtmlʹcssͰpaddingΛ͚ͭΔ ᶅςϯϓϨʔτͷhtmlʹϝʔϧͷhtmlจࣈྻΛૠೖ ᶆ߹ͨ͠htmlจࣈྻΛWebViewͰඳը͢Δ ᶇpadding্ʹϔομʔɾϑολʔViewGroupΛlayout()Ͱஔ͢Δ
ϝʔϧඳը·ͰͷྲྀΕᶃ ᶃWebViewʹΦʔόʔϨΠ͍ͤͨ͞ViewGroupΛ ɹmeasure()ͯ͠ߴ͞ΛଌΔ ɹˠmeasure()…ViewͷαΠζΛܭଌ͢Δ ɹˠgetMeasuredHeight()Ͱऔಘ
ᶄςϯϓϨʔτͷhtmlʹcssͰpaddingΛ͚ͭΔ ϝʔϧඳը·ͰͷྲྀΕᶄ template_conversation_upper.html <div … style="height: %spx;”></div> ↓ ViewGroupͷߴ͞ <div
… style="height: 288px;”></div>
ᶅςϯϓϨʔτͷhtmlʹϝʔϧͷhtmlจࣈྻΛૠೖ ϝʔϧඳը·ͰͷྲྀΕᶅ template_message.html <div class=“mail-message-content“>%s</div> ↓ <div class=“mail-message-content“>࣮ࡍͷϝʔϧ༰</div>
ϝʔϧඳը·ͰͷྲྀΕᶆ ᶆ߹ͨ͠htmlจࣈྻΛWebViewͰඳը͢Δ ConversationViewFragment.java mWebView.loadDataWithBaseURL(mBaseUri, convHtml, "text/html", "utf-8", null);
ϝʔϧඳը·ͰͷྲྀΕᶇ ᶇpadding্ʹϔομʔɾϑολʔViewGroupΛ ɹlayout()Ͱஔ͢Δ
࣮ϙΠϯτ
ConversationContainer • ViewGroupΛΦʔόʔϨΠ ͱͯ͠औΓ࣋ͭ • WebViewͱViewGroupͷ Լʹ͍ΔFrameLayoutతଘࡏ WebView ViewGroup ViewGroup
ConversationContainer
ViewGroupͷಈ͔͠ํ • ϔομʔɾϑολʔWebViewͷεΫϩʔϧʹ࿈ಈ͢Δ • ConversationContainer͕ಈ͔͢ • offsetTopAndBottom()ͰsetTransitionY()Ͱͳ͘layout()
λονΠϕϯτ • ConversationContainerͷλονΠϕϯτͦͷ·· WebViewʹͤ͞Δ • ScrollViewͷonInterceptTouchEventΛࢀߟʹͯ͠ ViewGroupͷλονΠϕϯτΛ੍ݶ͍ͯ͠Δ
ViewGroupͷϦαΠΫϧ • ConversationContainerͷViewGroupListViewͷΑ͏ʹ ViewΛഁغɾ࠶ੜ͢ΔϦαΠΫϧͷΈ͕ΘΕ͍ͯΔ
ϔομʔλοϓ࣌ͷಈ͖ • ϔομʔΛλοϓ͢ΔͱɺjavascriptͰcssͷstyle.display Λݺͼɺදࣔ/ඇදࣔΛΓସ͑Δ λοϓ
ඳըͷऴྃͷड͚औΓ • ඳըͷऴྃΛcssͷίʔϧόοΫ(webkitAnimationStart) Ͱड͚औΔ • ओʹProgressBarͷඇදࣔͷͨΊʹ͏
εΫϩʔϧόʔ • WebViewͷεΫϩʔϧόʔ Λ͏ͱViewGroupʹ ӅΕͯ͠·͏ͨΊࣗલͰੜ • android:scrollbars=“vertical” ʹͯ͠Έͨঢ়ଶ→
AOSPϝʔϧΞϓϦ͍͢͝
GmailΞϓϦͱҧ͏ͷʁ
͓ͼ • 1݄ʹGmailͷσβΠϯϦχϡʔΞϧ͕ൃද https://jp.techcrunch.com/ 2019/01/30/2019-01-29-gmail-on-mobile- gets-a-fresh-coat-of-material-design-paint/ • ࠓճൺֱͨ͠όʔδϣϯͦͷલͷ8.12.30 (2019/1/24ߋ৽)
GmailΞϓϦͱͷൺֱ AOSPϝʔϧ Gmail
GmailΞϓϦͱͷൺֱ • ػೳɺࡉ͔͍UIͳͲҧ͏ • ϝʔϧৄࡉը໘ͷߏಉ͡
ϔομʔΦʔόʔϨΠʁ • ԡͯ͠͠ʮͯ͢બʯ
• ϔομʔViewGroup WebView্ʹΦʔόʔϨΠ ͞Εͯͦ͏ ϔομʔΦʔόʔϨΠʁ ͜͜͡Όͳ͍ʂ
ϑολʔΦʔόʔϨΠʁ • ζʔϜΠϯͨ͠ঢ়ଶ
ϑολʔΦʔόʔϨΠʁ • ϑολʔViewGroup WebView্ʹΦʔόʔϨΠ ͞Εͯͦ͏
GmailΞϓϦͱͷൺֱ • WebView্ʹϔομʔɾϑολʔViewGroup ͕ΦʔόʔϨΠ͞Ε͍ͯΔ • AOSPϝʔϧͱಉ͡ߏͷՄೳੑ͕ߴ͍
χϡʔεΞϓϦͷԠ༻
ϓϩμΫτೖ·ͰͷྲྀΕ • ͕ൃੜɺݪҼΛݕূ • AOSPʹࢀߟʹͳΔ࣮͕ͳ͍͔୳͢ • ෦࣮ΛಡΈਐΊΔ • ࠷ݶͰಈ͘ΞϓϦΛ࡞ͬͯݕূ •
ϓϩμΫτʹೖ
ϓϩμΫτೖ • ϑολʔͷΈඞཁͳը໘͔Β࣮ࢪ WebView ϑολʔViewGroup
ࢀߟʹ͠ͳ͔ͬͨͱ͜Ζ
ࢀߟʹ͠ͳ͔ͬͨͱ͜Ζ • ViewͷϦαΠΫϧΛ͍ͯ͠ͳ͍ ˠࠓճͷέʔεͰෆཁ
ࢀߟʹ͠ͳ͔ͬͨͱ͜Ζ • WebViewඳըऴྃͷίʔϧόοΫ DOMContentLoadedΛ͏ ˠૣ͍ɺ؆୯
ࢀߟʹ͠ͳ͔ͬͨͱ͜Ζ • ViewGroupͷҠಈlayout()Ͱͳ͘ ViewCompat.offsetTopAndBottom()Λ༻ ˠίʔυͷ໌֬Խ ˠsetTransitionYΞχϝʔγϣϯ͖
࣮ࡍͲ͏ͩͬͨͷ͔
࠾༻ͯ͠Α͔ͬͨ͜ͱ • ͷରॲ͕Ͱ͖ͨ • ඳը͕एׯૣ͘ͳͬͨ
࠾༻ͯ͠େมͩͬͨ͜ͱ • Մಡੑ͕Լ͕Γɺϝϯςίετ͕૿͑ͨ • ಋೖ͢Δ·Ͱ͕͔͔࣌ؒͬͨ ɾରԠํ๏ͷݕূ࣌ؒ ɾಋೖํ๏ͷݕূ࣌ؒ
ਅࣅ͖͔͢Ͳ͏͔ • ݕ౼ͷ༨͋Δ͕࠾༻ίετߴ͍ • WebView in ScrollViewͷϦεΫΛߟ͑Δ
͠WebView+ViewGroup ͨ͘͠ͳͬͨΒʁ
͠ඞཁʹഭΒΕͨΒ… • WebViewΛΊΔʢ࠷ਪʣ • WebViewͷΈʹ͢Δʢڧ͘ਪʣ • AOSPϝʔϧํࣜΛࢀߟʹ͢Δʢਪʣ
͠ඞཁʹഭΒΕͨΒ… • https://github.com/angebagui/medium-textview/ https://github.com/m7mdra/HtmlRecycler ͷϥΠϒϥϦΛͬͯΈΔʢرʣ • ৽͍͠ΓํΛߟ͑Δʢେ݀ʣ • ScrollViewʹWebViewΛೖΕΔʢඇਪʣ
αϯϓϧΞϓϦ
αϯϓϧΞϓϦ • https://github.com/ogapants/WebViewWithViewGroup • ̎ͭͷํ๏ͰWebView+ButtonΛ࣮ݱ - WebView in ScrollView
- WebView only
αϯϓϧΞϓϦཁ݅ • 1͔Β260·Ͱදࣔ͢ΔHTML • WebViewͷ্ԼʹButton • શମΛεΫϩʔϧͰ͖Δ WebView
Button Button 1 2 3 … 258 259 260
ํ๏ᶃ WebView in ScrollView
WebView in ScrollView • ్தͰΕΔ • <ScrollView> <LinerLayout> ɹɹɹ<Button> <WebView>
<Button> </LinerLayout> <ScrollView>
WebView in ScrollView • ࠶ݱΤϛϡϨʔλ Pixel2XLɺNexus6PʢόʔδϣϯدΒͣʣ • ඇ࠶ݱΤϛϡϨʔλ Pixel2ɺNexus5XͳͲʢόʔδϣϯدΒͣʣ •
࣮ػ࠶ݱੑ͕ᐆດ
ํ๏ᶄ WebView only
WebView only • ͳ͘දࣔ͞ΕΔ • <ArticleContainer> <ArticleWebView> <Button> <Button> </ArticleContainer>
WebView only • ArticleContainerͷ࣮ • ϔομʔͱϑολʔΛεΫϩʔϧͤ͞Δ fun dispatchScroll(oldScrollY:
Int, scrollY: Int) { this.offsetY = scrollY val oldScrollYAbs = Math.abs(oldScrollY) val scrollYAbs = Math.abs(scrollY) val offset = oldScrollYAbs - scrollYAbs ViewCompat.offsetTopAndBottom(header, offset) ViewCompat.offsetTopAndBottom(footer, offset) }
WebView only • ςϯϓϨʔτHTMLͷ࣮ <!DOCTYPE html>ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ <html>ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ <script
type="text/javascript">ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ window.addEventListener("DOMContentLoaded", function () {ɹɹɹɹɹɹ var contentHeight = document.getElementById(“content").offsetHeight; window.JS._onDomContentLoaded(contentHeight);ɹɹɹɹɹɹɹɹɹ });ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ </script>
• ςϯϓϨʔτHTMLͷ࣮ WebView only <body> <div id="header-spacer" style="height: %spx;"></div> <div
id="content"> %s </div>ɹɹɹɹɹɹɹɹɹɹɹɹɹ <div id="footer-spacer" style="height: %spx;"></div> </body>ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ </html>ɹɹɹɹɹɹ
͍͞͝ʹ
͓͞Β͍ • WebViewͰεΫϩʔϧͤ͞Δ • ViewGroup࿈ಈ • ViewGroupͷߴ͞cssͰpadding WebView ViewGroup ViewGroup
padding padding
·ͱΊ • AOSPݟͷմͳͷͰ͏·͘ར༻͠Α͏ • AOSPϝʔϧΞϓϦͷϝʔϧৄࡉը໘ͷඳըͷΈ͍͢͝ • ඞཁ࠷ݶͷߏΛ࡞ͬͯ࠶ݱੑΛݟͯɺ࠷ݶͷ࣮ͰΔ͜ͱ Λ֬ೝͯ͠ɺطଘίʔυΛՃຯͭͭ͠ɺϓϩμΫτʹೖ͠Α͏ • ScrollViewͷதʹWebViewΛೖΕΔͷආ͚Α͏
࠾༻ͬͯ·͢ https://s.nikkei.com/s_android