Data binding 入門淺談

55

Transcript of Data binding 入門淺談

Page 1: Data binding 入門淺談
Page 2: Data binding 入門淺談

Project

https://github.com/awonwon/gdgk-databinding-sample

Page 3: Data binding 入門淺談

DataBinding

@GDG Kaohsiung

Page 4: Data binding 入門淺談

我是誰?awonwon

25sprout Android

HITCON GIRLS

Page 5: Data binding 入門淺談
Page 6: Data binding 入門淺談

Android Studio 2.0 ^^?

Page 7: Data binding 入門淺談
Page 8: Data binding 入門淺談

What is Data Binding?

TextView

String show = "Hello"DataBinding

Layout Activity

Page 9: Data binding 入門淺談

What is Data Binding?

Hello

TextView

String show = "Hello"binding.set (show);

DataBinding

Layout Activity

Page 10: Data binding 入門淺談

What is Data Binding?

GGWP

TextView

Show="GGWP";

DataBinding

Layout Activity

Page 11: Data binding 入門淺談

Layout Activity

Binding With POJO

Name

TextView

DataBinding

Tel

TextView

Tel

TextView

User user = new User();binding.set (user);

Page 12: Data binding 入門淺談

Clean Code

Zero Reflection

Official Library

MMVM

Page 13: Data binding 入門淺談

YEAH

Page 14: Data binding 入門淺談

main_layout<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical">

<TextViewandroid:id="@+id/view_id"android:layout_width="match_parent"android:layout_height="wrap_content"android:text=""/>

<TextViewandroid:id="@+id/view_name"android:layout_width="match_parent"android:layout_height="wrap_content"android:text=""/>

< TextView …

</LinearLayout>

LinearLayout

{id}

{name}

{level}

{exp}

Page 15: Data binding 入門淺談

MainActivity

LinearLayout

{id}

{name}

{level}

{exp}

private TextView idView, nameView, levelView, expView;

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.main_layout);findViews();

User user = new User("8591", " ", "5", "2000");

idView.setText(user.id);nameView.setText(user.name);levelView.setText("LV." + user.level);expView.setText(user.exp);

}

private void findViews(){idView = (TextView) findViewById(R.id.view_id);nameView = (TextView) findViewById(R.id.view_name);levelView = (TextView) findViewById(R.id.view_level);expView = (TextView) findViewById(R.id.view_exp);

}

Page 16: Data binding 入門淺談

MainActivity

LinearLayout

8591

LV.5

2000

private TextView idView, nameView, levelView, expView;

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.main_layout);findViews();

User user = new User("8591", " ", "5","2000");idView.setText(user.id);nameView.setText(user.name);levelView.setText("LV." + user.level);expView.setText(user.exp);

}

private void findViews(){idView = (TextView) findViewById(R.id.view_id);nameView = (TextView) findViewById(R.id.view_name);levelView = (TextView) findViewById(R.id.view_level);expView = (TextView) findViewById(R.id.view_exp);

}

Page 17: Data binding 入門淺談

DataBinding

Page 18: Data binding 入門淺談

Build.gradle

android {compileSdkVersion 23buildToolsVersion "23.0.2"

defaultConfig {applicationId "com.sprout.give"minSdkVersion 15targetSdkVersion 23versionCode 1versionName "1.0"

}

dataBinding {enabled = true

}

}

DataBinding

Page 19: Data binding 入門淺談

<?xml version="1.0" encoding="utf-8"?><layout xmlns:android="http://schemas.android.com/apk/res/android">

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical">

<TextViewandroid:id="@+id/view_id"android:layout_width="match_parent"android:layout_height="wrap_content"android:text=""/>

<TextViewandroid:id="@+id/view_name"android:layout_width="match_parent"android:layout_height="wrap_content"android:text=""/>

< TextView …

</LinearLayout></layout>

main_layout

LinearLayout

{id}

{name}

{level}

{exp}

Root View <Layout>

Page 20: Data binding 入門淺談

<?xml version="1.0" encoding="utf-8"?><layout xmlns:android="http://schemas.android.com/apk/res/android">

<data class="MainActivityDataBinding"><import type="com.awonwon.User"/>

<variablename="user"type="user"/>

</data>

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical">

<TextViewandroid:id="@+id/view_id"android:layout_width="match_parent"android:layout_height="wrap_content"android:text=""/>

<TextViewandroid:id="@+id/view_name"android:layout_width="match_parent"android:layout_height="wrap_content"android:text=""/>

< TextView …

</LinearLayout></layout>

main_layout

LinearLayout

{id}

{name}

{level}

{exp}

& Import Class

Page 21: Data binding 入門淺談

<?xml version="1.0" encoding="utf-8"?><layout xmlns:android="http://schemas.android.com/apk/res/android">

<data class="MainActivityDataBinding"><import type="com.awonwon.User"/>

<variablename="user"type="user"/>

</data>

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical">

<TextViewandroid:id="@+id/view_id"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="@{user.id}"/>

<TextViewandroid:id="@+id/view_name"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="@{user.name}"/>

< TextView …

</LinearLayout></layout>

main_layout

LinearLayout

{user.id}

{user.name}

{user.level}

{user.exp}

binding @{value}

Page 22: Data binding 入門淺談

MainActivity

LinearLayout

{user.id}

{user.name}

{user.level}

{user.exp}

public class MainAcivity extends AppCompatActivity{private TextView idView, nameView, levelView, expView;

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.main_layout);findViews();

User user = new User("8591", " ", "5", "2000");

idView.setText(user.id);nameView.setText(user.name);levelView.setText("LV." + user.level);expView.setText(user.exp);

}

private void findViews(){idView = (TextView) findViewById(R.id.view_id);nameView = (TextView) findViewById(R.id.view_name);levelView = (TextView) findViewById(R.id.view_level);expView = (TextView) findViewById(R.id.view_exp);

}}

Page 23: Data binding 入門淺談

LinearLayout

8591

LV.5

2000

MainActivity public class MainAcivity extends AppCompatActivity{

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

MainActivityDataBinding binding = DataBindingUtil.setContentView(this, R.layout.main_layout);

User user = new User("8591", " ", "5", "2000");

binding.setUser(user);

}

}

BindingClass & Value

Page 24: Data binding 入門淺談

findView。:.゚ (* ∀́`)ノ゚.:。

Page 25: Data binding 入門淺談
Page 26: Data binding 入門淺談

LayoutView

DataBindingClass

Page 27: Data binding 入門淺談

Layout

Data Binding

BindingClass

BindinClass

tag

<TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="@{"Lv."+user.level}"/>

<TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="@{"Lv."+user.level}"/>

"Lv." + user.level=> LV.5

<TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text=""android:tag="binding_1"/>

Page 28: Data binding 入門淺談

DataBinding Classintermediates\classes\debug\[package_name]\databinding\

Binding Layoutintermediates\data-binding-layout-out\debug\layout\

build\intermediates

Page 29: Data binding 入門淺談

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

<data class="MainActivityDataBinding"><import type="com.awonwon.User"/>

<variablename="user"type="user"/>

</data>

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical">

<TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="@{user.id}"/>

< …</LinearLayout>

</layout>

Initialize variable

Set value

Layout

Page 30: Data binding 入門淺談

1. Initialize Variable

<data class="com.awonwon.MainActivityBinding">

<import type="com.awonwon.model.User" /><import type="android.view.View" alias="v" />

<variable name="user" type="User" /><variable name="datetime" type="String" /><variable name="position" type="int" />

</data>

Page 31: Data binding 入門淺談

MainActivityBinding …

private com.awonwon.model.User mUser;private String mDatetime;private int mPotision;

private com.awonwon.model.User getUser();private void setUser(com.awonwon.model.User user);

private String getDatetTime();private void setDateTime(String datetime);

private int getPosition();private void setPosition(int position);

Page 32: Data binding 入門淺談

2. Set Value Example

android:text="@{user.lastName}"android:text="@{MyStringUtils.capitalize(user.firstName)}"

android:visibility="@{user.isAdult ? View.VISIBLE : View.GONE}"

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

Page 33: Data binding 入門淺談

Null Coalescing

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

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

Page 34: Data binding 入門淺談

• + - / * %

• +

• && || & | ^

• + - ! ~

• >> >>> <<

• == > < >= <=

• instanceof

• ()

• null

• Cast

• List Array Map

• ?:

※ XML encode : & = &amp;

Page 35: Data binding 入門淺談

<TextView android:text='@users.age > 18 ? user.name.substring(0,1).toUpperCase() + "." + user.lastName : @string/redacted'/>

Page 36: Data binding 入門淺談

BindAdapter

layout attribute

<ImageView...

app:imageUrl="@{user.avatarUrl}...

/>

Page 37: Data binding 入門淺談

BindAdapter

src field

@BindingAdapter(value = {"app:imageUrl"}, requireAll = true)public static void loadImgUrl(ImageView view, String path){

Picasso.with(view.getContext()).load(path).fit().centerCrop().into(view);

}

Page 38: Data binding 入門淺談

ID?

• static final MainActivityDataBinding

<TextViewandroid:id="@+id/view_name"android:layout_width="match_parent"android:layout_height="wrap_content"android:text=""/>

public final TextView view_name;

Page 39: Data binding 入門淺談

JAVA Class

public class MainAcivity extends AppCompatActivity{

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

MainActivityDataBinding binding = DataBindingUtil.setContentView(this, R.layout.main_layout);

User user = new User("8591", " ", "5", "2000");

binding.setUser(user);}

}

Page 40: Data binding 入門淺談

DataBinding

public class MainAcivity extends AppCompatActivity{

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

MainActivityDataBinding binding = DataBindingUtil.setContentView(this, R.layout.main_layout);

User user = new User("8591", " ", "5", "2000");binding.setUser(user);

}

}

Create DataBinding Class

Set Variable Value

Page 41: Data binding 入門淺談

1. Create DataBinding Class

MainActivityDataBinding binding = DataBindingUtil.setContentView(this, R.layout.main_layout);

ItemBinding binding = DataBindingUtil.inflate(LayoutInflater.from(c), R.layout.item, parent, false);

Page 42: Data binding 入門淺談

2. Set Variable Value

binding.setUser(user);

binding.setVariable(BR.user, user);

Page 43: Data binding 入門淺談

…Object Value

Page 44: Data binding 入門淺談

Observable Binding

1. BaseObservable & set method notifyPropertyChanged

public class User extends BaseObservable {private String name;

@Bindablepublic String getName() {

return name;}

public void setLastName(String name) {this.name = name;notifyPropertyChanged(BR.name);

}}

Page 45: Data binding 入門淺談

Observable Binding

2. ObservableField<T>

public final ObservableField<ItemAdapter> mItemAdapter = new ObservableField<>();

mItemAdapter.get().updateData(items);

mItemAdapter.set(adapter);

Page 46: Data binding 入門淺談

RecyclerAdapter

public class ItemViewHolder extends RecyclerView.ViewHolder {private ItemBinding binding;

public ItemViewHolder(View itemView) {super(itemView);binding = DataBindingUtil.bind(itemView);

}

public ItemBinding getBinding(){return binding;

}

public void setBinding(ItemBinding binding){this.binding = binding;

}}

Page 47: Data binding 入門淺談

RecyclerAdapter@Overridepublic ItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

GalleryItemBinding binding = DataBindingUtil.inflate(LayoutInflater.from(c), R.layout.item_gallery, parent, false);

ItemViewHolder holder = new ItemViewHolder(binding.getRoot());holder.setBinding(binding);return holder;

}

@Overridepublic void onBindViewHolder(ItemViewHolder holder, int position) {

holder.binding.setItem(mItems.get(position));holder.binding.setPosition(position);

if (getItemViewType(position)==TYPE_SELECTED) {holder.binding.setSelected(true);

}

holder.binding.executePendingBindings();

}

Page 48: Data binding 入門淺談

EditTextTwo-Way Binding

Page 49: Data binding 入門淺談

Two-Way Binding

•Android Studio 2.1 Preview 3

<EditText android:text="@={user.name}" .../>

dependencies {classpath 'com.android.tools.build:gradle:2.1.0-alpha3'

}

https://halfthought.wordpress.com/2016/03/23/2-way-data-binding-on-android/

Page 50: Data binding 入門淺談

DataBinding

Page 51: Data binding 入門淺談

Clean Code

Zero Reflection

Official Library

MMVM

Page 52: Data binding 入門淺談

Clean Code

Zero Reflection

Official Library

MMVM

Page 53: Data binding 入門淺談

Performance • findViewById V.S. DataBinding

• findViewById

View

• DataBinding

Compiler Timer

View

RootView

LinearLayout

ImageView

RelativeLayout

TextView

LinearLayout

TextView

ImageView

Page 54: Data binding 入門淺談

Q&A

Page 55: Data binding 入門淺談

DataBinding Google I/Ohttps://realm.io/news/data-binding-android-boyar-mount/