ToolBar

2018-02-03 本文已影响0人 super小立立

Toolbar 配置

Toolbar 是用来替换之前的ActionBar 的, 方便定制, 和用户一致的界面体验

单独使用
样式配置
配置AppBarLayout 使用
在Toolbar 中包含 AppCompatSpinner

Toolbar 单独使用:

简单使用

配置 layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
 android:minHeight="?attr/actionBarSize"                                 
    android:fitsSystemWindows="true"
    android:background="?android:attr/colorPrimary"
    app:theme="@style/AppBar"
    android:elevation="4dp">
</android.support.v7.widget.Toolbar>

参数解释:

minHeight = "?attr/actionBarSize" : 设置最小高度为系统配置的 actionBar 的大小

fitsSystemWindows= "true" :

我们为什么要用fitsSystemWindows?

System windows 指的就是屏幕上status bar、 navigation bar等系统控件所占据的部分。

绝大多数情况下，你都不需要理会status bar或者navigation bar 下面的空间，不过你需要注意不能让你的交互控件（比如Button）藏在status bar 或者 navigation bar下面。而android:fitsSystemWindows="true"的默认行为正好解决了这种情况，这个属性的作用就是通过设置View的padding，使得应用的content部分——Activity中setContentView()中传入的就是content——不会与system window重叠。

还有一些事情需要注意：

    fitsSystemWindows 需要被设置给根View——这个属性可以被设置给任意View，但是只有根View（content部分的根）外面才是SystemWindow，所以只有设置给根View才有用。
    Insets始终相对于全屏幕——Insets即边框，它决定着整个Window的边界。对Insets设置padding的时候，这个padding始终是相对于全屏幕的。因为Insets的生成在View layout之前就已经完成了，所以系统对于View长什么样一无所知。
    其它padding将通通被覆盖。需要注意，如果你对一个View设置了android:fitsSystemWindows="true"，那么你对该View设置的其他padding将通通无效。

在绝大多数情况下，默认情况就已经够用了。比如一个全屏的视屏播放器。如果你不想被ActionBar 或者其他System View遮住的话，那么在MatchParent的ViewGroup上设置fitsSystemWindows="true"即可。

或者，也许你希望你的RecyclerView能够在透明的navigation bar 下面滚动。那么只需将android:fitsSystemWindows="true" android:clipToPadding="false"同时使用即可, 滚动的内容会绘制在navigation bar下面，同时当滚动到最下面的时候，最后一个item下面依旧会有padding，使其可以滚到navigation bar上方（而不是在navigation bar下面滚不上来！）。

译者注：clipToPadding是ViewGroup的属性。这个属性定义了是否允许ViewGroup在padding中绘制,该值默认为true,即不允许。

android:background = "?arrt/colorPrimer" : 设置 Toolbar 背景颜色为对应在AppThemem 中设置的
android:elevation="4dp" : 设置android 手机的 X/Y/Z 中 Z 轴方向的偏移量

Java 代码中配置 title , 图标, 和点击事件:

@Override
protected void onPostCreate(@Nullable Bundle savedInstanceState) {
  super.onPostCreate(savedInstanceState);
  Toolbar toolbar = findViewById(R.id.toolbar);
  toolbar.setTitle("Faces");
  setSupportActionBar(toolbar);
  if (getSupportActionBar() != null) {
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setDisplayShowHomeEnabled(true);
    toolbar.setNavigationOnClickListener(view ->{
      onBackPressed();
    });
  }
}
//设置Toolbar 的title 为Faces,并打开和显示TOolbar 默认的返回键图标, 返回箭头
//setNavigationOnClickListener() 设置箭头点击事件. 为返回
//toolbar.setNavigationIcon(); 修改默认的图标

修改Toolbar 的样式

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
          <item name="colorPrimary">@color/msc_primary</item>
        <item name="colorPrimaryDark">@color/msc_primary_dark</item>
        <item name="colorAccent">@color/msc_accent</item>
          <item name="android:actionBarColor">@color/mac_primary</item>
</style>

<style name="ThemePopup" parent="Base.V7.Widget.AppCompat.Toolbar">
  <item name="android:textColor">@color/white</item>
  <!--设置副标题颜色-->
  <item name="android:textColorSecondary">@color/white</item>
</style>


  <style name="Base.V7.Widget.AppCompat.Toolbar" parent="android:Widget">
      <!-- 设置主标题的字体样式, 字体大小和颜色-->
      <item name="titleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Title</item>
      <!-- 设置副标题的字体样式, 字体大小和颜色-->
      <item name="subtitleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle</item>
    
      <!-- 设置Toolbar 最小高度-->
     <item name="android:minHeight">?attr/actionBarSize</item>

      <!-- 设置标题外边距-->
     <item name="titleMargin">4dp</item>
     <item name="maxButtonHeight">@dimen/abc_action_bar_default_height_material</item> 
     <item name="buttonGravity">top</item>
      <!-- 设置可以折叠的图标-->  
     <item name="collapseIcon">?attr/homeAsUpIndicator</item>
    <item name="collapseContentDescription">@string/abc_toolbar_collapse_description</item>
    <item name="contentInsetStart">16dp</item>
    <item name="contentInsetStartWithNavigation">@dimen/abc_action_bar_content_inset_with_nav</item>
    <item name="android:paddingLeft">@dimen/abc_action_bar_default_padding_start_material</item>
    <item name="android:paddingRight">@dimen/abc_action_bar_default_padding_end_material</item>
   </style>

    <!--会被默认设置的代码-->
    <style name="Base.TextAppearance.AppCompat.Widget.ActionBar.Title" parent="TextAppearance.AppCompat.Title">
      <item name="android:textSize">@dimen/abc_text_size_title_material_toolbar</item>    <item name="android:textColor">?android:attr/textColorPrimary</item>
      <item name="android:textSize">@dimen/abc_text_size_title_material_toolbar</item>
      <item name="android:textColor">?android:attr/textColorPrimary</item>
  </style>

给Toolbar 设置标题

java 代码中设置Toolbar 为界面中使用的ActionBar, Menu 需要依付在 ActionBar 上面

    @Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
      super.onPostCreate(savedInstanceState);
      Toolbar toolbar = findViewById(R.id.toolbar);
      toolbar.setTitle("Faces");
      setSupportActionBar(toolbar);
    }

在 res/menu 中创建一个 home.xml 目录

layout-2018-02-07-114209.png

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

    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="@string/home"
        app:showAsAction="always"
        android:checkable="true"
        android:iconTint="@color/white"
        />

</menu>

在Java 中直接使用menu

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.home, menu);
  return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
  int itemId = item.getItemId();
  switch (itemId){
    case R.id.home:
      Toast.makeText(this, "home icon be click", 0).show();
      break;

  }
  return super.onOptionsItemSelected(item);
}

配合AppBarLayout 一起使用

<!--将包裹在AppBarLayout 里面的内容全部视为 ActionBar 的部分
    在AppBarLayout 里面也可以包含 TabLayout(切换控件)
-->

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:subtitleTextColor="@color/white"
            app:titleTextColor="@color/white"
            app:popupTheme="@style/AppTheme.PopupOverlay" >

            <android.support.v7.widget.AppCompatSpinner
                android:id="@+id/locationSelect"
                android:minWidth="150dp"
                style="@style/common_spinner"
                app:theme="@style/common_spinner"
                android:popupTheme="@style/common_spinner"
                android:visibility="gone" />
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

ToolBar

Toolbar 配置

Toolbar 单独使用:

简单使用

给Toolbar 设置标题

配合AppBarLayout 一起使用

猜你喜欢

热点阅读