美文网首页
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