Jetpack Glance

2024.07.27
Google I/O Extended Incheon 2024

Transcript

1. 2024 Google I/O Extended Incheon Proprietary & Confidential
2. Optional tag here Jetpack Glance를 사용한 위젯 생성 Hyeok Jun
3. 목차 01 02 03 What’s the Widget? Jetpack Glance Glance with State
4. Widget에 대해 알아보기 What’s the Widget? Section 1
5. 위젯은 사용자가 배경 화면에서 손쉽게 정보를 확인하거나 작업을 수행할 수 있도록 도와주는 작은 응용 프로그램 또는 UI Widget Section 1
6. 사용 사례 Section 1
7. 위젯은 일반적으로 작은 크기로 디자인되어 홈 화면 공간을 많이 차지하지 않습니다. 위젯을 통해 날씨, 시간, 뉴스, 알림 등 다양한 정보를 빠르게 확인할 수 있습니다. 작고 가벼운 크기 간편한 정보 확인 위젯을 클릭하면 해당 앱을 실행하거나 특정 기능을 바로 수행할 수 있도록 설정할 수 있습니다. 빠른 작업 수행 Widget Section 1
8. 위젯은 다양한 디자인으로 제공되므로 사용자의 취향에 맞게 선택하여 사용할 수 있습니다. 일부 위젯은 사용자가 정보 표시 방식이나 기능을 자유롭게 설정할 수 있도록 합니다. 다양한 디자인 사용자 정의 가능 Widget Section #
9. App에서 간단한 작업을 하고 싶은 경우, App에 들어가서 작업하기 까지는 제법 많은 시간이 소요된다. 그렇지만 바탕화면에 Widget이 존재한다면, 이러한 시간을 단축시킬 수 있다. widget이 왜 필요할까? Section 1
10. 사용자가 보았을 때, 유용한 정보가 있어야 합니다. 사용자가 위젯을 보았을 때, App에 접근하지 않고도 유용한 정보를 얻을 수 있어야 합니다. Design Tips Section 1
11. 위젯을 간단하고 사용하기 쉽게 만들어야 합니다. 사용자는 위젯을 보았을 때, 어떻게 사용할지 파악하는 데에 긴 시간이 걸려서는 안 됩니다. Design Tips Section 1
12. Android에서는 Widget의 사이즈에 변화를 줄 수 있습니다. 그렇기에 size에 따른 위젯화면을 설정할 수 있어야 합니다. Design Tips Section 1
13. App 기준으로 하나의 화면보다 더 많은 정보의 응집성을 가지고 있어야 합니다. Design Tips Section 1
14. Jetpack Glance를 사용하여 간단한 Widget 만들기 Jetpack Glance Section 2
15. What’s the Jetpack Glance Section 2
16. Jetpack Glance는 Android 앱 위젯을 개발하기 위한 새로운 프레임워크입니다. Jetpack Compose라는 선언형 UI 도구를 기반으로 만들어져, 앱 위젯을 더욱 쉽고 효율적으로 개발할 수 있도록 돕습니다. Jetpack Glance? Section 2
17. XML 레이아웃을 사용하여 UI를 구성하고, java 또는 kotlin 코드로 위젯의 동작을 구현합니다. 상대적으로 복잡한 레이아웃 구성과 XML과 코드 간의 연결 작업이 필요 XML 레이아웃 파싱 및 뷰 계층 생성 과정에서 성능 오버헤드가 발생할 수 있습니다. 특히 복잡한 레이아웃의 경우 성능 저하가 두드러질 수 있습니다. 개발 방식 성능 기본적인 위젯 기능을 제공하며, 커스터마이징을 위해서는 상당한 개발 노력이 필요합니다. 기능 Jetpack Compose의 선언형 UI 개발 방식을 채택하여 Kotlin 코드만으로 위젯을 간결하게 작성할 수 있습니다. XML 레이아웃이 필요 없으며, 코드 가독성이 높고 개발 생산성이 향상됩니다. Jetpack Compose의 효율적인 컴포지션 시스템을 활용하여 성능이 향상되었습니다. 불필요한 재렌더링을 줄이고, 부드러운 애니메이션을 지원합니다. Jetpack Compose의 풍부한 기능을 활용하여 다양한 UI 요소와 상호 작용을 구현할 수 있습니다. 또한, Material Design 3를 기반으로 한 다양한 디자인 구성 요소를 제공하여 현대적인 UI를 쉽게 구축할 수 있습니다. Widget Glance Section 2
18. Compose runtime 기반 빌드된 프레임 워크. 현재 1.1.0 버전 stable Jetpack Glance Version Section 2
19. Jetpack-Glance 1.1.0 (Stable) https://developer.android.com/jetpack/androidx/rele ases/glance?hl=ko what’s the Jetpack Glance Section 2 https://developer.android.com/jetpack/androidx/releases/glance?hl=ko
20. 만들기 - 설명 / dependency 추가 Section 2 Glance로 Widget 만들기
21. 만들기 - 설명 / Compose 컴파일러 활성화 Section 2 Glance로 Widget 만들기
22. 만들기 - widgetProvideInfo.xml 기능 설명 Glance로 Widget 만들기 Section 2
23. 만들기 - widgetProvideInfo.xml 기능 설명 develop Widget using Jetpack Glance Section 2
24. 실제 Widget 적용 Section #
25. widgetProvideInfo.xml Section 2 Glance로 Widget 만들기 * minResizeWidth : “300dp” 수정
26. Widget Size Section #
27. Section 2 Manifest Glance로 Widget 만들기
28. Section 2 GlanceAppWidgetReceiver.kt Glance로 Widget 만들기
29. Section 2 Glance로 Widget 만들기
30. 동일한 @Composable 함수이지만 Composable UI와 다르다. 주의사항 Section 2
31. 주의사항 Section 2
32. 주의사항 Section 2 GlanceAppWidget.kt
35. SizeMode.Responsive Section 2
36. SizeMode.Responsive Section 2
37. SizeMode.Responsive Section 2
39. SizeMode.Exact Section 2
40. Optional tag here 상태 관리는..?
41. user interaction / state & update Glance with State Section 3
42. User interaction Section 3
43. User interaction Section 3
44. User interaction Section 3
45. User interaction Section 3
46. User interaction Section 3
47. Section 3 GlanceAppWidget 업데이트
48. Update Section 3
50. Widget에 대한 전반적인 관리 App Widget ID를 생성하고 가져옵니다. App Widget 상태를 업데이트합니다. GlanceAppWidgetManager Section 3
51. GlanceAppWidgetManager Section 3
52. GlanceAppWidgetReceiver Section 3
53. GlanceAppWidgetReceiver Section 3
54. App 간의 통신 기능 수행. System이나 다른 App에서 발생하는 특정 event를 감지하고, 이에 따라 App에서 특정 작업을 수행하는 Component. Broadcast Receiver Section 3
55. intent로 받아온 값들을 if문을 통해 각 상황에 맞게 분기 처리. Section 2
56. 결과적으로, Glance는 Broadcast Receiver 상속받음. 그렇기에 App 내부에서 이벤트가 발생한 경우, update를 통해 값을 넘겨줄 수 있다. Glance와 Broadcast Receiver Section 3
57. Glance와 Broadcast Receiver GlanceAppWidgetReceiver.kt Section 3
58. GlanceAppWidgetReceiver Section 3
59. • onUpdate : `updatePeriodMills` 설정값에 따라 실행. • onDeleted : 위젯이 삭제될 때마다 호출 • onEnabled / onDisabled : 위젯이 활성화 / 비활성화될 때마다 호출. 위젯의 인스턴스가 처음으로 생길 때 활성화되고, 모든 인스턴스가 사라질 때 비활성화 develop Widget using Jetpack Glance Section 3
60. RemoteView Section 3
61. RemoteView 생성 순서 1. widget 관련해서 update() 메서드 호출 2. Compose 코드가 실행되면서 생성된 UI는 내부적으로 RemoteView로 변환 3. 생성된 RemoteView는 시스템에 전달되어 위젯에 반영 4. 시스템은 전달받은 RemoteView를 기반으로 위젯의 UI를 업데이트 Section 3
62. RemoteView 생성 순서 (2) AppWidgetComposer.kt Section 3
63. RemoteView 생성 순서 (3) GlanceAppWidgetReceiver.kt Section 3
64. UI 추가 Section 3
65. UI 추가 Section 3
66. 상호 운용성 Section 3
67. 상호 운용성 Section 3
68. 질문
69. Optional tag here viewModel?
70. 감사합니다