Android Toolbar 开发实践总结

原创 2016年08月29日 11:01:14

初识 Toolbar

              Toolbar 是 Android 5.0 开始推出的一个 Material Design 风格的导航控件,Google非常推荐使用 Toolbar 来作为Android客户端的导航栏,以此来取代之前的 ActionBar。与Actionbar 相比,Toolbar 显的要灵活很多,它不同于 Actionbar 一样,一定要固定在 Activity的顶端,而是可以放在界面的任意位置。Google 在设计Toolbar 的时候也给开发者留下了很多可定制的空间。

               这些课定制的API 如下:  

  • 设置导航栏图标;
  • 设置App的logo;
  • 支持设置标题和子标题;
  • 支持添加一个或多个的自定义控件;
  • 支持Action Menu;
Android开发:最详细的 Toolbar 开发实践总结


开始使用 Toolbar

              Toolbar 是 Android 5.0 才开始使用,Google为了将这个设计向下兼容,自然需要推出兼容版的 Toolbar 。项目工程中需要引入appcompat-v7 的兼容包,
      compile 'com.android.support:appcompat-v7:23.4.0'

              接下来研究 Toolbar的结构


  • ToolbarActivity 包含了 Toolbar 的一些基本使用,
  • layout和menu文件夹分别是上面提到的两个Activity的布局文件 和 actionmenu 菜单文件。
  • values中包含了一些自定义的 theme,后面用到的时候会顺带讲解。

接下来我们来看下 Toolbar 效果,这里是结合 DrawerLayout  抽屉菜单使用效果如下图。


效果图中,从左到右分别使用到了:导航栏图标,APP的Long,标题、副标题、搜索框,分享,以及ActionMenu。接下来我们来了解布局文件


首先来看在布局文件中,toolbar.xml   也就是我们所使用的  android.support.v7.widget.Toolbar 控件布局

<?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_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" >

</android.support.v7.widget.Toolbar>

 

注意事项:

         Toolbar  这个控件需要引入自定义属性声明,相当于我们自定义控件的时候要引入自定义属性声明,下面这行代码必不可少,

          xmlns:app="http://schemas.android.com/apk/res-auto"

         否者引入的属性: app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 就会出现异常


接着来了解 Toolbar 中那些菜单选项,这里引入的是系统提供的一些菜单选项,代码有标注

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity" >


    <!-- 搜索框 -->
    <item
        android:id="@+id/ab_search"
        android:orderInCategory="80"
        android:title="action_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="ifRoom"/>


    <!-- 分享 -->
    <item
        android:id="@+id/action_share"
        android:orderInCategory="90"
        android:title="action_share"
        app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
        app:showAsAction="ifRoom"/>


    <!-- 设置 -->
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="action_settings"
        app:showAsAction="never"/>

</menu>



接下来继续了解我们的首页布局,这里使用到了 android.support.v4.widget.DrawerLayout 控件,这里笔者称它为抽屉菜单,像一个抽屉一样可以拉出来,这个空间用法这里不做详细介绍,有兴趣自己百度。<include layout="@layout/toolbar" /> 这里使用 include 标签引入布局,可以优化布局。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <include layout="@layout/toolbar" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <!-- 内容界面 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_blue_light"
            android:orientation="vertical" >
            <Button
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:text="内容界面"/>
        </LinearLayout>

        <!-- 侧滑菜单内容 必须指定其水平重力 -->
        <LinearLayout
            android:id="@+id/drawer_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:orientation="vertical" >
            <Button
                android:layout_width="200dp"
                android:layout_height="match_parent"
                android:text="菜单界面"/>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>
</LinearLayout>
 

最后我们来研究 ToolbarActivity 中究竟是如何实现的,代码如下:

public class ToolbarActivity extends ActionBarActivity {

    private Toolbar mToolbar;
    private ShareActionProvider mShareActionProvider;
    private DrawerLayout mDrawerLayout;


    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mToolbar.setLogo(R.mipmap.ic_launcher);

        // 标题的文字需在setSupportActionBar之前,不然会无效
        mToolbar.setTitle("主标题");
        mToolbar.setSubtitle("副标题");
        setSupportActionBar(mToolbar);

        /**
         * 设置是否显示为 Home主页
         *
         * 将此设置为 true  如果选择的  Home主页 返回主页
         */
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        //获取侧滑菜单控件
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer);


        //关联 Toolbar 和 DrawerLayout
        mDrawerToggle = new ActionBarDrawerToggle(
                this, mDrawerLayout, mToolbar,
                R.string.abc_action_bar_home_description,
                R.string.abc_action_bar_home_description_format);




        mDrawerToggle.syncState();
        mDrawerLayout.setDrawerListener(mDrawerToggle);



        // 菜单的监听可以在toolbar里设置,
        // 也可通过Activity的onOptionsItemSelected回调方法来处理
        mToolbar.setOnMenuItemClickListener(
                new Toolbar.OnMenuItemClickListener() {
                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        switch (item.getItemId()) {
                            case R.id.action_settings:
                                Toast.makeText(ToolbarActivity.this,
                                        "action_settings", Toast.LENGTH_SHORT).show();
                                break;
                            default:
                                break;
                        }
                        return true;
                    }
                });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_toobar, menu);
        /* ShareActionProvider配置 */
        mShareActionProvider = (ShareActionProvider) MenuItemCompat.getActionProvider(menu
                .findItem(R.id.action_share));
        Intent intent = new Intent(Intent.ACTION_SEND);
        intent.setType("text/*");
        mShareActionProvider.setShareIntent(intent);
        return super.onCreateOptionsMenu(menu);
    }
}



看到这里以为就万事大吉了嘛!没有还没完呢,接下来提示一下使用过程中遇到的一下问题

        1、在使用  Toolbar 的时候需要先隐藏掉原先的导航栏,这里我采用的是 :

    
   Theme.AppCompat.Light.NoActionBar

         
             还有其他的设置方法,比如:

              supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默认的导航栏(注意,继承AppCompatActivity 可以这样使用,

              如果是继承Activity就应该调用 requestWindowFeature(Window.FEATURE_NO_TITLE) );


            样式布局文件如下:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorAccent">@color/colorAccent</item>


        <!-- toolbar 颜色 -->
        <item name="colorPrimary">#4876FF</item>

        <!-- 状态栏颜色 -->
        <item name="colorPrimaryDark">#3A5FCD</item>

        <!-- 窗口背景颜色 -->
        <item name="android:windowBackground">@android:color/white</item>

      <item name="searchViewStyle">@style/MySerachView</item>
    </style>

    <style name="MySerachView" parent="Widget.AppCompat.SearchView"/>

</resources>

 


       2、如果需要修改标题和副标题的字体大小、颜色、可以调用

             setTitleTextColorsetTitleTextAppearancesetSubtitleTextColorsetSubtitleTextAppearance 这些API;


       3、如果需要自定义View可以在 android.support.v7.widget.Toolbar 控件的布局中嵌入自定义布局,需要注意这里的自定义布局位于titlesubtitleactionmenu 之间,这意味着,如果 titlesubtitle 都在,且 actionmenu选项 太多的时候,留给自定义View的空间就越小;


       对Toolbar的讲解就此为止,后续在学习研究中继续补充。(*^__^*) 嘻嘻……。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

最详细的 Android Toolbar 开发实践总结

初识 Toolbar Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Androi...

Android Toolbar 开发实践总结

初识 Toolbar Toolbar是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件 ,Google 非常推荐大家使用 Toolbar 来作为Andr...
  • yhd007
  • yhd007
  • 2017年07月19日 16:06
  • 61

最详细的 Android Toolbar 开发实践总结

原文地址:http://www.codeceo.com/article/android-toolbar-develop.html 过年前发了一篇介绍 Translucent System Bar...

最详细的Toolbar开发实践总结

文/D_clock(简书作者) 原文链接:http://www.jianshu.com/p/79604c3ddcae?utm_source=tuicool&utm_medium=referral 著作...

Android Material Design之Toolbar与Palette实践(转载)

转载自:http://blog.csdn.net/bbld_/article/details/41439715 【Rocko's bog】 前言 我们都知道Marterial ...

Android Material Design之Toolbar与Palette实践 (必看!详细!)

转载请注明出处:http://blog.csdn.net/bbld_/article/details/41439715 【Rocko's bog】 前言 我们都知道Ma...

Android Material Design之Toolbar与Palette实践

原文地址:http://blog.csdn.net/bbld_/article/details/41439715 前言 我们都知道Marterial Design是Google推出的全新UI...
  • luoww1
  • luoww1
  • 2015年03月09日 10:25
  • 896

Android ToolBar使用总结

Toolbar是在应用程序的Layout布局中使用的一个泛化的action bar,就是说它和action bar有相同的设计意图,但却设计的更加自由和可控。说自由是因为Toolbar可以放在View...

Android Toolbar 使用总结

Android 笔记 —— Toolbar 使用总结 Toolbar 是在 Android5.0 推出的一款 MD 风格的导航控件,主要是为了替换 Actionbar 的。与 Actionbar ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android Toolbar 开发实践总结
举报原因:
原因补充:

(最多只允许输入30个字)