Android의 Window와 WindowInsets에 대해서 알아봅니다. System UI 영역에 우리 앱을 draw하거나 풀스크린 모드로 화면을 구성 할 때, Display Cutout 대응 등 WindowInset이 활용되는 경우와 주의해야 할 점들에 대해 알아봅니다. Google 개발자 Chris Banes가 발표한 Becoming a master window fitters(Droidcon NYC 2017)를 기반으로 준비하였으며, 최신사항을 반영하였습니다.

1. 안드로이드 윈도우
마스터되기
Speaker.안명욱

3. Window 란?
Window Fitting의 필요성
버전별 윈도우 프레임워크
Window Fitting 방식
fitSystemWindows 방식
Manual Handling 방식
잘못 사용한 방식들
WindowInsets 사용하기
Display Cutout
목차

4. Window 란?
Window란?
Window Fit의 필요성
버전별 윈도우 프레임워크
Window Fit 방식
fitSystemWindows 방식
Manual Handling 방식
잘못 사용한 방식들
WindowInsets 사용하기
Display Cutout

9. Window
모든 UI는 윈도우 안에 있음
Key Handling
Window Decor

10. Activity는 Window를 내부적으로 가짐
Activity#getWindow()
Window

11. Dialog도 Window를 가짐
Dialog#getWindow()
Window

14. Window Fitting의 필요성
Window란?
Window Fit의 필요성
버전별 윈도우 프레임워크
Window Fit 방식
fitSystemWindows 방식
Manual Handling 방식
잘못 사용한 방식들
WindowInsets 사용하기
Display Cutout

20. 우리가 원하는 레이아웃을 구성하기 위하여,
윈도우와 우리 뷰를 적절히 설정하기
Window Fitting
창틀에 유리 끼우기

21. 버전별 Window의 변
화 Window란?
Window Fit의 필요성
버전별 윈도우 프레임워크
Window Fit 방식
fitSystemWindows 방식
Manual Handling 방식
잘못 사용한 방식들
WindowInsets 사용하기
Display Cutout

22. Jelly Bean과 그 이전 세대

23. Window는 시스템바들 사이에 위치
Jelly Bean과 그 이전 세대
setSystemUiVisiblity()

24. SYSTEM_UI_FLAG_LOW_PROFILE
SYSTEM_UI_FLAG_HIDE_NAVIGATION
SYSTEM_UI_FLAG_FULLSCREEN
SYSTEM_UI_FLAG_VISIBLE
SYSTEM_UI_FLAG_IMMERSIVE_STICKY
SYSTEM_UI_FLAG_IMMERSIVE
SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
SYSTEM_UI_FLAG_LAYOUT_STABLE
SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

25. SYSTEM_UI_FLAG_LOW_PROFILE
SYSTEM_UI_FLAG_HIDE_NAVIGATION
SYSTEM_UI_FLAG_FULLSCREEN
SYSTEM_UI_FLAG_VISIBLE
SYSTEM_UI_FLAG_IMMERSIVE_STICKY
SYSTEM_UI_FLAG_IMMERSIVE
SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR
SYSTEM_UI_FLAG_LAYOUT_STABLE
SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

26. View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
Window Transform Flags(윈도우 변환 플래그)
WTF

27. myView.systemUiVisiblity =
View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

28. KitKat

29. KitKat
반투명 시스템 바
내부적으로 WTF가 사용됨

30. Lollipop

31. Lollipop
android:windowDrawsSystemBarBackgrounds
시스템바 백그라운드가
우리 윈도우 안에 위치 함

33. android:navigationBarColor
getWindow().setNavigationBarColor()

34. android:statusBarColor
getWindow().setStatusBarColor()

35. Lollipop
반투명 시스템 바
android:windowTranslucentStatus=“true”
android:windowTranslucentNavigation=“true”
어떤 커스텀 컬러보다 우선시 함
windowDrawsSystemBarBackgrounds
를 비활성하게 됨

36. Window Fit 방식
: fitSystemWindowsWindow란?
Window Fit의 필요성
버전별 윈도우 프레임워크
Window Fit 방식
fitSystemWindows 방식
Manual Handling 방식
잘못 사용한 방식들
WindowInsets 사용하기
Display Cutout

37. android:fitSystemWindows=“true"
View.java의 기본동작:
Padding을 추가하여 Insets 안으로
Child View들를 이동시킨다.

39. android:fitSystemWindows=“true"

40. systemUiVisibility =
View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
android:fitSystemWindows=“true"

41. Padding
Padding
systemUiVisibility =
View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
android:fitSystemWindows=“true"

42. android:fitSystemWindows=“true"
systemUiVisibility =
View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

43. android:fitSystemWindows=“true"
DrawerLayout
CoordinatorLayout
AppBarLayout
CollapsingToolbarLayout
View는 Padding을 추가하여 Child View를
Inset 안으로 이동시킨다.
몇몇 View Class에서는 다르게 동작한다.

44. DrawerLayout
API 21+에서는 WTF를 설정해줌
android:fitSystemWindows=“true"

47. DrawerLayout
fitSystemWindows를
자식뷰들로부터의 신호로 사용
API 21+에서는 WTF를 설정해줌
android:fitSystemWindows=“true"

54. android:fitSystemWindows=“true"
DrawerLayout
CoordinatorLayout
AppBarLayout
CollapsingToolbarLayout
일반적으로는 View에 Padding을 추가하여 Child View를
Inset 안으로 이동시켜, 시스템UI와 겹치지 않도록 해준다.
몇몇 View Class에서는 fitSystemWindows를 오버라이
드 하여 다른 동작을 한다.
WTF를 자동으로 설정하여,시스템
UI 뒷편으로 Draw가 가능하게 해준
다.
자식뷰에서는 부모뷰따라 확장하기 위
한 신호로 사용된다.

55. Window Fit 방식
: Manual HandlingWindow란?
Window Fit의 필요성
버전별 윈도우 프레임워크
Window Fit 방식
fitSystemWindows 방식
Manual Handling 방식
잘못 사용한 방식들
WindowInsets 사용하기
Display Cutout

56. Window Manual Fit
: 잘못 사용한 방식들Window란?
Window Fit의 필요성
버전별 윈도우 프레임워크
Window Fit 방식
fitSystemWindows 방식
Manual Handling 방식
잘못 사용한 방식들
WindowInsets 사용하기
Display Cutout

57. Status bar의 높이값을 임의로 지정하기

58. Status bar의 사이드가 변경된다면?

60. Status bar 사이즈가 다른 디바이스에서
는?

61. 24dp
48dp

62. Internal system resource 값에서 가져
오기

63. frameworks/base/core/res/values/dimens.xml

65. Internal resource의 이름이 변경된다
면?

67. Status bar뒷편의 draw를
막는 디바이스가 있다면?

70. Window Manual Fit
: WindowInsets을 사용하자Window란?
Window Fit의 필요성
버전별 윈도우 프레임워크
Window Fit 방식
fitSystemWindows 방식
Manual Handling 방식
잘못 사용한 방식들
WindowInsets 사용하기
Display Cutout

71. 안드로이드 시스템에서
시스템 UI가 어디에 위치해있는지,
혹은 나중에 보여지게 될지를 안내해주는 역
할
WindowInsets

72. getSystemWindowInsetLeft()
getSystemWindowInsetTop()
getSystemWindowInsetRight()
getSystemWindowInsetBottom()
getDisplayCutout()
WindowInsetsCompat

73. getSystemWindowInsetLeft()
getSystemWindowInsetTop()
getSystemWindowInsetRight()
getSystemWindowInsetBottom()
0
74
0
126

74. Left()
Top()
Right()
Bottom()
0
74
126
0

78. WindowInsets은 완전히
소비(Consume) 될때까지 전달
된다.

79. Window Decor
LinearLayout
Child Child
dispatchApplyWindowInsets()

80. Window Decor
LinearLayout
Child Child
dispatchApplyWindowInsets()
0
63
0
126
Left :
Top :
Right :
Bottom :
onApplyWindowInsets()

81. LinearLayout
Window Decor
Child Child
0
0
0
126
Left :
Top :
Right :
Bottom :
onApplyWindowInsets()
consumeSystemWindowInsets
(left, top, right, bottom)
WindowInsets.isConsumed()
false
0
63
0
126

82. LinearLayout
Child
Window Decor
Child
0
0
0
126
Left :
Top :
Right :
Bottom :
dispatchApplyWindowInsets()
onApplyWindowInsets()
WindowInsets.isConsumed()
false

83. Child
Window Decor
0
0
0
Left :
Top :
Right :
Bottom :
dispatchApplyWindowInsets()
onApplyWindowInsets()
WindowInsets.isConsumed()
true
1260
Child
LinearLayout
consumeSystemWindowInsets
(left, top, right, bottom)

84. Display Cutout
Window란?
Window Fit의 필요성
버전별 윈도우 프레임워크
Window Fit 방식
fitSystemWindows 방식
Manual Handling 방식
잘못 사용한 방식들
WindowInsets 사용하기
Display Cutout

86. android:windowLayoutInDisplayCutoutMode
never | default | shortEdges
window.attributes.layoutInDisplayCutoutMode =
LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT
LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES

87. NEVER
윈도우는 DisplayCutout 영역에
절대로 오버래핑하지 못함

88. DEFAULT
윈도우가 DisplayCutout 영역까지 확장 허용
단, DisplayCutout이 System bar 영역에
완전히 포함되어 있는 경우에만

89. DEFAULT
윈도우가 DisplayCutout 영역까지 확장 허용
단, DisplayCutout이 System bar 영역에
완전히 포함되어 있는 경우에만
Landscape 모드에서는 letterbox 발생

90. SHORTEDGES
윈도우가 Cutout 영역으로 확장하는 것을
항상 허용
우리 앱의 Content의 중요한 부분이
Cutout 영역과 겹지 않도록 하는 것은
개발자의 몫

91. getSafeInsetLeft()
getSafeInsetTop()
getSafeInsetRight()
getSafeInsetBottom()
getBoundingRects()
DisplayCutout

92. getSafeInsetLeft()
getSafeInsetTop()
getSafeInsetRight()
getSafeInsetBottom()
getBoundingRects()
TOP
0
126
0
0

93. getSafeInsetLeft()
getSafeInsetTop()
getSafeInsetRight()
getSafeInsetBottom()
getBoundingRects()
RECT(414,0-666,126)

94. 더블 디스플레이
컷아웃
갤럭시S10
모서리 디스플레이 컷아웃
픽셀3

96. 감사합니다.
chapi79@gmail.com

97. Reference
Chris Banes의 Becoming a master window fitter
https://chris.banes.me/talks/2017/becoming-a-master-window-fitter-nyc/
https://medium.com/androiddevelopers/windows-insets-fragment-
transitions-9024b239a436
WindowInsets
https://medium.com/@azizbekian/windowinsets-24e241d4afb9
https://developer.android.com/reference/android/view/WindowInsets
https://stackoverflow.com/questions/33585225/what-are-windowinsets
Display Cutout
https://developer.android.com/guide/topics/display-cutout
https://developer.android.com/reference/android/view/
WindowManager.LayoutParams