레이아웃 및 바인딩 수식

표현식 언어를 사용하면 뷰에서 전달한 이벤트를 처리하는 표현식을 작성할 수 있습니다. 데이터 결합 라이브러리는 레이아웃의 뷰를 데이터 객체와 결합하는 데 필요한 클래스를 자동으로 생성합니다.

데이터 결합 레이아웃 파일은 약간 차이가 있으며 layout의 루트 태그로 시작하고 data 요소와 view 루트 요소가 뒤따릅니다. 이 view 요소는 루트가 결합 레이아웃 파일이 아닌 파일에 있는 요소입니다. 다음 코드는 샘플 레이아웃 파일을 보여줍니다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
   <data>
       <variable name="user" type="com.example.User"/>
   </data>
   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{user.firstName}"/>
       <TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{user.lastName}"/>
   </LinearLayout>
</layout>

data 내의 user 변수는 이 레이아웃 내에서 사용할 수 있는 속성을 설명합니다.

<variable name="user" type="com.example.User" />

레이아웃 내의 표현식은 @{} 구문을 사용하여 속성 속성에 작성됩니다. 다음 예에서 TextView 텍스트는 user 변수의 firstName 속성으로 설정됩니다.

<TextView android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@{user.firstName}" />

데이터 객체

User 항목을 설명하는 일반 객체가 있다고 가정해 보겠습니다.

Kotlin

data class User(val firstName: String, val lastName: String)

Java


public class User {
  public final String firstName;
  public final String lastName;
  public User(String firstName, String lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
  }
}

이 유형의 객체에는 변경되지 않는 데이터가 있습니다. 앱에서는 한 번 읽은 후 변경되지 않는 데이터가 있는 것이 일반적입니다. 다음 예와 같이 자바 프로그래밍 언어의 접근자 메서드 사용과 같이 일련의 규칙을 따르는 객체를 사용할 수도 있습니다.

Kotlin

// Not applicable in Kotlin.
data class User(val firstName: String, val lastName: String)

Java

public class User {
  private final String firstName;
  private final String lastName;
  public User(String firstName, String lastName) {
      this.firstName = firstName;
      this.lastName = lastName;
  }
  public String getFirstName() {
      return this.firstName;
  }
  public String getLastName() {
      return this.lastName;
  }
}

데이터 결합의 관점에서 이러한 두 클래스는 동등합니다. android:text 속성에 사용되는 표현식 @{user.firstName}은 전자 클래스의 firstName 필드와 후자 클래스의 getFirstName() 메서드에 액세스합니다. 또한 이 메서드가 있는 경우 firstName()로 확인됩니다.

데이터 결합

각 레이아웃 파일의 결합 클래스가 생성됩니다. 기본적으로 클래스 이름은 레이아웃 파일의 이름을 기반으로 하며 파스칼 표기법으로 변환되고 Binding 접미사가 추가됩니다. 예를 들어 앞에 나온 레이아웃 파일 이름은 activity_main.xml이므로 이에 상응하는 생성된 결합 클래스는 ActivityMainBinding입니다.

이 클래스는 레이아웃 속성(예: user 변수)에서 레이아웃 뷰로의 모든 결합을 보유하며 결합 표현식의 값을 할당하는 방법을 알고 있습니다. 다음 예와 같이 레이아웃을 확장하는 동안 결합을 만드는 것이 좋습니다.

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val binding: ActivityMainBinding = DataBindingUtil.setContentView(
            this, R.layout.activity_main)

    binding.user = User("Test", "User")
}

Java

@Override
protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
   User user = new User("Test", "User");
   binding.setUser(user);
}

런타임 시 앱은 UI에 Test 사용자를 표시합니다. 또는 다음 예와 같이 LayoutInflater를 사용하여 뷰를 가져올 수 있습니다.

Kotlin

val binding: ActivityMainBinding = ActivityMainBinding.inflate(getLayoutInflater())

Java

ActivityMainBinding binding = ActivityMainBinding.inflate(getLayoutInflater());

Fragment, ListView 또는 RecyclerView 어댑터 내에서 데이터 결합 항목을 사용 중인 경우 다음 코드 예와 같이 결합 클래스 또는 DataBindingUtil 클래스의 inflate() 메서드를 사용하는 것이 좋을 수 있습니다.

Kotlin

val listItemBinding = ListItemBinding.inflate(layoutInflater, viewGroup, false)
// or
val listItemBinding = DataBindingUtil.inflate(layoutInflater, R.layout.list_item, viewGroup, false)

Java

ListItemBinding binding = ListItemBinding.inflate(layoutInflater, viewGroup, false);
// or
ListItemBinding binding = DataBindingUtil.inflate(layoutInflater, R.layout.list_item, viewGroup, false);

표현식 언어

일반적인 기능

표현식 언어는 관리형 코드에서 볼 수 있는 표현식과 매우 비슷합니다. 표현식 언어에서는 다음 연산자와 키워드를 사용할 수 있습니다.

  • 수학: + - / * %
  • 문자열 연결: +
  • 논리: && ||
  • 바이너리: & | ^
  • 단항: + - ! ~
  • Shift: >> >>> <<
  • 비교: == > < >= <= (<&lt;로 이스케이프 처리해야 함)
  • instanceof
  • 그룹화: ()
  • 리터럴(예: 문자, 문자열, 숫자, null)
  • 출연진
  • 메서드 호출
  • 필드 액세스
  • 배열 액세스: []
  • 3항 연산자: ?:

다음은 몇 가지 예입니다.

android:text="@{String.valueOf(index + 1)}"
android:visibility="@{age > 13 ? View.GONE : View.VISIBLE}"
android:transitionName='@{"image_" + id}'

누락된 연산자

관리 코드에서 사용할 수 있는 표현식 구문에서 누락된 작업은 다음과 같습니다.

  • this
  • super
  • new
  • 명시적 제네릭(Generic) 호출

Null 병합 연산자

null 병합 연산자 (??)는 왼쪽 피연산자가 null이 아니면 왼쪽 피연산자를 선택하고 null이면 오른쪽 피연산자를 선택합니다.

android:text="@{user.displayName ?? user.lastName}"

이는 기능적으로 다음과 동일합니다.

android:text="@{user.displayName != null ? user.displayName : user.lastName}"

속성 참조

표현식은 다음 형식을 사용하여 클래스의 속성을 참조할 수 있습니다. 이 형식은 필드, getters 및 ObservableField 객체에서도 동일합니다.

android:text="@{user.lastName}"

null 포인터 예외 방지

생성된 데이터 결합 코드는 자동으로 null 값을 확인하고 null 포인터 예외를 방지합니다. 예를 들어 @{user.name} 표현식에서 user가 null이면 user.namenull의 기본값이 할당됩니다. age의 유형이 intuser.age를 참조하면 데이터 결합은 0의 기본값을 사용합니다.

뷰 참조

표현식은 다음 문법을 사용하여 ID별로 레이아웃의 다른 뷰를 참조할 수 있습니다.

android:text="@{exampleText.text}"

다음 예에서 TextView 뷰는 동일한 레이아웃의 EditText 뷰를 참조합니다.

<EditText
    android:id="@+id/example_text"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"/>
<TextView
    android:id="@+id/example_output"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@{exampleText.text}"/>

컬렉션

편의상 [] 연산자를 사용하여 배열, 목록, 희소 목록, 맵과 같은 일반적인 컬렉션에 액세스할 수 있습니다.

<data>
    <import type="android.util.SparseArray"/>
    <import type="java.util.Map"/>
    <import type="java.util.List"/>
    <variable name="list" type="List&lt;String>"/>
    <variable name="sparse" type="SparseArray&lt;String>"/>
    <variable name="map" type="Map&lt;String, String>"/>
    <variable name="index" type="int"/>
    <variable name="key" type="String"/>
</data>
...
android:text="@{list[index]}"
...
android:text="@{sparse[index]}"
...
android:text="@{map[key]}"

또한 object.key 표기법을 사용하여 맵의 값을 참조할 수도 있습니다. 예를 들어 앞의 예의 @{map[key]}@{map.key}로 바꿀 수 있습니다.

문자열 리터럴

다음 예와 같이 작은따옴표를 사용하여 속성 값을 둘러싸면 표현식에 큰따옴표를 사용할 수 있습니다.

android:text='@{map["firstName"]}'

큰따옴표를 사용하여 속성 값을 묶을 수도 있습니다. 이때 아래와 같이 문자열 리터럴을 백틱(`)으로 묶어야 합니다.

android:text="@{map[`firstName`]}"

리소스

표현식은 다음 구문을 사용하여 앱 리소스를 참조할 수 있습니다.

android:padding="@{large? @dimen/largePadding : @dimen/smallPadding}"

다음과 같이 매개변수를 제공하여 형식 문자열과 복수형을 평가할 수 있습니다.

android:text="@{@string/nameFormat(firstName, lastName)}"
android:text="@{@plurals/banana(bananaCount)}"

다음과 같이 속성 참조뷰 참조를 리소스 매개변수로 전달할 수 있습니다.

android:text="@{@string/example_resource(user.lastName, exampleText.text)}"

복수형이 여러 매개변수를 사용하는 경우 모든 매개변수를 전달합니다.


  Have an orange
  Have %d oranges

android:text="@{@plurals/orange(orangeCount, orangeCount)}"

일부 리소스에는 다음 표와 같이 명시적인 유형 평가가 필요합니다.

유형 일반 참조 표현식 참조
String[] @array @stringArray
int[] @array @intArray
TypedArray @array @typedArray
Animator @animator @animator
StateListAnimator @animator @stateListAnimator
color int @color @color
ColorStateList @color @colorStateList

이벤트 처리

데이터 결합을 사용하면 뷰에서 전달되는 표현식 처리 이벤트를 작성할 수 있습니다(예: onClick() 메서드). 이벤트 속성 이름은 몇 가지 예외를 제외하고 리스너 메서드의 이름에 따라 결정됩니다. 예를 들어 View.OnClickListener에는 onClick() 메서드가 있으므로 이 이벤트의 속성은 android:onClick입니다.

클릭 이벤트에는 충돌을 방지하기 위해 android:onClick 이외의 속성이 필요한 특수한 이벤트 핸들러가 있습니다. 다음 속성을 사용하여 이러한 유형의 충돌을 방지할 수 있습니다.

클래스 리스너 setter 속성
SearchView setOnSearchClickListener(View.OnClickListener) android:onSearchClick
ZoomControls setOnZoomInClickListener(View.OnClickListener) android:onZoomIn
ZoomControls setOnZoomOutClickListener(View.OnClickListener) android:onZoomOut

이 두 메커니즘을 사용하여 이벤트를 처리할 수 있습니다. 자세한 내용은 다음 섹션에 설명되어 있습니다.

  • 메서드 참조: 표현식에서 리스너 메서드의 서명과 일치하는 메서드를 참조할 수 있습니다. 표현식이 메서드 참조로 평가되면 데이터 결합은 메서드 참조와 소유자 객체를 리스너에서 래핑하고 타겟 뷰에서 이 리스너를 설정합니다. 표현식이 null로 평가되면 데이터 결합은 리스너를 만들지 않고 대신 null 리스너를 설정합니다.
  • 리스너 결합: 이벤트가 발생할 때 계산되는 람다 표현식입니다. 데이터 결합은 항상 리스너를 만들어 뷰에서 설정합니다. 이벤트가 전달되면 리스너는 람다 표현식을 평가합니다.

메서드 참조

활동의 메서드에 android:onClick을 할당하는 것과 비슷한 방식으로 이벤트를 핸들러 메서드에 직접 결합할 수 있습니다. View onClick 속성 대비 한 가지 이점은 표현식이 컴파일 시간에 처리된다는 것입니다. 따라서 메서드가 존재하지 않거나 서명이 올바르지 않으면 컴파일 시간 오류가 발생합니다.

메서드 참조와 리스너 결합의 주요 차이점은 실제 리스너 구현은 이벤트가 트리거될 때가 아니라 데이터가 결합될 때 생성된다는 것입니다. 이벤트가 발생할 때 표현식을 평가하려면 리스너 결합을 사용하세요.

핸들러에 이벤트를 할당하려면 호출할 메서드 이름으로 값을 사용하여 일반 결합 표현식을 사용합니다. 예를 들어 다음과 같은 레이아웃 데이터 객체를 살펴보겠습니다.

Kotlin

class MyHandlers {
    fun onClickFriend(view: View) { ... }
}

Java

public class MyHandlers {
    public void onClickFriend(View view) { ... }
}

결합 표현식은 다음과 같이 뷰의 클릭 리스너를 onClickFriend() 메서드에 할당할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
   <data>
       <variable name="handlers" type="com.example.MyHandlers"/>
       <variable name="user" type="com.example.User"/>
   </data>
   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <TextView android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="@{user.firstName}"
           android:onClick="@{handlers::onClickFriend}"/>
   </LinearLayout>
</layout>

리스너 결합

리스너 결합은 이벤트가 발생할 때 실행되는 결합 표현식입니다. 바인딩은 메서드 참조와 비슷하지만, 임의의 데이터 결합 표현식을 실행할 수 있게 해줍니다. 이 기능은 Gradle용 Android Gradle 플러그인 버전 2.0 이상에서 사용할 수 있습니다.

메서드 참조에서 메서드의 매개변수는 이벤트 리스너의 매개변수와 일치해야 합니다. 리스너 결합에서는 반환 값만 리스너의 예상 반환 값과 일치해야 합니다(void가 예상되지 않는 경우). 예를 들어 onSaveClick() 메서드가 있는 다음 presenter 클래스를 확인해 보세요.

Kotlin

class Presenter {
    fun onSaveClick(task: Task){}
}

Java

public class Presenter {
    public void onSaveClick(Task task){}
}

다음과 같이 클릭 이벤트를 onSaveClick() 메서드에 바인딩할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable name="task" type="com.android.example.Task" />
        <variable name="presenter" type="com.android.example.Presenter" />
    </data>
    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent">
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:onClick="@{() -> presenter.onSaveClick(task)}" />
    </LinearLayout>
</layout>

표현식에 콜백이 사용되면 데이터 결합은 필요한 리스너를 자동으로 만들어 이벤트에 등록합니다. 뷰에서 이벤트가 발생하면 데이터 결합은 지정된 표현식을 평가합니다. 정규 결합 표현식과 마찬가지로 이러한 리스너 표현식을 평가하는 동안 데이터 결합의 null 및 스레드 안전성을 얻을 수 있습니다.

앞의 예에서는 onClick(View)에 전달되는 view 매개변수가 정의되어 있지 않습니다. 리스너 결합에서는 리스너 매개변수에 두 가지 옵션을 제공합니다. 즉, 메서드의 모든 매개변수를 무시하거나 모든 매개변수의 이름을 지정할 수 있습니다. 매개변수의 이름을 지정하고 싶다면 표현식에 매개변수를 사용하면 됩니다. 예를 들어 앞의 표현식을 다음과 같이 작성할 수 있습니다.

android:onClick="@{(view) -> presenter.onSaveClick(task)}"

표현식에 매개변수를 사용하려면 다음과 같이 하면 됩니다.

Kotlin

class Presenter {
    fun onSaveClick(view: View, task: Task){}
}

Java

public class Presenter {
    public void onSaveClick(View view, Task task){}
}

android:onClick="@{(theView) -> presenter.onSaveClick(theView, task)}"

매개변수 두 개 이상과 함께 람다 표현식을 사용할 수 있습니다.

Kotlin

class Presenter {
    fun onCompletedChanged(task: Task, completed: Boolean){}
}

Java

public class Presenter {
    public void onCompletedChanged(Task task, boolean completed){}
}

<CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content"
      android:onCheckedChanged="@{(cb, isChecked) -> presenter.completeChanged(task, isChecked)}" />

수신 대기 중인 이벤트가 유형이 void가 아닌 값을 반환하면 표현식도 같은 유형의 값을 반환해야 합니다. 예를 들어 길게 터치 (길게 클릭) 이벤트를 수신 대기하려면 표현식이 불리언을 반환해야 합니다.

Kotlin

class Presenter {
    fun onLongClick(view: View, task: Task): Boolean { }
}

Java

public class Presenter {
    public boolean onLongClick(View view, Task task) { }
}

android:onLongClick="@{(theView) -> presenter.onLongClick(theView, task)}"

null 객체로 인해 표현식을 계산할 수 없으면 데이터 결합은 해당 유형의 기본값을 반환합니다(예: 참조 유형의 경우 null, int의 경우 0, boolean의 경우 false).

조건자와 함께 표현식(예: 삼항)을 사용해야 하는 경우 void를 기호로 사용할 수 있습니다.

android:onClick="@{(v) -> v.isVisible() ? doSomething() : void}"

복잡한 리스너 방지

리스너 표현식은 강력하며 코드를 더 쉽게 읽을 수 있도록 합니다. 반면에 복잡한 표현식이 포함된 리스너는 레이아웃을 읽고 유지하기 더 어렵게 만듭니다. UI에서 콜백 메서드로 사용 가능한 데이터를 전달하는 것만큼 표현식을 간단하게 유지합니다. 리스너 표현식에서 호출하는 콜백 메서드 내에 비즈니스 로직을 구현합니다.

가져오기, 변수 및 포함

데이터 결합 라이브러리는 가져오기, 변수, 포함과 같은 기능을 제공합니다. 가져오기를 사용하면 레이아웃 파일 내에서 클래스를 쉽게 참조할 수 있습니다. 변수를 사용하면 결합 표현식에 사용할 수 있는 속성을 설명할 수 있습니다. 포함을 사용하면 앱 전체에서 복잡한 레이아웃을 재사용할 수 있습니다.

가져오기

가져오기를 사용하면 관리형 코드에서와 같이 레이아웃 파일 내에서 클래스를 참조할 수 있습니다. data 요소 내에서 0개 이상의 import 요소를 사용할 수 있습니다. 다음 코드 예에서는 View 클래스를 레이아웃 파일로 가져옵니다.

<data>
    <import type="android.view.View"/>
</data>

View 클래스를 가져오면 결합 표현식에서 참조할 수 있습니다. 다음 예는 View 클래스의 VISIBLEGONE 상수를 참조하는 방법을 보여줍니다.

<TextView
   android:text="@{user.lastName}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:visibility="@{user.isAdult ? View.VISIBLE : View.GONE}"/>

유형 별칭

클래스 이름 충돌이 있는 경우 클래스 중 하나의 이름을 별칭으로 바꿀 수 있습니다. 다음 예에서는 com.example.real.estate 패키지의 View 클래스 이름을 Vista로 바꿉니다.

<import type="android.view.View"/>
<import type="com.example.real.estate.View"
        alias="Vista"/>

그런 다음 Vista를 사용하여 com.example.real.estate.View을 참조하고 View를 사용하여 레이아웃 파일 내에서 android.view.View를 참조할 수 있습니다.

다른 클래스 가져오기

가져온 유형을 변수와 표현식에서 유형 참조로 사용할 수 있습니다. 다음 예는 변수 유형으로 사용되는 UserList를 보여줍니다.

<data>
    <import type="com.example.User"/>
    <import type="java.util.List"/>
    <variable name="user" type="User"/>
    <variable name="userList" type="List&lt;User>"/>
</data>

가져온 유형을 사용하여 표현식의 일부를 변환할 수 있습니다. 다음 예에서는 connection 속성을 User 유형으로 변환합니다.

<TextView
   android:text="@{((User)(user.connection)).lastName}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>

표현식에서 정적 필드와 메서드를 참조할 때 가져온 유형을 사용할 수도 있습니다. 다음 코드는 MyStringUtils 클래스를 가져와서 capitalize 메서드를 참조합니다.

<data>
    <import type="com.example.MyStringUtils"/>
    <variable name="user" type="com.example.User"/>
</data>
…
<TextView
   android:text="@{MyStringUtils.capitalize(user.lastName)}"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>

관리형 코드에서와 마찬가지로 java.lang.*을 자동으로 가져옵니다.

변수

data 요소 내에서 여러 variable 요소를 사용할 수 있습니다. 각 variable 요소는 레이아웃 파일 내 결합 표현식에 사용할 레이아웃에서 설정할 수 있는 속성을 설명합니다. 다음 예에서는 user, image, note 변수를 선언합니다.

<data>
    <import type="android.graphics.drawable.Drawable"/>
    <variable name="user" type="com.example.User"/>
    <variable name="image" type="Drawable"/>
    <variable name="note" type="String"/>
</data>

변수 유형은 컴파일 시간에 검사되므로 변수가 Observable를 구현하거나 관찰 가능한 컬렉션인 경우 이러한 유형이 유형에 반영되어야 합니다. 변수가 Observable 인터페이스를 구현하지 않는 기본 클래스 또는 인터페이스라면 변수가 관찰 되지 않습니다.

다양한 구성 (예: 가로 모드 또는 세로 모드)에 여러 레이아웃 파일이 있는 경우 변수가 결합됩니다. 이러한 레이아웃 파일 간에 충돌하는 변수 정의가 있어서는 안 됩니다.

생성된 결합 클래스에는 설명된 각 변수의 setter와 getter가 있습니다. 변수는 setter가 호출될 때까지 기본 관리형 코드 값을 사용합니다(참조 유형의 경우 null, int의 경우 0, boolean의 경우 false 등).

필요에 따라 결합 표현식에 사용하기 위해 context이라는 특수 변수가 생성됩니다. context의 값은 루트 뷰의 getContext() 메서드에서 가져온 Context 객체입니다. context 변수는 이 이름을 가진 명시적 변수 선언으로 재정의됩니다.

포함

속성에서 앱 네임스페이스와 변수 이름을 사용하여 포함하는 레이아웃에서 포함된 레이아웃의 결합으로 변수를 전달할 수 있습니다. 다음 예는 name.xmlcontact.xml 레이아웃 파일에서 포함된 user 변수를 보여줍니다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:bind="http://schemas.android.com/apk/res-auto">
   <data>
       <variable name="user" type="com.example.User"/>
   </data>
   <LinearLayout
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <include layout="@layout/name"
           bind:user="@{user}"/>
       <include layout="@layout/contact"
           bind:user="@{user}"/>
   </LinearLayout>
</layout>

데이터 결합은 include를 병합 요소의 직접 하위 요소로서 지원하지 않습니다. 예를 들어 다음 레이아웃은 지원되지 않습니다.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:bind="http://schemas.android.com/apk/res-auto">
   <data>
       <variable name="user" type="com.example.User"/>
   </data>
   <merge><!-- Doesn't work -->
       <include layout="@layout/name"
           bind:user="@{user}"/>
       <include layout="@layout/contact"
           bind:user="@{user}"/>
   </merge>
</layout>

추가 리소스

데이터 결합에 관한 자세한 내용은 다음 추가 리소스를 참고하세요.

샘플

Codelab

블로그 게시물