이번에는 데이터 바인딩을 이용해 특정 이벤트가 발생했을 때 뷰의 컨텐츠를 변경해보았다.
이전 예제에서 이어서 진행하였다.
Observable 자료형
일반적으로 사용하는 String, int와 같은 자료형의 변수를 사용해 뷰와 연결하면 데이터를 변경했을 때 값이 반영되지 않는다.
그래서 일반적인 자료형이 아닌 Observable 자료형을 사용해야 한다.
이전에 쓰던 User 클래스 안의 변수들의 자료형을 Observable 자료형으로 바꿔주었다.
public class User {
ObservableField<String> name = new ObservableField<>();
ObservableInt age = new ObservableInt();
ObservableBoolean fav = new ObservableBoolean();
public User(String name, int age, boolean fav){
this.name.set(name);
this.age.set(age);
this.fav.set(fav);
}
public ObservableField<String> getName(){
return name;
}
public ObservableInt getAge(){
return age;
}
public ObservableBoolean getFav(){
return fav;
}
}버튼으로 변수값 변경하기
버튼을 누르면 User의 name값을 변경해주어 TextView에 보이도록 만들어보았다.
먼저 User 클래스에 name값을 변경하는 changeName메소드를 추가했다.
public class User {
...
public void changeName(View view){
name.set("YES");
}
}콜백 메소드에 사용할 메소드의 리턴값과 매개변수는 해당 콜백 메소드와 같게 해줘야 한다.
layout 파일에 Button을 추가하고, onClick 속성에 changeName 메소드를 연결해주었다.
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="@{user::changeName}"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/textName"
app:layout_constraintTop_toTopOf="parent" />
age와 fav도 변경하는 메소드와 버튼도 추가해보았다.
public void increaseAge(View view){
age.set(age.get() + 1);
}
public void toggleFav(View view){
fav.set(!fav.get());
} <Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:layout_marginBottom="32dp"
android:onClick="@{user::increaseAge}"
android:text="Button"
app:layout_constraintBottom_toTopOf="@+id/checkFav"
app:layout_constraintEnd_toStartOf="@+id/textAge"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textName" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:onClick="@{user::toggleFav}"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/checkFav"
app:layout_constraintTop_toBottomOf="@+id/textAge" />
EditText 변경 시 변수값 변경하기
이번에는 EditText를 변경 시 변수값을 변경하고, 해당 변수값과 연결된 TextView의 값이 변하도록 만들어보았다.
먼저 TextView와 연결할 변수 msg와 getMsg() 메소드를 User 클래스에 만들었다.
그리고 EditText의 onTextChanged에 등록할 콜백 메소드 onTextChanged() 메소드를 만들고 그 안에서 msg값을 변경하도록 만들었다.
public class User {
...
ObservableField<String> msg = new ObservableField<>();
...
public ObservableField<String> getMsg(){
return msg;
}
public void onTextChanged(CharSequence s, int start, int before, int count){
msg.set(s.toString());
}
}만든 메소드와 변수를 EditText와 TextView에 바인딩하였다.
<EditText
android:id="@+id/editTextText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:ems="10"
android:hint="editText"
android:onTextChanged="@{user::onTextChanged}"
android:inputType="text"
app:layout_constraintBottom_toTopOf="@+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="70dp"
android:text="@{user.msg}"
app:layout_constraintBottom_toTopOf="@+id/textName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />EditText의 값을 변경하면 msg와 바인딩된 TextView의 값이 변경되었다.
참고 블로그
https://kitesoft.tistory.com/118
https://kitesoft.tistory.com/119
