Android自定義ToolBar並實現沉浸式的方法

前言

  ToolBar是Android 5.0推出的一個新的導航控件用於取代之前的ActionBar，由於其高度的可定製性、靈活性、具有Material Design風格等優點，越來越多的App也用上了ToolBar。

  沉浸式狀態欄是從android Kitkat（Android 4.4）開始出現的,它可以被設置成與APP頂部相同的顏色，這就使得切換APP時，整個界面就好似切換到了與APP相同的風格樣式一樣。

依賴包：
   Toolbar, implementation 'androidx.appcompat:appcompat:1.1.0'

  沉浸式, implementation 'com.gyf.immersionbar:immersionbar:3.0.0'

1、自定義Toolbar步驟：

1）、定義 /values/styles.xml

2）、自定義toolbar 繼承 androidx.appcompat.widget.Toolbar

  public class CustomToolBar extends Toolbar {   private TextView mCenterTitle;   private ImageView mCenterIcon; //中心icon   private TextView mLeftText;   private ImageButton mLeftIcon;    private TextView mSettingText;   private ImageButton mSettingIcon;     public CustomToolBar(Context context) {    super(context);   }     public CustomToolBar(Context context, AttributeSet attrs) {    super(context, attrs);   }     public CustomToolBar(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);   }        public void setLeftText(@StringRes int id) {    setLeftText(this.getContext().getText(id));   }        public CustomToolBar setLeftText(CharSequence text) {    Context context = this.getContext();    if (this.mLeftText == null) {     this.mLeftText = new TextView(context);     this.mLeftText.setGravity(Gravity.CENTER_VERTICAL);     this.mLeftText.setSingleLine();  //   this.mLeftText.setEllipsize(TextUtils.TruncateAt.END);     setLeftTextAppearance(getContext(), R.style.TextAppearance_TitleBar_subTitle);     //textView in left  //   this.addMyView(this.mLeftText, Gravity.START);     int i = dp2px(this, 16);     this.addMyView(this.mLeftText, Gravity.START, 0, 0, i, 0, 48);    }    mLeftText.setText(text);    return this;   }     public void setLeftTextAppearance(Context context, @StyleRes int resId) {    if (this.mLeftText != null) {     this.mLeftText.setTextAppearance(context, resId);    }   }     public void setLeftTextColor(@ColorInt int color) {    if (this.mLeftText != null) {     this.mLeftText.setTextColor(color);    }   }     public void setLeftTextOnClickListener(OnClickListener listener) {    if (mLeftText != null) {     mLeftText.setOnClickListener(listener);    }   }     public CustomToolBar setLeftIcon(@DrawableRes int resId) {    return setLeftIcon(ContextCompat.getDrawable(this.getContext(), resId));   }     @TargetApi(Build.VERSION_CODES.JELLY_BEAN)   public CustomToolBar setLeftIcon(Drawable drawable) {    Context context = this.getContext();    if (this.mLeftIcon == null) {     this.mLeftIcon = new ImageButton(context);      ...       this.addMyView(this.mLeftIcon, Gravity.START);    } else {     if (mLeftIcon.getVisibility() != VISIBLE) {      mLeftIcon.setVisibility(VISIBLE);     }    }    if (mLeftText != null && mLeftText.getVisibility() != GONE) {     mLeftText.setVisibility(GONE);    }    mLeftIcon.setImageDrawable(drawable);    return this;   }     public void setLeftIconOnClickListener(OnClickListener listener) {    if (mLeftIcon != null) {     mLeftIcon.setOnClickListener(listener);    }   }     public void setLeftIconVisibility(int visibility) {    if (mLeftIcon != null) {     mLeftIcon.setVisibility(visibility);    }   }        public CustomToolBar setMyCenterTitle(@StringRes int id, boolean center) {    return setMyCenterTitle(this.getContext().getText(id), center);   }        public void setMyCenterTitle(@StringRes int Rid) {    setMyCenterTitle(this.getContext().getText(Rid));   }     public void setMyCenterTitle(CharSequence text) {    Context context = this.getContext();    if (this.mCenterTitle == null) {     this.mCenterTitle = new TextView(context);     ...      } else {     if (this.mCenterTitle.getVisibility() != VISIBLE) {      mCenterTitle.setVisibility(VISIBLE);     }    }    if (mCenterIcon != null && mCenterIcon.getVisibility() != GONE) {     mCenterIcon.setVisibility(GONE);    }       ...     }   public CustomToolBar setMyCenterTitle(CharSequence text, boolean center) {    Context context = this.getContext();    if (this.mCenterTitle == null) {     this.mCenterTitle = new TextView(context);       ...      } else {     if (this.mCenterTitle.getVisibility() != VISIBLE) {      mCenterTitle.setVisibility(VISIBLE);     }    }    if (mCenterIcon != null && mCenterIcon.getVisibility() != GONE) {     mCenterIcon.setVisibility(GONE);    }       if (!center) {     setTitle(text);     setTitleTextColor(getResources().getColor(R.color.black));    } else {     mCenterTitle.setText(text);     mCenterTitle.setTextColor(getResources().getColor(R.color.black));     mCenterTitle.setTextSize(16);    }    return this;   }     public void setMyCenterTextAppearance(Context context, @StyleRes int resId) {    if (this.mCenterTitle != null) {     this.mCenterTitle.setTextAppearance(context, resId);    }   }     public void setMyCenterTextColor(@ColorInt int color) {    if (this.mCenterTitle != null) {     this.mCenterTitle.setTextColor(color);    }   }     public void setMyCenterTextOnClickListener(OnClickListener listener) {    if (mCenterTitle != null) {     mCenterTitle.setOnClickListener(listener);    }   }        public void setMyCenterIcon(@DrawableRes int resId) {    setMyCenterIcon(ContextCompat.getDrawable(this.getContext(), resId));   }     public void setMyCenterIcon(Drawable drawable) {    Context context = this.getContext();    if (this.mCenterIcon == null) {       ...      } else {     if (mCenterIcon.getVisibility() != VISIBLE) {      mCenterIcon.setVisibility(VISIBLE);     }    }    if (mCenterTitle != null && mCenterTitle.getVisibility() != GONE) {     mCenterTitle.setVisibility(GONE);    }        setTitle("");    mCenterIcon.setImageDrawable(drawable);   }        public void setMySettingText(@StringRes int Rid) {    setMySettingText(this.getContext().getText(Rid));   }     public void setMySettingText(CharSequence text) {    Context context = this.getContext();    if (this.mSettingText == null) {       ...      } else {     if (mSettingText.getVisibility() != VISIBLE) {      mSettingText.setVisibility(VISIBLE);     }    }    if (mSettingIcon != null && mSettingIcon.getVisibility() != GONE) {     mSettingIcon.setVisibility(GONE);    }    mSettingText.setText(text);    mSettingText.setTextSize(14);    mSettingText.setTextColor(getResources().getColor(R.color.toolbar_title));     }     public void setMySettingTextAppearance(Context context, @StyleRes int resId) {    if (mSettingText != null) {     mSettingText.setTextAppearance(context, resId);    }   }     public void setMySettingTextColor(@ColorInt int color) {    if (mSettingText != null) {     mSettingText.setTextColor(color);    }   }     public void setSettingTextOnClickListener(OnClickListener listener) {    if (mSettingText != null) {     mSettingText.setOnClickListener(listener);    }   }     public CustomToolBar setMySettingIcon(@DrawableRes int resId) {    return setMySettingIcon(ContextCompat.getDrawable(this.getContext(), resId));  //  ViewConfiguration.get(this.getContext()).getScaledTouchSlop();   }     @TargetApi(Build.VERSION_CODES.JELLY_BEAN)   public CustomToolBar setMySettingIcon(Drawable drawable) {    Context context = this.getContext();    if (this.mSettingIcon == null) {       ...      } else {     if (mSettingIcon.getVisibility() != VISIBLE) {      mSettingIcon.setVisibility(VISIBLE);     }    }    if (mSettingText != null && mSettingText.getVisibility() != GONE) {     mSettingText.setVisibility(GONE);    }    mSettingIcon.setImageDrawable(drawable);    return this;   }     public void setSettingIconOnClickListener(OnClickListener listener) {    if (mSettingIcon != null) {     mSettingIcon.setOnClickListener(listener);    }   }     private void addSimpleView(View v, int gravity) {    addSimpleView(v, gravity, 0, 0, 0, 0);   }     private void addSimpleView(View v, int gravity, int left, int top, int right, int bottom) {    LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT,      LayoutParams.WRAP_CONTENT, gravity);    lp.setMargins(left, top, right, bottom);    this.addView(v, lp);   }        private void addMyView(View v, int gravity) {      addMyView(v, gravity, 0, 0, dp2px(this, 16), 0);   }     private void addMyView(View v, int gravity, int left, int top, int right, int bottom) {    LayoutParams lp = new LayoutParams(dp2px(this, 20),      dp2px(this, 20), gravity);    lp.setMargins(left, top, right, bottom);    this.addView(v, lp);   }     private void addMyView(View v, int gravity, int left, int top, int right, int bottom, int width) {    LayoutParams lp = new LayoutParams(dp2px(this, width),      20, gravity);    lp.setMargins(left, top, right, bottom);    this.addView(v, lp);   }       public CustomToolBar setCenterTitleWithImg(CharSequence text, Drawable drawable, boolean center) {    Context context = this.getContext();    if (this.mCenterTitle == null) {     this.mCenterTitle = new TextView(context);       ...       if (this.mCenterTitle.getVisibility() != VISIBLE) {      mCenterTitle.setVisibility(VISIBLE);     }    }      if (this.mCenterIcon == null) {     this.mCenterIcon = new ImageView(context);       ...      } else {     if (mCenterIcon.getVisibility() != VISIBLE) {      mCenterIcon.setVisibility(VISIBLE);     }    }      mCenterTitle.setTextSize(18);    mCenterTitle.setTextColor(getResources().getColor(R.color.black));    mCenterTitle.setText(text);    mCenterIcon.setImageDrawable(drawable);      return this;   }     public void setCenterTitleWithImgOnClickListener(OnClickListener listener) {    if (mCenterTitle != null) {     ((View) mCenterTitle.getParent()).setOnClickListener(listener);    }   }  }

2、自定義Toolbar使用

1）、res/layout創建佈局文件

2）、在佈局中使用

  ...

3）、代碼中使用

a、初始化：

    mBinding.root.toolbar.setNavigationIcon(R.mipmap.register_close)    mBinding.root.toolbar.setMyCenterTitle(getString(R.string.register), true)    mBinding.root.toolbar.setMySettingText(getString(R.string.login))

b、點擊事件：

    mBinding.root.toolbar.setNavigationOnClickListener {      ....    }        mBinding.root.toolbar.setSettingTextOnClickListener {      ...  }

4）、沉浸式，設置toolbar背景顏色、文字顏色，一般寫在基類

   protected open fun initImmersionBar() {      //在BaseActivity裡初始化      mImmersionBar = ImmersionBar.with(this)      if (toolbar != null) {        mImmersionBar.titleBar(toolbar)      }      mImmersionBar.statusBarDarkFont(true)    //  mImmersionBar.keyboardEnable(true).navigationBarWithKitkatEnable(false).init()     // mImmersionBar.init()            ImmersionBar.with(this).init()    }

Google原生的效果，不必多說，可以實現類似這樣的效果

注意：

1、配置整個app的toolbar風格，在/value/styles.xml文件修改代碼

   @android:color/white@android:color/white@android:color/white..." _ue_custom_node_="true">

2、修改了 toolbar的高度 ，怎麼讓navigationIcon顯示在toolbar中心?

  只要設置如下，即可：android:minHeight="@dimen/toolbar_height"

3、toolbar佈局文件位置

  如果在commonlibrary目錄創建該文件，在app 下還需要複製一份，因為在app 使用toolbar，kotlin-android-extensions引用不到commonlibrary目錄下的佈局文件。

代碼Github：https://github.com/AlbertShen0211/PlayAndroid