美文网首页
Android Toolbar的简单使用

Android Toolbar的简单使用

作者: BrightLight | 来源:发表于2018-09-26 17:31 被阅读0次

本篇文章仅为个人学习记录;

Toolbar是android.support.v7包中的,所以需要导入appcompat-v7包;
在使用Toolbar时,需要隐藏掉原来的ActionBar,直接在主题中修改:

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">   </style>
或者
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

1、创建布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.sl.mydemo.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"      //背景
      />
</LinearLayout>

2、设置属性

        mToolbar = findViewById(R.id.toolbar);
        mToolbar.setTitle("测试标题");                 //设置标题  布局app:title
        mToolbar.setSubtitle("测试子标题");            //设置子标题  布局 app:subTitle
        mToolbar.setLogo(R.mipmap.ic_launcher);         //设置图标  布局 app:logo
        //设置标题和子标题颜色
        mToolbar.setTitleTextColor(Color.parseColor("#FFFFFF"));      //设置标题颜色  布局 app:titleTextColor
        mToolbar.setSubtitleTextColor(Color.parseColor("#FFFFFF"));    //设置子标题颜色  布局 app:subTitleTextColor
       //修改主标题的外观、颜色
        mToolbar.setTitleTextAppearance(this,R.style.Theme_Toolbar_Base_Title);  // 布局:app:titleTextAppearance
         mToolbar.setPopupTheme(R.style.PopupMenu);          //溢出菜单弹窗设置  布局 app:popupTheme
      mToolbar.setSubtitleTextAppearance(this,R.style.Theme_Toolbar_Base_Title);  //布局:app:subTitleTextAppearance
        //设置导航图标要在setSupportActionBar后
        setSupportActionBar(mToolbar);
        mToolbar.setNavigationIcon(android.R.drawable.ic_menu_myplaces);       //设置导航图标
//        getSupportActionBar().setDisplayHomeAsUpEnabled(true) ;                 //左侧按钮

3、使用到的样式

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

        <item name="android:textColorSecondary">#FFFFFF</item>      <!--菜单右上角更多图标的颜色-->

    </style>

    <!--Toolbar 标题字体大小颜色-->
    <style name="Theme.Toolbar.Base.Title" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">20dp</item>
        <item name="android:textColor">#FFFFFF</item>
    </style>
    <!--Toolbar 标题字体大小颜色-->
    <style name="Theme.Toolbar.Base.SubTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">14dp</item>
        <item name="android:textColor">#FFFFFF</item>
    </style>

    <!--溢出菜单颜色、背景、显示位置-->
    <style name="PopupMenu" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:colorBackground">@color/colorAccent</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="overlapAnchor">false</item>
    </style>

4、添加菜单
定义res/menu/menu.main.xml文件

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item android:id="@+id/action_search"
        android:title="搜索"
        android:icon="@android:drawable/ic_menu_search"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/action_notifications"
        android:title="通知"
        android:icon="@android:drawable/ic_notification_overlay"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/action_setting"
        android:title="设置"
        android:icon="@android:drawable/ic_menu_more"
        app:showAsAction="never"/>
    <!--app:showAsAction="if/never",app是自定义命名空间,因为Actiivyt是继承AppCompatActivity,是support
    v7包中的,不是原生的,所以不能使用android:showAction否则会报错。ifRoom表示有空间则显示,never表
    示从不显示,而是会通过overFlowwindow显示-->
</menu>

将menu布局添加到toolbar中:

//重写此方法,将菜单加载进ToolBar,如果没有Toolbar,菜单是加载不出来滴
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main,menu);
        return true;
    }

5、点击事件
左侧按钮点击事件

设置导航图标:mToolbar.setNavigationIcon(android.R.drawable.ic_menu_myplaces);       
原生显示左侧返回按钮图标:getSupportActionBar().setDisplayHomeAsUpEnabled(true) ;   
点击事件,在setSupportActionBar(mToolBar)后:
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                Snackbar.make(mToolbar,"左侧按钮",Snackbar.LENGTH_SHORT).show();
                break;
        }
        return true;
    }

菜单点击事件:

 //为菜单添加点击事件,需要在setSupportActionBar之后
        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.action_search:
                        Snackbar.make(mToolbar,"搜索",Snackbar.LENGTH_SHORT).show();
                        break;
                    case R.id.action_notifications:
                        Snackbar.make(mToolbar,"通知",Snackbar.LENGTH_SHORT).show();
                        break;
                    case R.id.action_setting:
                        Snackbar.make(mToolbar,"设置",Snackbar.LENGTH_SHORT).show();
                        break;
                }
                return true;       //返回true消费事件
            }
        });

6、toolbar中直接布局标题等信息,只当简单控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.sl.mydemo.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:background="@color/colorAccent"
      >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="标题"
            android:textSize="18dp"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginRight="15dp"
            android:text="右侧按钮"
            />
    </android.support.v7.widget.Toolbar>
</LinearLayout>

相关文章

网友评论

      本文标题:Android Toolbar的简单使用

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