Toolbar的简单使用

Toolbar的简单使用

标签： androidToolbar

2017-11-01 17:10 43人阅读 评论(0) 收藏 举报

分类：

android开发日志（1）

作者同类文章 X

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

目录(?)[+]

1. Toolbar的简单使用
   1. 前言由于之前项目都没怎么使用toobar今天心血来潮就写了个demo熟悉下免得以后用到还得花时候查资料顺便做下笔记go 
   2. 二开始引入 
      1. 首先就是在布局文件中使用很简单就跟平常控件一样用就可以 
   3. 三看了效果图结合代码其它的不难理解 下面就着重说一下菜单那部分的实现 也就后面的三个点点点
      1. 首先我们要为toolbar绑定一个菜单如下 
      2. 其中Rmenumenu_main是我们创建的一个菜单文件代码如下 
      3. 还有个小问题就是正常的设置完之后菜单item图标是不会显示的我们需要重写onPrepareOptionsPanelView view Menu menu方法这样才能正常显示图标代码如下 
      4. 设置菜单的点击事件前面我们已经看到了toolbarsetOnMenuItemClickListeneronMenuItemClick这句代码那么onMenuItemClick的实现如下 
   5. 五经过上面的介绍其实已经能够使用Toolbar做挺多事情了那么下面利用ToolBar配合DrawerLyout快速实现一个侧滑菜单看看
      1. 布局文件实现这里我写得比较乱又有点偷懒不想改了还是比较建议多使用include的方式的

Toolbar的简单使用

前言：由于之前项目都没怎么使用toobar，今天心血来潮就写了个demo熟悉下，免得以后用到还得花时候查资料，顺便做下笔记！go。。。 

一、Toobar是5.0之后出来的，可以说出来之后就取代了ActionBar了（反正我身边的开发人员都不用ActionBar了），好处就不说了，用了之后好不好自己自然有所感觉，要注意的是要兼容5.0以下就使用V7包下的Toobar哦！

二、开始引入 

1、首先就是在布局文件中使用，很简单，就跟平常控件一样用就可以！ 

"1.0" encoding="utf-8"?>

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


        android:background="@color/app_bg"
        android:id= "@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

2、由于我们在代码用是以setSupportActionBar(toolbar)的方式去使用toolbar的，一也就是代替actionbar，那么我们就需要把actionbar去掉，一山不容二虎！！！去掉actionbar要自定义下主题，自定义一个Base.AppTheme样式 

    "Base.AppTheme" parent="Theme.AppCompat">

        "windowActionBar">false
        "android:windowNoTitle">true

        "windowNoTitle">true


        "colorPrimary">@color/material_deep_teal_500

        "colorPrimaryDark">@color/material_deep_teal_500

        "android:windowBackground">@color/dim_foreground_material_dark



    "AppTheme" parent="Base.AppTheme">

至此，我们的toobar已经可以正常显示出来了，不过先不急，我们先设置一些标题、logo、之类的东西再看效果，不过先看看google提供的图也可以的： 

代码中对toolbar最基本的设置： 

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        // Logo
        toolbar.setLogo(R.mipmap.push_4);

        // 主标题
        toolbar.setTitle("Title");

        // 副标题
        toolbar.setSubtitle("Sub Title");

        //设置toolbar
        setSupportActionBar(toolbar);

        //左边的小箭头（注意需要在setSupportActionBar(toolbar)之后才有效果）
        toolbar.setNavigationIcon(R.mipmap.back);

        //菜单点击事件（注意需要在setSupportActionBar(toolbar)之后才有效果）
        toolbar.setOnMenuItemClickListener(onMenuItemClick);
    }
}

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        // Logo
        toolbar.setLogo(R.mipmap.push_4);

        // 主标题
        toolbar.setTitle("Title");

        // 副标题
        toolbar.setSubtitle("Sub Title");

        //设置toolbar
        setSupportActionBar(toolbar);

        //左边的小箭头（注意需要在setSupportActionBar(toolbar)之后才有效果）
        toolbar.setNavigationIcon(R.mipmap.back);

        //菜单点击事件（注意需要在setSupportActionBar(toolbar)之后才有效果）
        toolbar.setOnMenuItemClickListener(onMenuItemClick);
    }
}

经过初步设计后，我们就可以看看最原始的效果了！！

三、看了效果图，结合代码其它的不难理解 ，下面就着重说一下菜单那部分的实现 ，也就后面的三个点点点

1、首先我们要为toolbar绑定一个菜单，如下： 

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // 绑定toobar跟menu
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // 绑定toobar跟menu
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

2、其中R.menu.menu_main是我们创建的一个菜单文件，代码如下： 

"1.0" encoding="utf-8"?>
"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">


        android:id="@+id/action_edit"
        android:icon="@mipmap/push_3"
        android:orderInCategory="80"
        android:title="@string/action_edit"
        app:showAsAction="never"/>


        android:id="@+id/action_share"
        android:icon="@mipmap/push_3"
        android:orderInCategory="90"
        android:title="@string/action_edit"
        app:showAsAction="never"/>


        android:id="@+id/action_settings"
        android:icon="@mipmap/push_3"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never"/>

下面解析下菜单项的几个属性：

• android:icon：这个属性是指定每个菜单项左边的图标的
• android:id：菜单项的唯一标识
• android:orderInCategory：菜单项的优先级，也就是顺序，只能设置大于正整数，数值越大菜单项越靠前
• android:title：菜单描述，也就是菜单文字
• app:showAsAction：这个是控制菜单项的显示的

其中app:showAsAction这个属性是比较有意思的我们一个个看看他的值都表示什么！

always：设置这个值会让所有菜单项都会显示在toolbar上 

ifRoom：设置这个值之后，如果toolbar上还有空间的话就会显示优先级高的菜单项在toolbar上，剩下的才显示在弹出的列表中 

never：永远不会显示在Toolbar上，只会在溢出列表中出现 

withText：这个属性我看了下效果是跟never一个样不知道是不是我哪里没设置对！！！ 

collapseActionView：这个属性通俗的说就是声明某一个菜单项单独显示在toolbar上，而不是显示在打开的菜单中，一般配合ifRoom使用，如下： 

3、还有个小问题，就是正常的设置完之后菜单item图标是不会显示的，我们需要重写onPrepareOptionsPanel(View view, Menu menu)方法，这样才能正常显示图标，代码如下： 

@Override
protected boolean onPrepareOptionsPanel(View view, Menu menu) {
    if (menu != null) {
        if (menu.getClass() == MenuBuilder.class) {
            try {
                Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                m.setAccessible(true);
                m.invoke(menu, true);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    return super.onPrepareOptionsPanel(view, menu);
}

@Override
protected boolean onPrepareOptionsPanel(View view, Menu menu) {
    if (menu != null) {
        if (menu.getClass() == MenuBuilder.class) {
            try {
                Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                m.setAccessible(true);
                m.invoke(menu, true);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    return super.onPrepareOptionsPanel(view, menu);
}

4、设置菜单的点击事件，前面我们已经看到了toolbar.setOnMenuItemClickListener(onMenuItemClick);这句代码，那么onMenuItemClick的实现如下： 

private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem menuItem) {
        String msg = "";
        switch (menuItem.getItemId()) {
            case R.id.action_edit:
                msg += "Click edit";
                break;
            case R.id.action_share:
                msg += "Click share";
                break;
            case R.id.action_settings:
                msg += "Click setting";
                break;
        }

        if(!msg.equals("")) {
            Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
        }
        return true;
    }
};

private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem menuItem) {
        String msg = "";
        switch (menuItem.getItemId()) {
            case R.id.action_edit:
                msg += "Click edit";
                break;
            case R.id.action_share:
                msg += "Click share";
                break;
            case R.id.action_settings:
                msg += "Click setting";
                break;
        }

        if(!msg.equals("")) {
            Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
        }
        return true;
    }
};

5、这样，菜单的基本功能就实现了，虽然大家都说程序员的审美观都不是很好（说这话的站出来，保证不打死你，，）大家有木有觉得黑乎乎的很难看？并且位置把toolbar都挡住了，对于有强迫症的我来说使无法容忍的，那么我们就修整一下吧！ 

其实我们可以通过toobar的app:popupTheme="@style/menu_bg"属性来指定一个自定义的样式，而那么这个样式具体能定义写什么呢，我们详细看看： 

"toolbarMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">


    "overlapAnchor">false


    "android:popupBackground">@color/material_deep_teal_500


    "android:dropDownVerticalOffset">5dp


    "android:dropDownHorizontalOffset">-2dp


    "android:textColor">@color/toolbar_meun

定义好样式后需要在app的主题中引用该样式，才能改变溢出框内的文字颜色，如下： 

"AppTheme" parent="Base.AppTheme">

    "actionOverflowMenuStyle">@style/toolbarMenuStyle

最后在toolbar中引用： 

    android:background="@color/material_deep_teal_500"
    android:id= "@+id/toolbar"
    android:layout_width="match_parent"
    app:popupTheme="@style/toolbarMenuStyle"
    android:layout_height="?attr/actionBarSize">

ok，至此我们对toolbar溢出框的调整已经初步完成，看看效果如何： 

四、到了这里，我们已经能简单的使用ToolBar了，那么需求随时都会改变的，比如说有的人就不需要logo、也不需要主标题副标题等，他就要在toolbar上加个搜索框！或者是要只要主标题，并且主标题要居中显示，那也只能做咯，毕竟产品经常被砍也不是没有原因的！

如果你有过这样的需求，你会发现原生的ToolBar的主标题是没法居中显示的，所以我们需要将主标题设置为空，然后自己写一个标题到ToolBar中，然后设置居中显示：

"1.0" encoding="utf-8"?>

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


        android:background="@color/material_deep_teal_500"
        android:id= "@+id/toolbar"
        android:layout_width="match_parent"
        app:popupTheme="@style/toolbarMenuStyle"
        android:layout_height="?attr/actionBarSize">


            android:layout_gravity="center"
            android:textColor="@color/toolbar_meun"
            android:textSize="24sp"
            android:text="ToolBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

注意，需要在代码中对主标题设置为空字符串，否则会出现默认的主标题： 

// 主标题
toolbar.setTitle("");

// 主标题
toolbar.setTitle(""); 

五、经过上面的介绍，其实已经能够使用Toolbar做挺多事情了，那么下面利用ToolBar配合DrawerLyout快速实现一个侧滑菜单看看！

1、布局文件实现，这里我写得比较乱，又有点偷懒不想改了，还是比较建议多使用include的方式的!

"1.0" encoding="utf-8"?>

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/dl_left"
    android:layout_width="match_parent"
    android:layout_height="match_parent">



        android:layout_width="match_parent"
        android:layout_height="match_parent">

            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/material_deep_teal_500"
            app:popupTheme="@style/toolbarMenuStyle">


                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="ToolBar"
                android:textColor="@color/toolbar_meun"
                android:textSize="24sp"/>





        android:background="@color/material_deep_teal_500"
        android:layout_width="match_parent"
        android:layout_gravity="start"
        android:orientation="vertical"
        android:layout_height="match_parent">

            android:layout_width="match_parent"
            android:scaleType="centerCrop"
            android:src="@mipmap/aa"
            android:layout_height="150dp"/>


            android:gravity="center"
            android:background="@color/window_bg"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

                android:text="菜单项"
                android:layout_width="wrap_content"
                android:textColor="#333"
                android:textSize="24dp"
                android:layout_height="wrap_content"/>

这里一定要注意android:layout_gravity="start"属性的设置！ 

下面是整个java类的完整代码

public class MainActivity extends AppCompatActivity {

    private DrawerLayout          mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);

        // Logo
        //toolbar.setLogo(R.mipmap.ic_launcher);

        // 主标题
        mToolbar.setTitle("");

        // 副标题
        //toolbar.setSubtitle("Sub Title");

        //设置toolbar
        setSupportActionBar(mToolbar);

        //左边的小箭头（注意需要在setSupportActionBar(toolbar)之后才有效果）
        mToolbar.setNavigationIcon(R.mipmap.store_home_tab_index_pre);

        //菜单点击事件（注意需要在setSupportActionBar(toolbar)之后才有效果）
        mToolbar.setOnMenuItemClickListener(onMenuItemClick);

        //创建返回键，并实现打开关/闭监听
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                //侧滑栏打开
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                //侧滑栏关闭
            }
        };

        //mDrawerToggle.syncState();此处注释掉是为了不使用默认的开关箭头

        //设置侦听
        mDrawerLayout.addDrawerListener(mDrawerToggle);
    }

    private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem menuItem) {
            String msg = "";
            switch (menuItem.getItemId()) {
                case R.id.action_edit:
                    msg += "Click edit";
                    break;
                case R.id.action_share:
                    msg += "Click share";
                    break;
                case R.id.action_settings:
                    msg += "Click setting";
                    break;
            }

            if(!msg.equals("")) {
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
            return true;
        }
    };

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 绑定toobar跟menu
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    protected boolean onPrepareOptionsPanel(View view, Menu menu) {
        if (menu != null) {
            if (menu.getClass() == MenuBuilder.class) {
                try {
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }
}

public class MainActivity extends AppCompatActivity {

    private DrawerLayout          mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private Toolbar mToolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mToolbar = (Toolbar) findViewById(toolbar);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.dl_left);

        // Logo
        //toolbar.setLogo(R.mipmap.ic_launcher);

        // 主标题
        mToolbar.setTitle("");

        // 副标题
        //toolbar.setSubtitle("Sub Title");

        //设置toolbar
        setSupportActionBar(mToolbar);

        //左边的小箭头（注意需要在setSupportActionBar(toolbar)之后才有效果）
        mToolbar.setNavigationIcon(R.mipmap.store_home_tab_index_pre);

        //菜单点击事件（注意需要在setSupportActionBar(toolbar)之后才有效果）
        mToolbar.setOnMenuItemClickListener(onMenuItemClick);

        //创建返回键，并实现打开关/闭监听
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.open, R.string.close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                //侧滑栏打开
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                //侧滑栏关闭
            }
        };

        //mDrawerToggle.syncState();此处注释掉是为了不使用默认的开关箭头

        //设置侦听
        mDrawerLayout.addDrawerListener(mDrawerToggle);
    }

    private Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem menuItem) {
            String msg = "";
            switch (menuItem.getItemId()) {
                case R.id.action_edit:
                    msg += "Click edit";
                    break;
                case R.id.action_share:
                    msg += "Click share";
                    break;
                case R.id.action_settings:
                    msg += "Click setting";
                    break;
            }

            if(!msg.equals("")) {
                Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
            }
            return true;
        }
    };

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // 绑定toobar跟menu
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    protected boolean onPrepareOptionsPanel(View view, Menu menu) {
        if (menu != null) {
            if (menu.getClass() == MenuBuilder.class) {
                try {
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }
}

其中ActionBarDrawerToggle是对Toolbar上的开关跟侧滑栏进行关联的！

到这里，我们的toolbar跟侧滑都说了一些 简单的使用，下面看看侧滑栏的图：

注：由于个人android学习的大部分知识都来源于网络，比如说：郭霖、张鸿洋、泡在网上的日子等等大牛的博客，在此写下一些学习笔记，并加入一些个人的理解或者说总结，主要用于个人提升，如有雷同并非巧合^_^

顶

0

踩

0

 

 

• 上一篇自定义控件基础知识--Canvas
• 下一篇列表滚动改变Toolbar透明度

  相关文章推荐

• • 简单Toolbar的使用
• • 免费直播 神经网络的原理及结构设计--何宇健
• • Androd Toolbar 的简单使用二
• • Apache Weex：移动研发的进阶之路--董岩
• • Androd Toolbar的简单使用三
• • C++ 百万并发网络通信引擎架构与实现
• • android ToolBar 的简单使用
• • PHP入门到精通及项目实战

• • Android中toolbar的简单使用
• • Kotlin基本语法到实战开发
• • Toolbar的简单使用方法
• • Android 实战开发 第三方SDK 讯飞语音SDK
• • Drawer与Toolbar的简单使用
• • 简单的自定义标题栏（不使用Toolbar）
• • j2se菜单menu和工具条toolbar的简单使用例子
• • toolbar的简单介绍