ToolBar的使用以及沉浸式效果

一、ToolBar作为导航栏的优势

1.toolbar使用简单，可以定制

2.toolbar可复用，不需要复杂的xml

3.Google官方推荐，Activity集成Toolbar

二、ToolBar的使用方式

1.添加Toolbar

布局内添加toolbar控件

2.将系统导航栏actionbar替换为toolbar

// 主题设置为 NoActionBar

// activity替换toolbar

Toolbar toobar = findViewById(R.id.toolbar);

setSupportAciotnBar(toolbar);

// 可以通过布局文件或者代码动态设置title、substitle、anvigationIcon等

toolbar.setTitle("Title");

// 设置title字体颜色、大小 xml中通过titleTextAppearance，设置自定义styles

      <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="@color/colorTransparent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:subtitleTextAppearance="@style/Theme.Toolbar.SubTitle"
            app:titleTextAppearance="@style/Theme.Toolbar.Title"
            app:popupTheme="@style/OverflowMenuStyle" >
        </android.support.v7.widget.Toolbar>

// 设置menu

// 加载系统菜单，重写 onCreateOptionsMenu， setSupportAciotnBar后可以使用系统菜单

     public boolean onCreateOptionsMenu(Menu menu)  {
                     getMenuInflater().inflate(R.menu.menu_music, menu);
                     return true;
                   }

// 设置 float menu 悬浮位置在 toolbar下面

 <style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
                  <item name="overlapAnchor">false</item>  <!--把该属性改为false即可使menu位置位于toolbar之下-->
             </style>
            //  设置更多菜单Icon    toolbar.setOverflowIcon(R.drawable.more)；

//  对Toolbar内元素的设置，可以通过反射的方式拿到toolbar内的所有view进行设置

三、沉浸式效果

沉浸式效果为，状态栏为透明效果，与App主题一致

1.如何开启沉浸式

// 通过sytle进行设置，将状态栏，导航栏设置为透明效果 ，不推荐，建议通过代码设置，可兼容各版本

<item name = "android:windowTranslucentStatus">true</item>

<item name = "android:windowTranslucnetNavigaion">true</item>

// 通过代码设置透明状态栏

if (Build.VERSION.SDK_INT >= Build.VERSIN.LOLLIPOP) {

    Window window = activity.getWindow();

    window.clearFlags(WindowManager.LayoutParams.FALG_TRANSLUSION_STATUS | WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATINO);

    window.getDecorView().setSystemVisibility(

    View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN // 状态栏不会被隐藏但activity布局会扩展到状态栏所在位置

    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE //  保证内容尺寸不随 status bar 的显示和隐藏而改变);

    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNT);

   // 使用setStatusColor可以设置状态栏背景颜色，但是必须满足

    //  window不能设置android.view.WindowManager.LayoutParams#FLAG_TRANSLUCENT_STATUS标签

   //  window必须设置WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS标签

   window.setStatusColor(Color.TRANSPARENT);

} else {

    activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

}

2.解决toolbar延伸到状态栏问题

// 状态栏设置为透明效果后，整个布局会延伸到状态栏

// 可以通过将contentview中的第一个view设置 setFitsSystemWindows的方式，不推荐

// view设置为setFitsSystemWindows 后，系统会为添加padding

ViewGroup contentView = findViewById(android.R.id.content);

View parentView = contentView.getChildAt(0);

parentView.setFitsSystemWindows (true);

// 以上方式不推荐，通过上述方式设置后，状态栏颜色为顶层布局的背景颜色，如果想改变状态栏的颜色，只能改变顶层布局的背景颜色，存在过度绘制

// 推荐方式，在根View DecorView添加一个View，高度和StatusBar一致，因为DecorView 为 FrameLayout，所以需要为toolbar的marginTop设置为StatusBar的高度。

ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();

int  count  = decorView.getChildCount();

 // 判断是否已经添加了statusBarView

if (count > 0 && decorView.getChildAt(count - 1) instanceof StatusBarView)  {

    return；

}

int statusbarHeight；

int resID = getResources().getIdentifer("status_bar_height", "dimen", "android");

if (resID > 0) {

    statusbarHeight = getResoureces().getDimensionPixelSize(resID);

}

 StatusBarView statusBarView = new StatusBarView(activity);

// statusBarView 高度设置为 statusBarHeigh

LinearLayout.LayoutParams params =  new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, statusBarHeigh);

statusBarView.setLayoutParams(params);

// statusBarView 背景颜色设置为透明

statusBarView.setBackgroundColor(Color.argb(0, 0, 0, 0));

// decorview 添加占位

decorView.addView(statusBarView);

 // toolbar设置margin

ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams)  toolBar.getLayoutParams();

 layoutParams.setMargins(0, statusbarHeight , 0, 0);

3.沉浸式状态栏

当前状态栏已经是透明颜色，并且我们在decorView添加了自定义的占位view，通过设置自动以的statusBarView的背景，和Toolbar背景颜色一致，就可以实现沉浸式状态栏了。可以根据UX设计给Toolbar和statusBarView设置任意背景。