当前位置：移动技术网 > 移动技术>移动开发>Android > Android自定义ToolBar并实现沉浸式的方法

Android自定义ToolBar并实现沉浸式的方法

2020年06月23日 | 移动技术网移动技术 | 我要评论

前言

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <style name="textappearance_titlebar_title" parent="textappearance.appcompat.toolbar.title">
 ...
 </style>

 <style name="textappearance_titlebar_subtitle" parent="textappearance.appcompat.toolbar.subtitle">
  ....
 </style>
</resources>

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创建布局文件

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

  <com.ktx.view.customtoolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionbarsize"
    android:background="@android:color/white"  
    app:popuptheme="@style/themeoverlay.appcompat.light"
    app:titletextcolor="@android:color/black" />

</framelayout>

2）、在布局中使用

<?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"
  xmlns:binding="http://schemas.android.com/tools">
  <data>
    <variable
      name="viewmodel"
      type="com.android.playandroid.viewmodel.loginviewmodel" />
  </data>
  <androidx.constraintlayout.widget.constraintlayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bkg"
    android:orientation="vertical">

    <include
      layout="@layout/title_layout"
      app:layout_constraintleft_toleftof="parent"
      app:layout_constrainttop_totopof="parent" />
     ...
  </androidx.constraintlayout.widget.constraintlayout>

</layout>

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文件修改代码

 <style name="apptheme" parent="theme.appcompat.light.noactionbar">
  
    <item name="colorprimary">@android:color/white</item>
    <item name="colorprimarydark">@android:color/white</item>
    <item name="coloraccent">@android:color/white</item>

   ...

 
  </style>

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

总结

到此这篇关于android自定义toolbar并实现沉浸式的文章就介绍到这了,更多相关android 自定义toolbar并沉浸式内容请搜索移动技术网以前的文章或继续浏览下面的相关文章希望大家以后多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

#Android Studio使用手册-配置使用01#

一、第一次安装：安装 Android SDK ，安装 JDK 安装 Android StdioAndroid S... [阅读全文]
【环境搭建】mnn - android

1，安装 [阅读全文]
【Android】了解ViewStub的实现

1、为什么ViewStub对布局加载性能有优化作用？ 1.1 ViewStub的构造函数里有： setV... [阅读全文]
牛客数码（枚举优化+数论思维）

传送门题面给定两个整数lll和rrr，对于所有满足1≤l≤x≤r≤1091 ≤ l ≤ x ≤ r ≤ 10^9... [阅读全文]
Codeforces C. A Cookie for You (模拟 / 分类 / 贪心) (Round #654 Div.2)

传送门题意：主人住了两种饼干a，b块，现在邀请了两类客人n，m个。其中第一类客人喜欢吃多的饼干(相等的时候喜欢... [阅读全文]
DialogFragment弹窗（带黑色透明背景和不带黑色透明背景）

最终实现效果带黑色透明背景不带黑色透明背景核心代码俩种style代表2种样式的弹框 <style n... [阅读全文]
Android进阶之光笔记一：自定义View《一》

重写一个view一般情况下只需要重写onDraw()方法。那么什么时候需要重写onMeasure()、onLay... [阅读全文]
SystemUI 如何判断当前界面显示的为全屏界面？

不积跬步无以至千里一.前摘怎么判断当前的用户处于全屏模式呢？处于全屏模式当中即是状态栏处于沉浸状态，而往... [阅读全文]
Android集成阿里百川电商SDK踩过的坑总结

本文为原创，转载需标明链接1:：注册应用，Android上传apk安装包获取安全图片，安全图片名称为yw_122... [阅读全文]
Android 修改状态栏字体的颜色

1.StatusBarUtilpublic class StatusBarUtil { /** *... [阅读全文]

网友评论


验证码：

Android自定义ToolBar并实现沉浸式的方法

2020年06月23日 | 移动技术网移动技术 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论