toolbar頭部(相同的頭部使用include引用)

最火開源框架MVVMhabit
一. 準備工作
二. 快速上手

三. 數據綁定

  1. TextView綁定
  2. onClick綁定
  3. ImageView綁定
  4. ListView綁定
  5. RecyclerView綁定

四. 其他

  1. toolbar頭部標題
  2. 底部tabBar第三方按鈕

在Android中很多重復的布局我們可以帶出截取出來寫成一個layout_toolbar.xml布局,在使用的時候通過include引入布局

創(chuàng)建toolbar

1缠沈、新建xml布局layout_toolbar.xml

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

    <data>

        <variable
            name="toolbarViewModel"
            type="com.makuan.template.base.ToolbarViewModel" />
    </data>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/white"
        binding:contentInsetStart="0dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/iv_back"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:background="?selectableItemBackground"
                android:padding="12dp"
                android:src="@mipmap/back"
                binding:onClickCommand="@{toolbarViewModel.backOnClick}" />

            <TextView
                android:id="@+id/tv_title"
                style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:ellipsize="end"
                android:gravity="center"
                android:maxEms="12"
                android:singleLine="true"
                android:text="@{toolbarViewModel.titleText}"
                android:textColor="@color/textColor"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/tv_right_text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="?selectableItemBackground"
                android:gravity="center"
                android:padding="12dp"
                android:text="@{toolbarViewModel.rightText}"
                android:textColor="@color/textColor"
                android:textSize="18sp"
                android:visibility="@{toolbarViewModel.rightTextVisibleObservable}"
                binding:onClickCommand="@{toolbarViewModel.rightTextOnClick}" />

            <ImageView
                android:id="@+id/iv_right_icon"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="?selectableItemBackground"
                android:gravity="center"
                android:padding="12dp"
                android:src="@mipmap/toolbar_more"
                android:visibility="@{toolbarViewModel.rightIconVisibleObservable}"
                binding:onClickCommand="@{toolbarViewModel.rightIconOnClick}" />

            <View
                style="@style/ViewLineStyle"
                android:layout_alignParentBottom="true" />
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>
</layout>

2处铛、創(chuàng)建toolbarViewModel.java

public class ToolbarViewModel<M extends BaseModel> extends BaseViewModel<M> {
    //標題文字
    public ObservableField<String> titleText = new ObservableField<>("");
    //右邊文字
    public ObservableField<String> rightText = new ObservableField<>("更多");
    //右邊文字的觀察者
    public ObservableInt rightTextVisibleObservable = new ObservableInt(View.GONE);
    //右邊圖標的觀察者
    public ObservableInt rightIconVisibleObservable = new ObservableInt(View.GONE);
    //兼容databinding,去泛型化
    public ToolbarViewModel toolbarViewModel;

    public ToolbarViewModel(@NonNull Application application) {
        this(application, null);
    }

    public ToolbarViewModel(@NonNull Application application, M model) {
        super(application, model);
        toolbarViewModel = this;
    }

    /**
     * 設置標題
     *
     * @param text 標題文字
     */
    public void setTitleText(String text) {
        titleText.set(text);
    }

    /**
     * 設置右邊文字
     *
     * @param text 右邊文字
     */
    public void setRightText(String text) {
        rightText.set(text);
    }

    /**
     * 設置右邊文字的顯示和隱藏
     *
     * @param visibility
     */
    public void setRightTextVisible(int visibility) {
        rightTextVisibleObservable.set(visibility);
    }

    /**
     * 設置右邊圖標的顯示和隱藏
     *
     * @param visibility
     */
    public void setRightIconVisible(int visibility) {
        rightIconVisibleObservable.set(visibility);
    }

    /**
     * 返回按鈕的點擊事件
     */
    public final BindingCommand backOnClick = new BindingCommand(new BindingAction() {
        @Override
        public void call() {
            finish();
        }
    });

    public BindingCommand rightTextOnClick = new BindingCommand(new BindingAction() {
        @Override
        public void call() {
            rightTextOnClick();
        }
    });
    public BindingCommand rightIconOnClick = new BindingCommand(new BindingAction() {
        @Override
        public void call() {
            rightIconOnClick();
        }
    });

    /**
     * 右邊文字的點擊事件妓雾,子類可重寫
     */
    protected void rightTextOnClick() {
    }

    /**
     * 右邊圖標的點擊事件,子類可重寫
     */
    protected void rightIconOnClick() {
    }
}

創(chuàng)建完成

開始使用toolbar垒迂,在新的activity中引用

1械姻、xml文件引用 layout_toolbar.xml

<include
    android:id="@+id/include"
    layout="@layout/layout_toolbar"
    binding:toolbarViewModel="@{viewModel.toolbarViewModel}" />

2、viewModel 中繼承 BaseViewModel 換成 ToolbarViewModel 就結束了机断,

設置toolbar 標題事件

1楷拳、在 ViewModel 構造方法中調用下面方法

setTitleText 設置標題
setRightText 設置右邊文字
setRightTextVisible 顯示隱藏右邊文字
setRightIconVisible 顯示隱藏右邊圖標,(右邊文字和圖標最好只顯示一個吏奸,他們是重疊的)

2欢揖、在ViewModel 中重寫方法

rightTextOnClick 右邊文字點擊事件
rightIconOnClick 右邊圖標點擊事件

以上方法都是在創(chuàng)建ToolbarViewModel.java的時候創(chuàng)建的方法,可以按照需求添加

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末奋蔚,一起剝皮案震驚了整個濱河市她混,隨后出現的幾起案子烈钞,更是在濱河造成了極大的恐慌,老刑警劉巖坤按,帶你破解...
    沈念sama閱讀 217,907評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件棵磷,死亡現場離奇詭異,居然都是意外死亡晋涣,警方通過查閱死者的電腦和手機仪媒,發(fā)現死者居然都...
    沈念sama閱讀 92,987評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來谢鹊,“玉大人算吩,你說我怎么就攤上這事〉瓒螅” “怎么了偎巢?”我有些...
    開封第一講書人閱讀 164,298評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長兼耀。 經常有香客問我压昼,道長,這世上最難降的妖魔是什么瘤运? 我笑而不...
    開封第一講書人閱讀 58,586評論 1 293
  • 正文 為了忘掉前任窍霞,我火速辦了婚禮,結果婚禮上拯坟,老公的妹妹穿的比我還像新娘但金。我一直安慰自己,他們只是感情好郁季,可當我...
    茶點故事閱讀 67,633評論 6 392
  • 文/花漫 我一把揭開白布冷溃。 她就那樣靜靜地躺著,像睡著了一般梦裂。 火紅的嫁衣襯著肌膚如雪似枕。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,488評論 1 302
  • 那天年柠,我揣著相機與錄音凿歼,去河邊找鬼。 笑死彪杉,一個胖子當著我的面吹牛毅往,可吹牛的內容都是我干的牵咙。 我是一名探鬼主播派近,決...
    沈念sama閱讀 40,275評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼洁桌!你這毒婦竟也來了渴丸?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,176評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谱轨,沒想到半個月后戒幔,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,619評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡土童,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3 336
  • 正文 我和宋清朗相戀三年诗茎,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片献汗。...
    茶點故事閱讀 39,932評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡敢订,死狀恐怖,靈堂內的尸體忽然破棺而出罢吃,到底是詐尸還是另有隱情楚午,我是刑警寧澤,帶...
    沈念sama閱讀 35,655評論 5 346
  • 正文 年R本政府宣布尿招,位于F島的核電站矾柜,受9級特大地震影響,放射性物質發(fā)生泄漏就谜。R本人自食惡果不足惜怪蔑,卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望丧荐。 院中可真熱鬧饮睬,春花似錦、人聲如沸篮奄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽窟却。三九已至昼丑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間夸赫,已是汗流浹背菩帝。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留茬腿,地道東北人呼奢。 一個月前我還...
    沈念sama閱讀 48,095評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像切平,于是被迫代替她去往敵國和親握础。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2 354

推薦閱讀更多精彩內容