元件化封裝之標題欄Toolbar

歸零567發表於2018-02-01
元件化封裝

封裝前後對比

封裝前：
    在每個Activity或者Fragement寫標題欄佈局檔案
    在每個Activity或者Fragement給相應控制元件賦值，設定點選事件
    在BaseActivity中進行賦值或者點選事件
封裝後：
    只需要在相應的Activity或者Fragment中一行程式碼進行相應的設定
    好處：解耦
複製程式碼

效果

result.gif

使用方式

繼承BaseTitleBar重寫相應的方法

普通的TitleBar
    1，繼承BaseTitleBar
    2,重寫BindLayout，繫結標題欄的佈局檔案
    3,重寫bindView，對佈局檔案裡面子View文字和圖片賦值及事件處理
    4，重寫Builder內部類繼承BaseTitleBar中的Builder
        1，重寫build方法
            返回BaseTitlteBar子類物件，通過構造方法將Builder傳給BaseTitleBar，這樣可以獲取Builder中設定的引數
        2，重寫構造方法Buider(Context context)
可摺疊滾動的TitleBar
    1，跟普通的TitleBar是一樣的設定
    2，佈局檔案中設定
        根佈局是AppbarLayout
            Toolbar要設定scrollFlags
複製程式碼

相應引數的作用

//如果是NormalTitleBar可以不傳ViewGroup引數，預設新增到系統根佈局
//如果是可摺疊TitileBar必須傳ViewGroup引數，要將titlebar新增到協調者佈局下面
new NormalTitlebar.Builder(Context context,ViewGroup parent)
    //設定標題欄
    .setTitle()
    //設定左邊ICon
    .setLeftIcon()
    //設定左邊文字
    .setLeftText()
    //設定右邊Icon
    .setRightIcon()
    //設定右邊文字
    .setRightText()
    //新增點選事件OnTitleListener
            onLeftText:左邊文字回撥
            onLeftIcon:左邊Icon回撥
            onRightText:右邊文字回撥
            onRightIcon:右邊Icon回撥
    .addListener()
    .build();
複製程式碼

Activity中使用

public class NormalActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_normal);
    //初始化標題欄
    initNormalToolbar();
}

private void initNormalToolbar() {
    new NormalTitleBar.Builder(this)
            .setTitle("Toolbar封裝")
            .setLeftIcon(R.mipmap.ic_back)
            .setRightText("右邊文字")
            .build();
}
複製程式碼

}

封裝原理

原理

1，獲取Activity的根佈局檢視
    可以從Activity的佈局檔案中獲取
    也可以通過Context獲取當前Activity，從系統預設的Activity根佈局獲取
       ((Activity) mBuilder.mContext).findViewById(android.R.id.content);
2，將TitleBar的這個檢視新增到根佈局

3，給TitleBar裡面的控制元件設定相應的值和點選事件
複製程式碼

封裝的2個類解析

BaseTitleBar方法解析
1，BaseTitleBar(Builder builder)
1，構造方法將Builder值賦給BaseTitleBar可以獲取裡面引數值
    
2，呼叫onCreate方法，獲取Activity的根佈局檢視並新增當前的TitleBar檢視
複製程式碼
2，onCreate()
第一步：獲取Activity的根佈局檢視
    
        1,預設是從Builder的構造方法中獲取
        2，如果Builder中沒有，直接獲取系統的根佈局檢視
                if(mBuilder.mParent ==null){
                    //獲取Activity的根檢視，這個是AppCompatActivity才有的
                    mBuilder.mParent = ((Activity) mBuilder.mContext).findViewById(android.R.id.content);;
                }
                
                if(mBuilder.mParent==null){
                    return;
                }


第二步：新增當前的TitleBar檢視到根佈局檢視

        //1，獲取標題欄檢視
        View titleBarView = LayoutInflater.from(mBuilder.mContext).inflate(bindLayout(), mBuilder.mParent, false);

        //2,新增到父控制元件
        mBuilder.mParent.addView(titleBarView);
複製程式碼
3，bindLayout()
封裝的Titilebar的佈局
複製程式碼
4，bindView()
設定Titilebar佈局中的文字，圖片，點選事件
複製程式碼
5，Builder內部類
1，構造方法
    Builder(Context context, ViewGroup parent)
    將上下文和根佈局檢視傳給BaseTitleBar
2，設定引數方法
    獲取BaseTitleBar佈局控制元件裡面和引數
3，build方法
    abstract BaseTitleBar build()
    讓子類繼承，返回BaseTitleBar的子類物件並將Builder通過構造方法傳遞給BaseTitleBar
複製程式碼
OnTitleLisenter
標題欄的點選事件的封裝
 onLeftText：左邊文字點選   
 onLeftIcon：左邊圖示的點選
 onRightText：右邊文字點選
 onRightIcon：右邊圖示的點選
複製程式碼

元件化封裝之標題欄Toolbar原始碼地址

https://github.com/guixin567/TitleBar

相關文章