精华内容
下载资源
问答
  • ToolBar 常用属性

    千次阅读 2017-01-10 14:39:54
    默认的ToolBar可能是这个样子 有时候可能需要标题居中,可在布局中添加一个TextView ... android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="wrap_cont

    默认的ToolBar可能是这个样子

    这里写图片描述

    有时候可能需要标题居中,可在布局中添加一个TextView

     <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            app:titleTextColor="@android:color/white">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:text="Center Title"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="@android:color/white"
                android:textStyle="bold"/>
        </android.support.v7.widget.Toolbar>

    然后去掉默认的Title

      Toolbar toolbar = ((Toolbar) findViewById(R.id.toolBar));
            setSupportActionBar(toolbar);
            getSupportActionBar().setTitle("");

    然后界面应该是这个样子

    这里写图片描述

    二级页面看起来应该差一个返回按钮,这也很简单

      getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    返回按钮的颜色可能不是你想要的

    在style 中新加一个style 如下

     <style name="toolBar">
            <item name="colorControlNormal">@android:color/white</item>
        </style>

    然后在ToolBar布局中添加属性

     app:theme="@style/toolBar"

    这个时候ToolBar应该长这个样子了

    这里写图片描述


    右边再来一个按钮

    menu下新建一个menu文件

    <?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/ab_search"
            android:icon="@drawable/menu_0"
            android:title="action_search"
            app:showAsAction="ifRoom"/>
    </menu>

    Activity中onCreateOptionsMenu

      public boolean onCreateOptionsMenu(Menu menu) {
            MenuInflater inflater = getMenuInflater();
            inflater.inflate(R.menu.toolbar_main_menu, menu);
            return true;
        }

    再加上事件监听

      @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            toast("onOptionsItemSelected");
            return super.onOptionsItemSelected(item);
        }

    这里写图片描述

    展开全文
  • Android ToolBar详解

    千次阅读 2016-12-06 02:38:40
    Toolbarandroid L引入的一个新控件,继承于ViewGroup,用于取代ActionBar,它提供了ActionBar类似的功能,但是更灵活 ToolBar不像ActionBar那么固定,Toolbar更像是一般的View元素,可以被放置在view树体系的任意...

    导读

    • Toolbar是android L引入的一个新控件,继承于ViewGroup,用于取代ActionBar,它提供了ActionBar类似的功能,但是更灵活

    • ToolBar不像ActionBar那么固定,Toolbar更像是一般的View元素,可以被放置在view树体系的任意位置,可以应用动画,可以跟着ScrollView滚动,可以与布局中的其他View交互

    • 当然,你还可以用Toolbar替换掉ActionBar,只需调用setSupportActionBar()

    • 为了兼容更多的设备一般我们都是通过AppCompat中的android.support.v7.widget.Toolbar来使用Toolbar

    • 除此以外,ToolBar还支持android:elevation阴影属性


    ToolBar中的几大子View

    几大子View

    注意:

    1. 自定义的子View由于处于title,subTitle和menu之间,如果menu太多,或者Title,subTitle的字体太大或长度太长,自定义的子View可能被挤在中间而显示不出来
    2. 自定义的子View 部分最左边有间隙,如果要去掉,可以设置 contentInset 去掉

    > 3. NavigationIcon 和 logo 不建议同时使用,不然logo 和 title,subtitle的间距会显得比较小

    ToolBar的使用方式:

    1. 将Toolbar当作actionbar来使用。这种情况一般发生在你想利用actionbar现有的一些功能(比如能够显示菜单中的操作项,响应菜单点击事件,使用ActionBarDrawerToggle等),但是又想获得比actionbar更多的控制权限。

    2. 将Toolbar当作一个独立的控件来使用,这种方式又名Standalone。


    ToolBar 使用步骤(独立控件方式):

    一.设置主题(主要是为了隐藏ActionBar)

    1. ==常规来说==:直接用 Theme.AppCompat.Light.NoActionBar 即可

    2. 下面的方式主要解决部分项目既用Actionbar又用Toolbar

      • res\values\styles.xml (兼容低版本)
         <!--ToolbarActivity 的Theme-->
        <style name="AppTheme.NoActionBar">
            <!--隐藏ActionBar-->
            <item name="windowActionBar">false</item>
            <!--隐藏Title 标题栏(状态栏)-->
            <item name="windowNoTitle">true</item>
    
            <!--Title,item字体颜色-->
            <item name="android:textColorPrimary">#f00fff</item>
            <!--窗体背景颜色-->
            <item name="android:windowBackground">@color/colorBackground</item>
            <!--底部操作栏颜色 API>21-->
            <item name="android:navigationBarColor">#33f000</item>
            <!--控件的默认颜色,如复选框未选中时的颜色,本文右上角的溢出菜单-->
            <item name="android:colorControlNormal">#ffffff</item>
        </style>
    
        <!--ToolbarActivity 弹出menu 的Theme-->
        <style name="AppTheme.menu1">
            <!--字体颜色-->
            <item name="android:textColor">#fff</item>
            <!--字体大小-->
            <item name="android:textSize">18sp</item>
            <!--&lt;!&ndash;背景色&ndash;&gt;-->
            <item name="android:colorBackground">#000</item>
            <!--选中颜色-->
            <item name="android:selectableItemBackground">@drawable/item_selector</item>
    
            <!-- 是否覆盖锚点,默认为true,即盖住Toolbar -->
            <item name="overlapAnchor">false</item>
    
        </style>
    • res\values-v21\styles.xml (Android 5.0 的style,兼容高版本)
        <style name="AppTheme" parent="AppTheme.NoActionBar">
        </style>

    注意:

    1. “windowActionBar”和”windowNoTitle”在AppCompatActivity中使用
    2. “android:windowActionBar”和”android:windowNoTitle”要在Activity中使用
    3. 主题调用:
      1. 清单文件对应activity便签中调用 android:theme=”@style/AppTheme.NoActionBar”
      2. 全局调用,清单文件Application标签中调用android:theme=”@style/AppTheme.NoActionBar”
      3. 对应控件调用 android:theme=”@style/AppTheme.NoActionBar”

    二.设置控件

    1. 在布局xml文件添加ToolBar控件(命名空间设置属性)
    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:clipToPadding="true"
            android:elevation="10dp"
            android:fitsSystemWindows="true"
            app:logo="@mipmap/ic_launcher"
            app:navigationIcon="@mipmap/ic_drawer_home"
            app:popupTheme="@style/AppTheme.menu1"
            app:subtitle="Subtitle"
            app:title="Title"
            >
            <!--自定义的子View-->
            <Button
                android:id="@+id/btn_user"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@color/colorAccent"
                android:text="@string/controls_toolbar"
                android:textColor="@color/colorBackground"/>
        </android.support.v7.widget.Toolbar>

    注意:

    ToolBar控件设置属性有两种方式:
    - 第二种方式设置了属性,第一种方式会无效
    1. 代码方式: (在Activity中初始化控件并设置参数)

            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
            toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
            toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo
            toolbar.setTitle("Title");//设置主标题
            toolbar.setSubtitle("Subtitle");//设置子标题
            toolbar.inflateMenu(R.menu.base_toolbar_menu);//设置右上角的填充菜单
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
               ...
                }
            });
    1. 在ToolBar控件上直接设置:

      • 自定义命名空间才能设置成功,不然没反应

        1. 先在根布局设置命名空间: 如 xmlns:app=”http://schemas.android.com/apk/res-auto”

        2. 通过命名空间设置属性:如 app:popupTheme=”@style/AppTheme.NoActionBar” (设置溢出菜单主题)

    1. 在res/menu下 添加action menu 菜单文件
    <?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">
    
        <item
            android:id="@+id/action_search"
            android:icon="@mipmap/ic_search"
            android:title="@string/search_menu"
            app:showAsAction="ifRoom" />
    
        <item
            android:id="@+id/action_notification"
            android:icon="@mipmap/ic_notifications"
            android:title="@string/notification_menu"
            app:showAsAction="ifRoom" />
    
        <item
            android:id="@+id/action_item1"
            android:title="@string/item1_menu"
            app:showAsAction="never" />
    
        <item
            android:id="@+id/action_item2"
            android:title="@string/item2_menu"
            app:showAsAction="never" />
    </menu>

    三.控件调用

    /**
     * ToolBar作为独立控件使用
     */
    public class ToolBarActivity extends AppCompatActivity {
        private Button  btn;
        private Toolbar toolbar;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            initView();
    
            initEvent();
    
        }
    
        private void initEvent() {
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    int menuItemId = item.getItemId();
                    if (menuItemId == R.id.action_search) {
                        Toast.makeText(ToolBarActivity.this, R.string.search_menu, Toast.LENGTH_SHORT).show();
    
                    } else if (menuItemId == R.id.action_notification) {
                        Toast.makeText(ToolBarActivity.this, R.string.notification_menu, Toast.LENGTH_SHORT).show();
    
                    } else if (menuItemId == R.id.action_item1) {
                        Toast.makeText(ToolBarActivity.this, R.string.item1_menu, Toast.LENGTH_SHORT).show();
    
                    } else if (menuItemId == R.id.action_item2) {
                        Toast.makeText(ToolBarActivity.this, R.string.item2_menu, Toast.LENGTH_SHORT).show();
    
                    }
                    return true;
                }
            });
    
            btn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(ToolBarActivity.this, R.string.controls_toolbar, Toast.LENGTH_SHORT).show();
                }
            });
        }
    
        /**
         * 初始化界面
         */
        private void initView() {
            setContentView(R.layout.activity_toolbar);
            StatusBar.setTransparentStatusBar(this); //设置透明的状态栏
            btn = (Button) findViewById(R.id.btn_user);
            toolbar = (Toolbar) findViewById(R.id.toolbar);
            toolbar.inflateMenu(R.menu.toolbar_menu);//设置右上角的填充菜单(替换ActionBar方式不调用)
    
        }

    效果图:

    效果图


    ToolBar 使用步骤(替换ActionBar方式):

    一.设置主题

     <!--ToolbarActivity2 的Theme-->
        <style name="AppTheme.NoActionBar2">
            <!--隐藏ActionBar-->
            <item name="windowActionBar">false</item>
            <!--隐藏Title 标题栏(状态栏)-->
            <item name="windowNoTitle">true</item>
            <!--Title,item字体颜色-->
            <item name="android:textColorPrimary">#ff0000</item>
            <!--窗体背景颜色-->
            <item name="android:windowBackground">@color/colorAccent</item>
            <!--底部操作栏颜色 API>21-->
            <item name="android:navigationBarColor">#4CAF50</item>
            <!--控件的默认颜色,如复选框未选中时的颜色,本文右上角的溢出菜单-->
            <item name="android:colorControlNormal">#00BCD4</item>
    
        </style>

    二.设置控件

    1. 在布局xml文件添加ToolBar控件
     <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:clipToPadding="true"
            android:elevation="10dp"
            android:fitsSystemWindows="true"
            >
            <!--自定义的子View-->
            <TextView
                android:id="@+id/tv_user2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/controls_toolbar"
                android:textColor="@color/colorBackground"/>
        </android.support.v7.widget.Toolbar>
    
    1. 在res/menu下 添加action menu 菜单文件
    <?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">
    
        <item
            android:id="@+id/action_search"
            android:icon="@mipmap/ic_search"
            android:title="@string/search_menu"
            app:showAsAction="ifRoom" />
    
        <item
            android:id="@+id/action_notification"
            android:icon="@mipmap/ic_notifications"
            android:title="@string/notification_menu"
            app:showAsAction="ifRoom" />
    
        <item
            android:id="@+id/action_item1"
            android:title="@string/item1_menu"
            app:showAsAction="never" />
    
        <item
            android:id="@+id/action_item2"
            android:title="@string/item2_menu"
            app:showAsAction="never" />
    </menu>

    三.控件调用

    /**
     * 将ToolBar当作actionBar使用
     */
    public class ToolBar2Activity extends AppCompatActivity {
        private TextView mTextView;
        private Toolbar  toolbar;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            initView();
    
            initEvent();
    
        }
    
        private void initEvent() {
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    int menuItemId = item.getItemId();
                    if (menuItemId == R.id.action_search) {
                        Toast.makeText(ToolBar2Activity.this, R.string.search_menu, Toast.LENGTH_SHORT).show();
    
                    } else if (menuItemId == R.id.action_notification) {
                        Toast.makeText(ToolBar2Activity.this, R.string.notification_menu, Toast.LENGTH_SHORT).show();
    
                    } else if (menuItemId == R.id.action_item1) {
                        Toast.makeText(ToolBar2Activity.this, R.string.item1_menu, Toast.LENGTH_SHORT).show();
    
                    } else if (menuItemId == R.id.action_item2) {
                        Toast.makeText(ToolBar2Activity.this, R.string.item2_menu, Toast.LENGTH_SHORT).show();
    
                    }
                    return true;
                }
            });
    
            mTextView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(ToolBar2Activity.this, R.string.controls_toolbar, Toast.LENGTH_SHORT).show();
                }
            });
        }
    
        /**
         * 初始化界面
         */
        private void initView() {
            setContentView(R.layout.activity_toolbar2);
            StatusBar.setTransparentStatusBar(this); //设置透明的状态栏
            mTextView = (TextView) findViewById(R.id.tv_user2);
            toolbar = (Toolbar) findViewById(R.id.toolbar2);
            toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//设置导航栏图标
            toolbar.setLogo(R.mipmap.ic_launcher);//设置app logo
            toolbar.setTitle("Title");//设置主标题
            toolbar.setSubtitle("Subtitle");//设置子标题
    
            setSupportActionBar(toolbar);
        }
    
        /**
         * ToolBar 替换ActionBar 方式要用这种方式实现Menu布局,不然没效果
         * @param menu
         * @return
         */
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            MenuInflater inflater=getMenuInflater();
            inflater.inflate(R.menu.toolbar_menu,menu);
            return super.onCreateOptionsMenu(menu);
        }
    }

    效果图:

    效果图


    Theme小扩展:

    关于theme中几个color字段的官方描述图:

    image

    属性说明
    colorPrimary应用的主色调,ActionBar默认使用该颜色,ToolBar导航栏的底色
    colorPrimaryDark应用的主要暗色调,StatusBar状态栏默认使用改颜色
    colorAccent控件选中的默认颜色,如EditText 的闪动光标
    android:colorControlNormal控件未选中时的默认颜色,如复选框
    android:textColorPrimary应用的主要文字颜色,ActionBar的标题文字默认颜色
    android:textColorSecondary辅助的文字颜色,一般比textColorPrimary的颜色弱一点,用于一些弱化的表示
    android:windowBackground窗体背景颜色,必须用color.xml定义的颜色
    android:navigationBarColor底部操作栏颜色 API>21
    扩展属性扩展说明
    statusBarColor状态栏颜色,默认使用colorPrimaryDark
    colorForeground应用的前景色,ListView的分割线,switch滑动区默认使用该颜色
    colorBackground应用的背景色,popMenu的背景默认使用该颜色
    colorControlHighlight控件按压时的色调
    colorControlActivated控件选中时的颜色,默认使用colorAccent
    colorButtonNormal默认按钮的背景颜色
    editTextColor默认EditView输入框字体的颜色。
    textColorButton,textView的文字颜色
    textColorPrimaryDisableOnlyRadioButton,checkbox等控件的文字
    colorSwitchThumbNormalswitch thumbs 默认状态的颜色. (switch off)
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!--对应ActionBar颜色-->
            <item name="colorPrimary">@color/colorPrimaryDark</item>
            <!--对应状态栏颜色-->
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <!--对应EditText 光标 颜色-->
            <item name="colorAccent">@color/colorAccent</item>
            <!--Title,item字体颜色-->
            <item name="android:textColorPrimary">#f00fff</item>
            <!--窗体背景颜色-->
            <item name="android:windowBackground">@color/colorBackground</item>
            <!--底部操作栏颜色 API>21-->
            <item name="android:navigationBarColor">#33f000</item>
            <!--控件的默认颜色,如复选框未选中时的颜色,本文右上角的溢出菜单-->
            <item name="android:colorControlNormal">#ffffff</item>
        </style>

    测试效果图:

    image


    源码地址:

    源码下载


    总结:

    1. 这次的学习,发现Theme和menu的理解有限,后续学习后文章补充这块内容
    2. 测试的时候,发现6.0系统 selectableItemBackground设置Menu点击背景颜色 没反应,有解决方案的评论告知,谢了

    样式与主题详解


    展开全文
  • 主要为大家详细介绍了Android自定义Toolbar使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Android Toolbar的使用详解

    千次阅读 热门讨论 2021-05-29 19:56:51
    700 style> resources> 使用这种方式需要在 AndroidManifest.xml 中的对应的 activity 节点中设置 theme 属性 或者 在 现在开始添加一个ToolBar 布局中添加Toolbar <LinearLayout xmlns:android=...

    修改主题

    当我们新建一个工程时,我们发现默认是有导航栏的, 如图:
    在这里插入图片描述
    那是因为默认app主题自带了导航栏
    在这里插入图片描述
    在这里插入图片描述
    我们发现,系统自带的是一个xxxActionBar,那么我们应该禁用掉 ActionBar

    方法一

    注意 要选择 xxxNoActionBar 也就是无导航栏的样式
    在这里插入图片描述
    以上主题任意选择一个即可。

    方法二

    你也可以在 res/style.xml 中配置 NoActionBar 主题样式 (全局可用)

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/purple_500</item>
            <item name="colorPrimaryDark">@color/black</item>
            <item name="colorAccent">@color/teal_700</item>
        </style>
    </resources>
    

    使用这种方式需要在 AndroidManifest.xml 中的对应的 activity 节点中设置 theme 属性
    在这里插入图片描述
    或者 在
    在这里插入图片描述
    现在开始添加一个ToolBar

    布局中添加Toolbar

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
    </LinearLayout>
    

    添加Toolbar具体内容

      // 设置Logo
      toolbar.setLogo(R.mipmap.ic_launcher);
      //  主标题
      toolbar.setTitle("主标题");
      //  副标题
      toolbar.setSubtitle("副标题");
      // 设置导航图标
      toolbar.setNavigationIcon(R.drawable.ab_android);
      ....
    

    Toolbar常用属性

    在这里插入图片描述

    添加菜单

    请先在项目的 res/menu/ 目录中创建新的 XML 文件。
    接下来是菜单的初始化

    方法一

    通过inflateMenu可以添加toolbar的菜单

    //设置菜单
    toolbar.inflateMenu(R.menu.menu_main);
    

    注意: 要想让Toolbar本身的inflateMenu生效,则必须删去这两句代码!!!

      setSupportActionBar(toolbar);
      getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    

    方法二

    调用Activity本身创建menu的接口

     @Override
     public boolean onCreateOptionsMenu(Menu menu) {
         getMenuInflater().inflate(R.menu.menu_main, menu);
         return super.onCreateOptionsMenu(menu);
     }
    

    监听菜单项

    使用 inflateMenu 方法的

        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem menuItem) {
                String msg = "";
                switch (menuItem.getItemId()) {
                    case R.id.action_edit:
                        msg += "点击标签";
                        break;
                    case R.id.action_share:
                        msg += "点击分享";
                        break;
                    case R.id.action_new:
                        msg += "点击新建";
                        break;
                    case R.id.action_settings:
                        msg += "点击退出";
                        break;
                }
                if (!msg.equals("")) {
                    Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
                }
                return true;
            }
        });
    

    调用Activity本身创建menu的接口

        @Override
        public boolean onOptionsItemSelected(@NonNull MenuItem item) {
            int id = item.getItemId();
            switch (id) {
                case R.id.menu_app:
                    Toast.makeText(MainActivity.this, "单击了应用程序菜单", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.calendar:
                    Toast.makeText(MainActivity.this, "单击了日历", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.paint:
                    Toast.makeText(MainActivity.this, "单击了画图", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.pictures:
                    Toast.makeText(MainActivity.this, "单击了图片", Toast.LENGTH_SHORT).show();
                    break;
            }
            return super.onOptionsItemSelected(item);
        }
    

    完整代码

    activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
    </LinearLayout>
    

    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">
        <item
            android:id="@+id/action_edit"
            android:icon="@drawable/ab_edit"
            android:orderInCategory="80"
            android:title="@string/action_edit"
            app:showAsAction="ifRoom|withText" />
        <item
            android:id="@+id/action_share"
            android:icon="@drawable/regular_share"
            android:orderInCategory="80"
            android:title="@string/action_share"
            app:showAsAction="ifRoom|withText" />
    
        <item
            android:id="@+id/action_new"
            android:icon="@drawable/ab_new"
            android:orderInCategory="80"
            android:title="@string/action_new"
            app:showAsAction="ifRoom|withText" />
        <item
            android:id="@+id/action_settings"
            android:icon="@drawable/setting"
            android:orderInCategory="80"
            android:title="@string/action_setting"
            app:showAsAction="ifRoom|withText" />
    </menu>
    

    上面代码中组件的添加和Menu绘制的方法类似,唯一的区别就是app:showAsAction值的不同,而该属性正是 Toolbar关键所在。 app:showAsAction 属性共有 4个值,分别如下。
    1)always:这个值会使菜单项一直显示在 ToolBar上。
    2)ifRoom:如果有足够的空间,这个值会使菜单项显示在 Tool Bar上。
    3)never:这个值会使菜单项永远都不出现在 ToolBar上。
    4)withText:这个值会使菜单项和它的图标、菜单文本一起显示。一般和ifRoom一起通过“|”使用
    app:showAsAction 属性值为 ifRoom|withText,表示如果有空间,那么就连同文字一起显示在标题栏中,否则就显示在菜单栏中。
    而当app:showAsAction 属性值为 never时,该项作用为Menu不显示在菜单组件中。

    MainActivity

    package com.example.toolbar;
    
    import android.os.Bundle;
    import android.view.MenuItem;
    import android.widget.Toast;
    
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.appcompat.widget.Toolbar;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar toolbar = findViewById(R.id.toolbar);
            //设置Logo
            toolbar.setLogo(R.mipmap.ic_launcher);
            //主标题
            toolbar.setTitle("主标题");
            //副标题
            toolbar.setSubtitle("副标题");
            //设置导航图标
            toolbar.setNavigationIcon(R.drawable.ab_android);
            //添加菜单
            toolbar.inflateMenu(R.menu.menu_main);
            //监听菜单项
            toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem menuItem) {
                    String msg = "";
                    switch (menuItem.getItemId()) {
                        case R.id.action_edit:
                            msg += "点击标签";
                            break;
                        case R.id.action_share:
                            msg += "点击分享";
                            break;
                        case R.id.action_new:
                            msg += "点击新建";
                            break;
                        case R.id.action_settings:
                            msg += "点击退出";
                            break;
                    }
                    if (!msg.equals("")) {
                        Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
                    }
                    return true;
                }
            });
    
        }
    }
    

    在这里插入图片描述

    展开全文
  • android Toolbar的简单使用

    千次阅读 2018-06-18 19:45:16
    1.活动主题更改为隐藏ToolBarandroid:theme="@style/Theme.AppCompat.Light.NoActionBar&...android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_pare...

    一、基本使用

    1.活动主题更改为隐藏ToolBar

    android:theme="@style/Theme.AppCompat.Light.NoActionBar"

    2.布局中添加toolbar

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>

    3.实例化

    //实例化
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    效果如下


    4.基本属性

    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:navigationIcon="@drawable/toolbar_back"
            app:logo="@drawable/toolbar_logo"
            app:title="大标题"
            app:titleTextColor="#e26b6b"  
            app:subtitle="子标题"
            app:subtitleTextColor="#6decd5">
        </android.support.v7.widget.Toolbar>

    app:navigationIcon="@drawable/toolbar_back"         //左侧图标

    app:logo="@drawable/toolbar_logo"                         //logo

    app:title="大标题"                                                     //大标题

    app:titleTextColor="#e26b6b"                                    //大标题颜色

    app:subtitle="子标题"                                                //子标题

    app:subtitleTextColor="#6decd5"                              //子标题颜色

    效果如下;


    5.添加选项菜单

    第一步创建菜单文件

    <?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">
        <item
            android:id="@+id/toolbar_menu_settings"
            android:icon="@drawable/toolbar_setting"
            android:orderInCategory="100"
            android:title="settings"
            app:showAsAction="never"/>
        <item
            android:id="@+id/toolbar_menu_share"
            android:icon="@drawable/toolbar_share"
            android:orderInCategory="110"
            android:title="share"
            app:showAsAction="ifRoom"/>
        <item
            android:id="@+id/toolbar_menu_search"
            android:icon="@drawable/toolbar_search"
            android:orderInCategory="100"
            android:title="search"
            app:showAsAction="ifRoom"/>
    </menu>
    第二部在代码中重写onCreateOptionsMenu方法加载菜单文件
    @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.toolbar_menu,menu);
            return true;
        }

    效果如下


    二、个性设置

    1.左侧返回箭头

    想要显示自带的返回箭头,需要去掉之前设定的属性:

    app:navigationIcon="@mipmap/title_bar_back"
    

    然后在代码中添加:

    ActionBar actionBar = getSupportActionBar();
    if (actionBar != null){
         actionBar.setHomeAsUpIndicator(R.drawable.design_menu);     //设置图标
         actionBar.setDisplayHomeAsUpEnabled(true);                   //显示
    }

    效果


    2.溢出图标颜色

    在style文件中添加:

    <!-- 溢出菜单图标颜色-->
    <item name="colorControlNormal">@android:color/white</item


    2.自定义右侧溢出图标

    <style name="AppTheme.MyNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- 溢出菜单图标颜色-->
            <item name="colorControlNormal">@android:color/white</item>
            <!-- 溢出菜单图标自定义-->
            <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
    
            <item name="android:windowActionBar">false</item>
            <item name="android:windowNoTitle">true</item>
    
            <item name="windowActionBar">false</item>
            <item name="windowNoTitle">true</item>
        </style>
    
        <style name="OverflowButtonStyle" parent="android:Widget.ActionButton.Overflow">
            <item name="android:src">@drawable/toolbar_menu_add</item>
        </style>

    补充:

        由于我们使用的是AppCompatActivity,因此必须使用AppCompat的相关主题,我这里使用亮色调的没有ActionBar的主题,注意需要在清单文件当中去使用自己定义的主题。

        为了完全去掉ActionBar,需要把windowActionBar、windowNoTitle以及加上android声明的也写上,确保把系统自带的以及第三方兼容包的ActionBar都彻底去掉。

    效果:


    3.更改弹出菜单背景

    在Style文件中添加样式:

    <!-- toolbar弹出菜单样式背景 -->
        <style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat">
            <item name="android:colorBackground">@color/gray</item>
        </style>
    

    在布局文件中添加使用主题:

    app:popupTheme="@style/ToolbarPopupTheme"
    

    此时运行效果:




    3.更改弹出文字颜色
    <style name="AppTheme.MyNoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- 溢出菜单图标颜色-->
            <item name="colorControlNormal">@android:color/white</item>
            <!-- 溢出菜单图标自定义-->
            <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
            <!-- 溢出菜单文字颜色-->
            <item name="textAppearanceLargePopupMenu">@style/Overflow_Menu_Text_style</item>
    
            <item name="android:windowActionBar">false</item>
            <item name="android:windowNoTitle">true</item>
    
            <item name="windowActionBar">false</item>
            <item name="windowNoTitle">true</item>
        </style>
    
        <!--溢出菜单文字颜色-->
        <style name="Overflow_Menu_Text_style" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large">
            <item name="android:textColor">@color/white</item>
        </style>

    效果:


    4.修改(大/小)标题文字大小

    添加style

    <!-- toolbar小标题文字大小 -->
        <style name="SubToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
            <item name="android:textSize">18sp</item>
        </style>
        <!-- toolbar大标题文字大小 -->
        <style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
            <item name="android:textSize">12sp</item>
        </style>

    布局文件添加

    app:titleTextAppearance="@style/ToolbarTitleSize"
    app:subtitleTextAppearance="@style/SubToolbarTitleSize"

    效果:


    5.修改弹出菜单位置

    添加style:

    <!--菜单弹出-->
        <style name="OverflowMenuStyle">
            <!-- 弹出层背景颜色 -->
            <item name="android:colorBackground">@color/gray</item>
            <!-- 设置弹出菜单文字颜色 -->
            <item name="android:textColor">@color/white</item>
    
            <!-- 是否覆盖锚点,默认为true,即盖住Toolbar -->
            <item name="overlapAnchor">false</item>
            <item name="android:dropDownWidth">wrap_content</item>
            <item name="android:paddingRight">5dp</item>
            <!-- 弹出层垂直方向上的偏移,即在竖直方向上距离Toolbar的距离,值为负则会盖住Toolbar -->
            <item name="android:dropDownVerticalOffset">5dp</item>
            <!-- 弹出层水平方向上的偏移,即距离屏幕左边的距离,负值会导致右边出现空隙 -->
            <item name="android:dropDownHorizontalOffset">0dp</item>
        </style>

    布局文件

    app:popupTheme="@style/OverflowMenuStyle"

    效果:


    6.事件处理

    6.1返回按钮事件

    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(ToolBarActivity.this,"ToolBar",Toast.LENGTH_SHORT).show();
                }
            });

    6.2菜单项点击事件

    @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            switch (item.getItemId()){
                case R.id.toolbar_menu_search:
                    Toast.makeText(ToolBarActivity.this,"search",Toast.LENGTH_SHORT).show();
                    break;
                case R.id.toolbar_menu_share:
                    Toast.makeText(ToolBarActivity.this,"share",Toast.LENGTH_SHORT).show();
                    break;
                case R.id.toolbar_menu_settings:
                    Toast.makeText(ToolBarActivity.this,"settings",Toast.LENGTH_SHORT).show();
                    break;
                default:
                        Toast.makeText(ToolBarActivity.this,"error",Toast.LENGTH_SHORT).show();
    
            }
            return true;
        }

    三.高级

    1.toolbar嵌套布局

    Toolbar下面可以嵌套布局,直接将自己定义好的布局放到Toolbar下面即可

    <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize">
    
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                ......
                </RelativeLayout>
        </android.support.v7.widget.Toolbar>

    2.Toolbar 和 DrawerLayout 左滑菜单

    更改原来的布局文件如下:

    <?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout
        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:id="@+id/toolbar_drawlayout"
        tools:context="my.test.ToolBarActivity">
    
        <!--DrawerLayout包含两个空=控件,第一个主界面,第二个侧滑菜单-->
        <!--toolbar一定要重新包含起来-->
        <!--主界面-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <!--app:navigationIcon="@drawable/toolbar_back" 左侧图标-->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@color/colorPrimary"
                app:logo="@drawable/toolbar_logo"
                app:title="大标题"
                app:titleTextColor="#e26b6b"
                app:subtitle="子标题"
                app:subtitleTextColor="#6decd5"
                app:popupTheme="@style/OverflowMenuStyle"
                app:titleTextAppearance="@style/ToolbarTitleSize"
                app:subtitleTextAppearance="@style/SubToolbarTitleSize">
            </android.support.v7.widget.Toolbar>
        </LinearLayout>
    
        <!--侧滑菜单-->
        <!--android:layout_gravity="start"指定方向-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#CCCCFF"
            android:orientation="vertical">
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:text="选项一"
                android:textSize="18sp"/>
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dp"
                android:text="选项二"
                android:textSize="18sp"/>
        </LinearLayout>
    
    </android.support.v4.widget.DrawerLayout>
    

    活动中添加;

    final DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.toolbar_drawlayout);

    修改返回按钮事件:

    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast.makeText(ToolBarActivity.this,"ToolBar",Toast.LENGTH_SHORT).show();
                    //显示菜单
                    mDrawerLayout.openDrawer(GravityCompat.START);
                    //关闭滑动菜单
                    //mDrawerLayout.closeDrawers();
                }
            });

    效果:


    展开全文
  • Android Toolbar配合menu使用详解Toolbar使用普通menu使用上下文menu使用:PopupMenu菜单: 历史上的今天(2021.3.5): 1898年3月5日,周恩来生于江苏淮安,早年留学日本。1919年在天津参加“五·四”运动。(1976年1月8...
  • android Toolbar控件

    2021-05-28 02:23:03
    Toolbarandroid L引入的一个新控件,可以理解为action bar的第二代:提供了action bar类似的功能,但是更灵活。不像actionbar那么固定,Toolbar更像是一般的View元素,可以被放置在view树体系的任意位置,可以应用...
  • 需要在res文件下,values中的themes.xml文件,将style中的parent改为NoactionBar navigation通常用于返回箭头 选择androidx,可以在其中写入textview
  • ToolBar控件详解在Activity中添加ToolBar1.添加库dependencies {...compile ...设置主题使用ToolBar,要将系统默认的ActionBar隐藏掉android:theme="@style/Theme.AppCo...
  • 今天在做一个menu的时候,需要改动item的高度和字体大小颜色。...首先对 Android 内部这个弹出menu似乎命名为 OverflowMenu,默认3个点的 more 按钮应该是命名为OverflowButton,但是部分属性却以...
  • Android的标题栏是很重要的一个模块,App是否易用很大一部分要看标题栏。写这个博客的时候刚发现谷歌推出了一种新的标题栏实现方式。它相对于以前的ActionBar来说,最大的变化是开发者可以在标题栏上增加自定义的...
  • Android ToolBar使用详解(手把手教你撸代码)

    千次阅读 热门讨论 2021-03-24 14:51:04
    这几天因为偶然看到关于Android 11分区存储的变更,然后博客就耽误了,以前关于toolbar了解过但是没有上手过,因为没有负责到那一块,今天我们来手撸一下关于toolbar的代码以及我遇到的问题,我会给大家一一写清楚,...
  • 自定义Toolbar,实现方式如下:1.布局文件,在activity_main.xml 文件中写入Toolbarxmlns:tools=...
  • 前言想必大家对ToolBar以及Material Design有所了解、也一定见过其炫酷的效果。今天咱们就来总结一下集中常见的用法,以便日后工作中使用。先上几张效果图来提提劲。通用的ToolBar.png可以划出屏幕的ToolBar.gif可以...
  • ToolBarAndroid 5.0推出的一个新的导航控件用于取代之前的ActionBar,由于其高度的可定制性、灵活性、具有Material Design风格等优点,越来越多的应用也用上了ToolBar,比如常用的知乎软件其顶部导航栏正是使用...
  • Android Toolbar 居中

    2021-06-16 17:34:36
    Android Toolbar 居中封装 1、QToolbar是什么 标题栏控件,基于Toolbar控件封装 有返回按钮 左标题 居中标题 子标题 右侧菜单 优势: 继承于ToolbarToolbar的API QToolbar都支持,会toolbar可轻松上手 效果图: ...
  • Android ToolBar 使用完全解析

    万次阅读 多人点赞 2016-05-07 11:12:27
    ToolBar简介ToolBarAndroid 5.0推出的一个新的导航控件用于取代之前的ActionBar,由于其高度的可定制性、灵活性、具有Material Design风格等优点,越来越多的应用也用上了ToolBar,比如常用的知乎软件其顶部导航栏...
  • ToolBarAndroid ToolBar之完全解析

    千次阅读 2015-10-19 17:50:05
    ToolbarAndroid 5.0中新引入的一个控件,其出现的目的就是为了取代ActionBar,在讲解Toolbar之前我们还是来恶补一下关于ActionBar的一些野史,看看为什么Android会在5.0中使用一个全新的控件来取代它。 说起...
  • 正在封装一个库,打算封装一个BaseToolbarActivity,打算用于以后的使用,但是我在库里面的xml中设置的属性,没有效果,求教 ``` java /** * Created by leo on 2017/6/16. * 在需要使用带有标题(Toolbar实现)的...
  • Android Toolbar左、中、右对齐 默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是,Android Toolbar为自身的NavigationIcon(app:navigationIcon)最靠右,Logo(app:lo...
  • 如果你想学习toolbar,你肯定会去去搜索androd toolbar,既然你能看到这篇文章,说明还是搜了xamarin android toolbar。那么这篇文章就好好总结一下toolbar在xamarin android中如何使用,减少大家踩坑的时间。01 ...
  • 第一步将打算使用Toolbar的Activity继承AppCompatActivity。为什么要让Activity继承这个类呢?我们来看下官方文档对AppCompatActivity的介绍:You can add an ActionBar to your activity when running on API level ...
  • toolbar的一些属性说明

    千次阅读 2017-02-12 16:00:11
    在上一篇使用toolBar作为标题栏并使状态栏透明已经使用toolbar作为标题栏,现在再记录一些toolbar的常用属性说明。  1.设置导航图标(左边的图标,常用于返回按钮)  mToolbar.setNavationIcon(R,mipmap.ic_...
  • 本篇笔记用来记录常用的Toolbar设置,如Toolbar颜色设置,显示返回按钮,显示右边三个点按钮之前Android 使用的ActionBar,Android5.0开始,谷歌官方推荐使用Toolbar来代替ActionBar最近慢慢开始使用上kotlin了,贴...
  • 可以通过外部来控制显示的文字和颜色等属性。 需求描述与分析 通常我们会自定义Titlebar,可以实现很多自定义的效果。但是后来Toolbar出来后实在太好用了,于是乎我们都使用了Toolbar但是我们要给右侧的Menu B
  • Marterial Design出来也有一段时间了,为了紧跟Google的设计规范,决定在项目中使用Toolbar。使用了一段时间之后,发现很多时候原始的Toolbar并不能满足项目的要求。为了适应项目多样化的需求,对Toolbar进行了深入...
  • 其中showAsAction的属性值决定菜单各元素的显示方式 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app=...
  • 1.找到你布局中的toolbar,加上两个属性,图中红色部分 2.用代码重写设置你的toolbar的高度,找到toolbar控件,作为参数传入下面的方法 public void setStatusBarHeight(View view) { ViewGroup.LayoutPar

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,180
精华内容 4,072
热门标签
关键字:

androidtoolbar属性