Jetpack---DataBinding

這幾年一定會火起來的一個架構
以前說了MVP---V---P---M他們之間的關系

那么MVVP他也相當于一個三層結構View--ViewModle--Modle,他的一個好處是可以雙向綁定,在View和Modle之間,他有一個databinding,可以把View和Model進行綁定,說法也可以叫雙向綁定。寫頁面多的APP用這種會很方便,當model數據發生變化的時候,view也能實時發生變化。他的開發速度非常快,而且維護起來也很簡單。Model層都不怎么需要我們關系,我們把時間精力放在view和viewmodel上面就可以了,時間精力更多的放在UI設計這一塊。

一 簡單使用

寫一個很簡單的demo,類似一個登陸界面,輸入賬號密碼的
注意要在配置文件配置這句話

image.png
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >
    <data>
        <!--此處定義該布局要用到的數據的名字和類型-->
        <variable
            name="user"
            type="com.example.lsn42_mvvm_20191009.User" />
    </data>
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        
        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            app:header="@{user.header}"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{`姓名:`+user.name}"
             />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{`密碼:`+user.password}"
            />
    </LinearLayout>
</layout>

根目錄一定要是layout,data標簽配合variable這里表示該布局定義的數據名稱和類型,這個類型就是Userbean
app:header="@{user.header}表示自定義屬性,user.name user.password就不多說了

/**
 * 這個類就相當于一個ViewModel
 */
public class User extends BaseObservable {
    private String name;
    private String password;

    private String header;

    public String getHeader() {
        return header;
    }

    public void setHeader(String header) {
        this.header = header;
    }

    public User(String name, String password,String header) {
        this.name = name;
        this.password = password;
        this.header=header;
    }

    @Bindable
    public String getName() {
        return name;
    }

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

    }
    @Bindable
    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
        notifyPropertyChanged(BR.password);
    }
    //自定義屬性:提供一個靜態方法來加載image
    @BindingAdapter("bind:header")
    public static void getImage(ImageView view,String url){
        Picasso.with(view.getContext()).load(url).into(view);
    }
}

既然寫一個登陸頁面賬號密碼的demo,那么name和password就對應著賬號密碼,header這里表示自定義屬性。我們都進行get和set方法
注意了:這里我們要在賬號密碼的get方法上面添加@Bindable注解。在set方法里面添加notifyPropertyChanged(BR.name)

至于我們之前在布局里里寫的imageview,我們自定義了一個header屬性,我們再來寫一個方法,方法是靜態方法并且里面一定要聲明@BindingAdapter("bind:header")這里bind:header就相當于已經把布局里面的imageview綁定再一起了,然后調用picasso加載就行了。

至于在Activity我們的表示是。

public class MainActivity extends AppCompatActivity {

    User user;

    Handler handler=new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
        ActivityMainBinding binding=DataBindingUtil.setContentView(this,R.layout.activity_main);
        //這些數據是model層來的
        user=new User("dasuda","123","http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg");
        binding.setUser(user);
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                user.setName("alan");
                user.setPassword("*******");
            }
        },5000);
    }
}

有兩個地方需要注意:
我們這時候setcontentView就不能用以前的,要用ActivityMainBinding binding=DataBindingUtil.setContentView(this,R.layout.activity_main)拿到綁定布局。

然后我們造一個數據源User,最后一步去綁定數據源binding.setUser(user);
這里我們模擬了一開始啟動的時候,會看到一個我們初始值的賬號密碼,后面我用handler延遲5秒消息去改變這個賬號密碼,那么對應的UI界面就會5s去改變這個賬號密碼。

如果要點擊事件的話,我們可以加上@{user.click},并且在User類里面處理

<TextView
            android:onClick="@{user.click}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@{user.password}"/>
 public void click(View view){
        Toast.makeText(view.getContext(),getName() , Toast.LENGTH_SHORT).show();
    }
如果布局當中有listview或者RecycleView這種怎么寫?

我們的MainActivity里面直接放入listview。activity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  >

    <ListView
        android:id="@+id/listView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

User類里面寫法還是和之前一樣的,User就對應每個item的條目,因此此處的item的布局寫法也是和上面一樣的。item.xml

<?xml version="1.0" encoding="utf-8"?>
<layout  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="user"
            type="com.example.lsn42_mvvm_2019100902.User"/>
    </data>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ImageView
            app:header="@{user.header}"
            android:layout_width="50dp"
            android:layout_height="50dp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@{user.name}"/>
        <TextView
            android:onClick="@{user.click}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@{user.password}"/>

    </LinearLayout>

    </layout>
public class MainActivity extends AppCompatActivity {

    ListView list;
    List<User> data=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        list=(ListView)findViewById(R.id.listView);
        data.add(new User("http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg","1","1"));
        data.add(new User("http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg","2","2"));
        data.add(new User("http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg","3","3"));
        data.add(new User("http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg","4","4"));
        list.setAdapter(new CommAdapter<User>(this,getLayoutInflater(),R.layout.item,BR.user,data));
    }
}
我們到這里主Activity就寫好了,主要看適配器,而且是可以復用的。因此適配器用泛型代替

這里new CommAdapter里面參數前兩個好理解,第三個R.layout.item是條目的布局,理解為item就上我們上面寫的,BR.user理解為那個User對象生成的viewmodel。

public class CommAdapter<T> extends BaseAdapter {

    private Context context;
    private LayoutInflater inflater;
    private int layoutId;
    private int variableId;//會自動生成

    private List<T> list;

    public CommAdapter(Context context, LayoutInflater inflater, int layoutId, int variableId, List<T> list) {
        this.context = context;
        this.inflater = inflater;
        this.layoutId = layoutId;
        this.variableId = variableId;
        this.list = list;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewDataBinding dataBinding;
        if(convertView==null){
            dataBinding= DataBindingUtil.inflate(inflater,layoutId,parent,false);
        }else{
            //就重就之前的
            dataBinding=DataBindingUtil.getBinding(convertView);
        }
        dataBinding.setVariable(variableId,list.get(position));
        return dataBinding.getRoot().getRootView();
    }
}

這樣就可以直接運行了。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,362評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,577評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,486評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,852評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,600評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,944評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,944評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,108評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,652評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,385評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,616評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,111評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,798評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,205評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,537評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,334評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,570評論 2 379