[Android] 데이터바인딩으로 UI 효율적으로 활용 하기

안드로이드 개발 중 xml의 UI와 객체의 연결은 항상 귀찮은 작업으로 생각 됩니다. 
이런 불편한 점을 해소하고자 버터나이프 같은 외부 라이브러리 사용하는 개발자들도 많았고
저처럼 그냥 좀 귀찮은 걸 감안하고 그냥 사용하는 개발자들도 있었을 것이라 생각합니다.

하지만 UI 노가다를 줄일수 있는 좋은 라이브러리가 있습니다.

바로 안드로이드에서 제공하는 데이터 바인딩 라이브러리 입니다.
Android Developer : https://developer.android.com/topic/libraries/data-binding/index.html#studio_support

데이터 바인딩 라이브러리 환경
* Android 2.1(API7) 이상
* Gradle 1.5.0-alpha1 이상

기존 방식


     //xml
     <TextView 
            android:id="@+id/text1" 
            android:layout_centerinparent="true" 
            android:layout_height="wrap_content" 
            android:layout_width="wrap_content"/>



     //activity
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_data_binding);

        TextView text1 = (TextView) findViewById(R.id.text1);
        text1.setText("findViewById...");

    }

기존에는 TextView를 xml에서 정의한 후 Acitivy,Fragnent 등애서
findViewById 해당 뷰의 타입의 객체로 선언한 변수에 담아서
사용하는 방법을 사용 하였습니다.
이러다 보니 레이아웃이 복잡해 질수록 선언해야하는 변수도 많아지고
하나하나 연결 해주어야하는 작업을 해주다보니 귀찮은 점이 많았습니다.

데이터바인딩 라이브러리 활용


   android {
       compileSdkVersion 26
       buildToolsVersion "26.0.0"
       defaultConfig {
           ...
       }
       buildTypes {
           ...
       }

        dataBinding {
           enabled = true
       }

   }

우선 Module 레벨의 gradle에서 dataBinding을 사용함으로 추가 합니다.

   
   <layout xmlns:android="http://schemas.android.com/apk/res/android">
    .....
    ......
   </layout>

레이아웃에서는 기존과 달라진 점은 안에
기존 우리가만들던 레이아웃이 들어 간다는 것입니다.
   
   <layout xmlns:android="http://schemas.android.com/apk/res/android">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
          <TextView
              android:id="@+id/text1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_centerInParent="true" />
       </RelativeLayout>

   </layout>

실제 xml의 형태는 이렇게 됩니다.
   
   private ActivityDataBindingBinding binding = null;

위의 만든 xml의 이름을 activity_data_binding.xml로 만들었고
자동으로 ActivityDataBindingBinding라는 클래스가 생성되어 전역변수를 선언해 주었습니다.
   
    binding = DataBindingUtil.setContentView(this, R.layout.activity_data_binding);
    binding.text1.setText("DataBinding...");


가장 중요한 부분인 실제 소스 구현 부분입니다.
DataBindingUtil.setContentView를 통하여 데이터 바인딩을 해주었습니다.
binding.text1을 통해서 보듯이 바인딩된 객체인 binding에서 직접 xml에서 만든 TextView(id는 text1)를 사용 할수 있습니다.
   
  public class DataBindingActivity extends AppCompatActivity {

      private ActivityDataBindingBinding binding = null;

      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);

          binding = DataBindingUtil.setContentView(this, R.layout.activity_data_binding);
          binding.text1.setText("DataBinding...");

      }
  }
전체 구현된 소스는 위와 같습니다.

xml을 만들고 binding클래스가 바로 생성되지 않을수 있습니다.
그때는 Rebuild Project를 하면 클래스가 자동으로 생성됩니다.

댓글

주간 인기글

카드뉴스 마케팅 팁

[ubuntu] 신규 계정에 sudo 권한 추가하기

스타트업 성장 곡선 The Startup Curve

[앱 디자인] 디자인 가이드 만들기 - 아이폰

SPA(Sigle Page Applications) 란 무엇인가?