Jetpack Glance - Speaker Deck

Slide 1

Slide 1 text

2024 Google I/O Extended Incheon Proprietary & Confidential

Slide 2

Slide 2 text

Optional tag here Jetpack Glance를 사용한 위젯 생성 Hyeok Jun

Slide 3

Slide 3 text

목차 01 02 03 What’s the Widget? Jetpack Glance Glance with State

Slide 4

Slide 4 text

Widget에 대해 알아보기 What’s the Widget? Section 1

Slide 5

Slide 5 text

위젯은 사용자가 배경 화면에서 손쉽게 정보를 확인하거나 작업을 수행할 수 있도록 도와주는 작은 응용 프로그램 또는 UI Widget Section 1

Slide 6

Slide 6 text

사용 사례 Section 1

Slide 7

Slide 7 text

위젯은 일반적으로 작은 크기로 디자인되어 홈 화면 공간을 많이 차지하지 않습니다. 위젯을 통해 날씨, 시간, 뉴스, 알림 등 다양한 정보를 빠르게 확인할 수 있습니다. 작고 가벼운 크기 간편한 정보 확인 위젯을 클릭하면 해당 앱을 실행하거나 특정 기능을 바로 수행할 수 있도록 설정할 수 있습니다. 빠른 작업 수행 Widget Section 1

Slide 8

Slide 8 text

위젯은 다양한 디자인으로 제공되므로 사용자의 취향에 맞게 선택하여 사용할 수 있습니다. 일부 위젯은 사용자가 정보 표시 방식이나 기능을 자유롭게 설정할 수 있도록 합니다. 다양한 디자인 사용자 정의 가능 Widget Section #

Slide 9

Slide 9 text

App에서 간단한 작업을 하고 싶은 경우, App에 들어가서 작업하기 까지는 제법 많은 시간이 소요된다. 그렇지만 바탕화면에 Widget이 존재한다면, 이러한 시간을 단축시킬 수 있다. widget이 왜 필요할까? Section 1

Slide 10

Slide 10 text

사용자가 보았을 때, 유용한 정보가 있어야 합니다. 사용자가 위젯을 보았을 때, App에 접근하지 않고도 유용한 정보를 얻을 수 있어야 합니다. Design Tips Section 1

Slide 11

Slide 11 text

위젯을 간단하고 사용하기 쉽게 만들어야 합니다. 사용자는 위젯을 보았을 때, 어떻게 사용할지 파악하는 데에 긴 시간이 걸려서는 안 됩니다. Design Tips Section 1

Slide 12

Slide 12 text

Android에서는 Widget의 사이즈에 변화를 줄 수 있습니다. 그렇기에 size에 따른 위젯화면을 설정할 수 있어야 합니다. Design Tips Section 1

Slide 13

Slide 13 text

App 기준으로 하나의 화면보다 더 많은 정보의 응집성을 가지고 있어야 합니다. Design Tips Section 1

Slide 14

Slide 14 text

Jetpack Glance를 사용하여 간단한 Widget 만들기 Jetpack Glance Section 2

Slide 15

Slide 15 text

What’s the Jetpack Glance Section 2

Slide 16

Slide 16 text

Jetpack Glance는 Android 앱 위젯을 개발하기 위한 새로운 프레임워크입니다. Jetpack Compose라는 선언형 UI 도구를 기반으로 만들어져, 앱 위젯을 더욱 쉽고 효율적으로 개발할 수 있도록 돕습니다. Jetpack Glance? Section 2

Slide 17

Slide 17 text

XML 레이아웃을 사용하여 UI를 구성하고, java 또는 kotlin 코드로 위젯의 동작을 구현합니다. 상대적으로 복잡한 레이아웃 구성과 XML과 코드 간의 연결 작업이 필요 XML 레이아웃 파싱 및 뷰 계층 생성 과정에서 성능 오버헤드가 발생할 수 있습니다. 특히 복잡한 레이아웃의 경우 성능 저하가 두드러질 수 있습니다. 개발 방식 성능 기본적인 위젯 기능을 제공하며, 커스터마이징을 위해서는 상당한 개발 노력이 필요합니다. 기능 Jetpack Compose의 선언형 UI 개발 방식을 채택하여 Kotlin 코드만으로 위젯을 간결하게 작성할 수 있습니다. XML 레이아웃이 필요 없으며, 코드 가독성이 높고 개발 생산성이 향상됩니다. Jetpack Compose의 효율적인 컴포지션 시스템을 활용하여 성능이 향상되었습니다. 불필요한 재렌더링을 줄이고, 부드러운 애니메이션을 지원합니다. Jetpack Compose의 풍부한 기능을 활용하여 다양한 UI 요소와 상호 작용을 구현할 수 있습니다. 또한, Material Design 3를 기반으로 한 다양한 디자인 구성 요소를 제공하여 현대적인 UI를 쉽게 구축할 수 있습니다. Widget Glance Section 2

Slide 18

Slide 18 text

Compose runtime 기반 빌드된 프레임 워크. 현재 1.1.0 버전 stable Jetpack Glance Version Section 2

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

만들기 - 설명 / dependency 추가 Section 2 Glance로 Widget 만들기

Slide 21

Slide 21 text

만들기 - 설명 / Compose 컴파일러 활성화 Section 2 Glance로 Widget 만들기

Slide 22

Slide 22 text

만들기 - widgetProvideInfo.xml 기능 설명 Glance로 Widget 만들기 Section 2

Slide 23

Slide 23 text

만들기 - widgetProvideInfo.xml 기능 설명 develop Widget using Jetpack Glance Section 2

Slide 24

Slide 24 text

실제 Widget 적용 Section #

Slide 25

Slide 25 text

widgetProvideInfo.xml Section 2 Glance로 Widget 만들기 * minResizeWidth : “300dp” 수정

Slide 26

Slide 26 text

Widget Size Section #

Slide 27

Slide 27 text

Section 2 Manifest Glance로 Widget 만들기

Slide 28

Slide 28 text

Section 2 GlanceAppWidgetReceiver.kt Glance로 Widget 만들기

Slide 29

Slide 29 text

Section 2 Glance로 Widget 만들기

Slide 30

Slide 30 text

동일한 @Composable 함수이지만 Composable UI와 다르다. 주의사항 Section 2

Slide 31

Slide 31 text

주의사항 Section 2

Slide 32

Slide 32 text

주의사항 Section 2 GlanceAppWidget.kt

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

SizeMode.Responsive Section 2

Slide 36

Slide 36 text

SizeMode.Responsive Section 2

Slide 37

Slide 37 text

SizeMode.Responsive Section 2

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

SizeMode.Exact Section 2

Slide 40

Slide 40 text

Optional tag here 상태 관리는..?

Slide 41

Slide 41 text

user interaction / state & update Glance with State Section 3

Slide 42

Slide 42 text

User interaction Section 3

Slide 43

Slide 43 text

User interaction Section 3

Slide 44

Slide 44 text

User interaction Section 3

Slide 45

Slide 45 text

User interaction Section 3

Slide 46

Slide 46 text

User interaction Section 3

Slide 47

Slide 47 text

Section 3 GlanceAppWidget 업데이트

Slide 48

Slide 48 text

Update Section 3

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

Widget에 대한 전반적인 관리 App Widget ID를 생성하고 가져옵니다. App Widget 상태를 업데이트합니다. GlanceAppWidgetManager Section 3

Slide 51

Slide 51 text

GlanceAppWidgetManager Section 3

Slide 52

Slide 52 text

GlanceAppWidgetReceiver Section 3

Slide 53

Slide 53 text

GlanceAppWidgetReceiver Section 3

Slide 54

Slide 54 text

App 간의 통신 기능 수행. System이나 다른 App에서 발생하는 특정 event를 감지하고, 이에 따라 App에서 특정 작업을 수행하는 Component. Broadcast Receiver Section 3

Slide 55

Slide 55 text

intent로 받아온 값들을 if문을 통해 각 상황에 맞게 분기 처리. Section 2

Slide 56

Slide 56 text

결과적으로, Glance는 Broadcast Receiver 상속받음. 그렇기에 App 내부에서 이벤트가 발생한 경우, update를 통해 값을 넘겨줄 수 있다. Glance와 Broadcast Receiver Section 3

Slide 57

Slide 57 text

Glance와 Broadcast Receiver GlanceAppWidgetReceiver.kt Section 3

Slide 58

Slide 58 text

GlanceAppWidgetReceiver Section 3

Slide 59

Slide 59 text

● onUpdate : `updatePeriodMills` 설정값에 따라 실행. ● onDeleted : 위젯이 삭제될 때마다 호출 ● onEnabled / onDisabled : 위젯이 활성화 / 비활성화될 때마다 호출. 위젯의 인스턴스가 처음으로 생길 때 활성화되고, 모든 인스턴스가 사라질 때 비활성화 develop Widget using Jetpack Glance Section 3

Slide 60

Slide 60 text

RemoteView Section 3

Slide 61

Slide 61 text

RemoteView 생성 순서 1. widget 관련해서 update() 메서드 호출 2. Compose 코드가 실행되면서 생성된 UI는 내부적으로 RemoteView로 변환 3. 생성된 RemoteView는 시스템에 전달되어 위젯에 반영 4. 시스템은 전달받은 RemoteView를 기반으로 위젯의 UI를 업데이트 Section 3