Android--ToolBar使用

其他 2018-07-28 20:20:32 阅读次数: 0

使用ToolBar

使用的文件：
1、MainActivity.java
2、activity_main.xml
3、style.xml
4、menu_main.xml

1、基本设置

style中配置，必须设置为：Theme.AppCompat.Light.NoActionBar 这个主题。

    <!-- 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>
    </style>

activity_main.xml中添加

    <android.support.v7.widget.Toolbar
        android:id="@+id/activity_main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="?attr/colorPrimaryDark"
        android:minHeight="?attr/actionBarSize"/>

menu_main.xml中设置（即当点击menu按钮时会跳出两个选项item）

<?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_item1"
        android:title="item1"
        android:orderInCategory="2"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="never"/>

    <item android:id="@+id/action_item2"
        android:title="item2"
        android:orderInCategory="3"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="never"/>
</menu>

MainActivity中设置

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

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

        toolbar.setTitle("标题");

        setSupportActionBar(toolbar);
    }

这里写图片描述
这时，左边NvagitionIcon和右边的MenuIcon都没有出来，所以还要在Java中配置。
设置左边

 //设置是否有NvagitionIcon（返回图标）
 getSupportActionBar().setDisplayHomeAsUpEnabled(true);

设置右边

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

总的：

public class MainActivity extends AppCompatActivity {

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

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

        toolbar.setTitle("标题");

        setSupportActionBar(toolbar);

        //设置是否有NvagitionIcon（返回图标）
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

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

    }
}

现在就有了左边和右边的图标了，但是它们都是黑色的图标连标题都是黑的。那是因为我们在style.xml文件中设置了<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
这里写图片描述

可以将其改成：<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">字体就变白了，但是整个页面变黑了。

这里写图片描述

问题一：跳出的那个选项区，覆盖了ToolBar

这里写图片描述
解决方法：
1、在style.xml文件中创建一个主题

    <!-- ToolBar菜单样式.-->
    <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--设置背景-->
        <item name="android:background">@color/colorPrimaryDark</item>
        <!--设置字体颜色-->
        <item name="android:textColor">@android:color/white</item>
        <!--设置不覆盖锚点-->
        <item name="overlapAnchor">false</item>
    </style>

2、在MainActivity中使用这个主题

// 使用主题修改Menu选项的问题
toolbar.setPopupTheme(R.style.popup_theme);

整个的代码：

public class MainActivity extends AppCompatActivity {

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

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

        toolbar.setTitle("标题");
        // 使用主题修改Menu选项的问题
        toolbar.setPopupTheme(R.style.popup_theme);

        setSupportActionBar(toolbar);

        //设置是否有NvagitionIcon（返回图标）
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }

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

    }
}

问题解决，如下图：
这里写图片描述

问题二：Menu的选项栏里面没有图标，如上图

解决方法：
在MainActivity中加入这个重写函数，注意这段代码有红色下划线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) {

                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }

整个的代码：

public class MainActivity extends AppCompatActivity {

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

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

        toolbar.setTitle("标题");
        // 使用主题修改Menu选项的问题
        toolbar.setPopupTheme(R.style.popup_theme);

        setSupportActionBar(toolbar);

        //设置是否有NvagitionIcon（返回图标）
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
    // 创建 Menu图标
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;

    }
    // 让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) {

                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }
}

问题解决如下图：
这里写图片描述

ToolBar中的各种点击监听

1、NavigationIcon的点击事件监听：
在MainActivity中添加代码：点击之后直接关闭

    toolbar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            finish();
        }
    });

整个的代码：

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

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

        toolbar.setTitle("标题");
        // 使用主题修改Menu选项的问题
        toolbar.setPopupTheme(R.style.popup_theme);

        setSupportActionBar(toolbar);

        //设置是否有NvagitionIcon（返回图标）
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        // 设置Navigation的点击事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }

2、Menu中的监听

// Menu点击事件监听
toolbar.setOnMenuItemClickListener(onMenuItemClick);

实现

private Toolbar.OnMenuItemClickListener onMenuItemClick=new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            String msg = "";
            switch (item.getItemId()) {
                case R.id.action_item1:
                    msg += "Click item1";
                    break;
                case R.id.action_item2:
                    msg += "Click item2";
                    break;
            }
            if (!msg.equals("")) {
                Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_SHORT).show();
            }
            return true;
        }
    };

全部代码如下：

public class MainActivity extends AppCompatActivity {

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

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

        toolbar.setTitle("标题");
        // 使用主题修改Menu选项的问题
        toolbar.setPopupTheme(R.style.popup_theme);

        setSupportActionBar(toolbar);

        //设置是否有NvagitionIcon（返回图标）
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        // 设置Navigation的点击事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        // Menu点击事件监听
        toolbar.setOnMenuItemClickListener(onMenuItemClick);
    }
    // 创建Menu图标
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;

    }
    // Menu选项中显示Icon
    @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) {

                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    }

    // Menu选项点击处理
    private Toolbar.OnMenuItemClickListener onMenuItemClick=new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            String msg = "";
            switch (item.getItemId()) {
                case R.id.action_item1:
                    msg += "Click item1";
                    break;
                case R.id.action_item2:
                    msg += "Click item2";
                    break;
            }
            if (!msg.equals("")) {
                Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_SHORT).show();
            }
            return true;
        }
    };
}

这里写图片描述

修改NavigationIcon 和 MenuIcon

1、创建vector资源（下载一个SVG图片使用AndroidStudio来生成XML文件），也可以直接使用.png文件

2、在Java代码中修改

Toolbar toolbar = findViewById(R.id.activity_main_toolbar);
// 修改NavigationIcon
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_toolbar_left_45dp)); 
// 修改MenuIcon
toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_toolbar_menu_45dp));
setSupportActionBar(toolbar);

如何在ToolBar上面显示按钮/图标

在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_item1"
        android:title="item1"
        android:orderInCategory="2"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="always"/>

    <item android:id="@+id/action_item2"
        android:title="item2"
        android:orderInCategory="3"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="never"/>
</menu>

注意这一个属性：app:showAsAction=""

  • app:showAsAction="always" ：always：总是显示在界面上
  • app:showAsAction="never" ：never：不显示在界面上，只让出现在右边的三个点中
  • app:showAsAction="ifRoom" ：ifRoom：如果有位置才显示，不然就出现在右边的三个点中

猜你喜欢

转载自blog.csdn.net/qq_28877125/article/details/81028163
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022