ToolBar

作者: super小立立 | 来源:发表于2018-02-03 16:41 被阅读0次

Toolbar 配置

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

  • 单独使用

  • 样式配置

  • 配置AppBarLayout 使用

  • 在Toolbar 中包含 AppCompatSpinner

Toolbar 单独使用:

简单使用

  1. 配置 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 设置标题

  1. 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);
    }
  1. 在 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>
  1. 在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

    本文链接:https://www.haomeiwen.com/subject/kabuzxtx.html