美文网首页MaterialDesign4Appandroid开发基础
关于Toolbar你需要知道的各种sao姿势。(操作篇)

关于Toolbar你需要知道的各种sao姿势。(操作篇)

作者: Terry | 来源:发表于2017-06-16 15:40 被阅读1094次

    什么是Toolbar?

    appbar_sheets.png

    头到尾,工具栏可以包含以下可选的元素:

    • A navigation button(导航按钮)。这里可能是向上箭头,导航菜单,关闭,折叠,完成或应用程序中选择的其他图标。这个按钮应始终用于访问工具栏指定内容的容器内的其他导航目标,或者离开当前的上下文。
    • A branded logo image(标志性的logo图片)。
    • A title and subtitle(标题或者子标题)。
    • One or more custom views(或多个视图)。
    • *An action menu
      *(动作菜单)。

    如何使用Toolbar?

    Android Api中给我们提供了多个版本的Toolbar给我们使用,包括3.0引入的ActionBar和v21中的Toolbar,但是为了达到应用体验的一致性以及如今纷繁复杂的android平台差异化的情况下我们选择__
    android.support.v7.widget.Toolbar__的Toolbar来使用。

    • 添加android.support.v7.widget.Toolbar的依赖

      dependencies {
          compile 'com.android.support:appcompat-v7:25.3.1'
      }
      
    • 确保Activity继承自AppCompatActivity:

      public class MyActivity extends AppCompatActivity {
      // ...
      }
      
    • 布局中添加如下代码:

      <android.support.v7.widget.Toolbar
         android:id="@+id/my_toolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
         android:background="?attr/colorPrimary"
         android:elevation="4dp"
         android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
         app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
      

    Material Design 规范建议应用栏具有 4 dp 的elevation.

    • 在 Activity 的 onCreate()方法中,调用 Activity 的 setSupportActionBar()方法,然后传递 Activity 的工具栏。该方法会将工具栏设置为 Activity 的应用栏。例如:

       @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_my);
            Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
            setSupportActionBar(myToolbar);
         }
      

    给Toolbar添加Action View & Action Providers

    appbar_with_button.png

    添加Action View

    要添加Action View我们需要了解2个属性:

    • actionViewClass:实现action widget的类

    • actionLayout:操作的布局
      举个例子,把SearchView 组件添加到toolbar上

      <item android:id="@+id/action_search"
         android:title="@string/action_search"
         android:icon="@drawable/ic_search"
         app:showAsAction="ifRoom|collapseActionView"
         app:actionViewClass="android.support.v7.widget.SearchView" />
      

    效果如下图:


    action_view.png

    如果你需要配置这个action,在你的Activity的重写方法onCreateOptionsMenu()。你可以通过 getActionView()
    拿到view的引用。

       @Override
        public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_activity_actions, menu);
    
        MenuItem searchItem = menu.findItem(R.id.action_search);
        SearchView searchView =(SearchView) MenuItemCompat.getActionView(searchItem);
    
        // Configure the search info and add any event listeners...
         return super.onCreateOptionsMenu(menu);
    }
    

    另外,如果想单独处理当action展开或者收缩,你可以定义一个实现MenuItem.OnActionExpandListener接口的类,然后调用setOnActionExpandListener()。如下代码所示:

        @Override
          public boolean onCreateOptionsMenu(Menu menu) {
          getMenuInflater().inflate(R.menu.options, menu);
          // ...
    
        // Define the listener
        OnActionExpandListener expandListener = new OnActionExpandListener() {
            @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            // Do something when action item collapses
            return true;  // Return true to collapse action view
        }
    
        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            // Do something when expanded
            return true;  // Return true to expand action view
            }
        };
    
            // Get the MenuItem for the action item
            MenuItem actionMenuItem = menu.findItem(R.id.myActionItem);
    
            // Assign the listener to that action item
            MenuItemCompat.setOnActionExpandListener(actionMenuItem, expandListener);
    
            // Any other things you have to do when creating the options menu…
            return true;
    }
    

    添加Action Provider

    要添加一个Action Provider,首先在资源文件res/menu/下面添加资源文件,并添加actionProviderClass属性,然后把actionProviderClass的名字填写完整。
    举个例子,下面代码是声明了一个 ShareActionProvider,功能是能够允许你的app分享数据到其他app:

    <item android:id="@+id/action_share"
          android:title="@string/share"
          app:showAsAction="ifRoom"
          app:actionProviderClass="android.support.v7.widget.ShareActionProvider"/>
    

    总结

    Toolbar的android api支持的操作大概也就这些,具体详细可以参考Toolbar官方的api文档。下面我将在关于Toolbar你需要知道的各种sao姿势(主题篇)中介绍如何管理Toolbar的样式。

    相关文章

      网友评论

      • 米奇小林:那个搜索栏和工具栏 切换的方法是怎样的
        米奇小林:@刘战塔Terry 谢谢大神分享
        Terry:�首先在menu的xml菜单里指定属性
        <item android:id="@+id/action_search"
        android:title="@string/action_search"
        android:icon="@drawable/ic_search"
        app:showAsAction="ifRoom|collapseActionView"
        app:actionViewClass="android.support.v7.widget.SearchView" />
        然后在在Activity里面重写OnCreateOtionsMenu去设置SearchView就可以了

      本文标题:关于Toolbar你需要知道的各种sao姿势。(操作篇)

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