android dialog 顶部显示 android顶部导航栏

转载

编程小达人 2023-07-09 20:44:08

文章标签 android dialog 顶部显示 android java 开发语言 xml 文章分类 Android 移动开发

一些废话
我们这次主要制作一个简单的顶部导航栏，下一期将会对抽屉导航做基本介绍以及界面优化；
废话少说，看正文吧 = =

图片准备与样式变更

因为目前版本UI默认以紫色色调为主，而在此我们希望使用更为和谐的淡蓝色调，此时需要对themes.xml文件执行修改；

首先我们要设置颜色，打开文件colors.xml
文件中默认存在一些默认色彩，我们按照格式新增两个主色调blue_primary1和blue_primary2
文件路径：values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <!-- 新增的两个颜色 -->
    <color name="blue_primary1">#87CEFA</color>
    <color name="blue_primary2">#7EC0EE</color>
</resources>

之后进入 values/themes.xml
将开头的两个色彩设置为我们新增的蓝色，此时代码框的左侧会展示目前的色彩；

<item name="colorPrimary">@color/blue_primary1</item>
<item name="colorPrimaryVariant">@color/blue_primary2</item>

关于导入图标的几点要求
因为顶层导航栏已经被我们设置成了淡蓝色，导入的图标千万别选择颜色相近或违和的；
使用png格式图标，因为此图标的背景默认透明，否则显示出背景会很难看；
图标会自动拉伸压缩，无需我们做任何处理，请放心！

配置顶部导航栏xml文件

新建xml文件，于路径： res/menu/menu_main.xml
menu文件夹默认不存在，需要新建，这里我们使用的menu文件名为menu_main.xml

首先外层以menu标签包裹，并导入四个包；

<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="com.zhiyiyi.designone.MainActivity">
</menu>

在menu标签下添加item标签，他代表导航的项目，下面介绍item标签中几个重要的属性：

orderInCategory 优先级，数值越大的项目排的越前；
title 类似于标准组件的text属性，设置项目的显示名称；
showAsAction 设置标签显示方式，never表示一直折叠，always表示一直显示；
icon 如果项目显示方式为always且指定了一个icon的话，他的名称就会被图标覆盖

TIPS:项目显示方式为always和never时的优先级是分开的，即各个显示方式对应各个的优先级！

<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="com.zhiyiyi.designone.MainActivity">
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        android:icon="@drawable/setting"
        app:showAsAction="always" />

    <item
        android:id="@+id/action_logo"
        android:orderInCategory="99"
        android:title="Logo"
        app:showAsAction="always"
        android:icon="@drawable/home"/>

    <item
        android:id="@+id/action_about"
        android:orderInCategory="1"
        android:title="关于"
        app:showAsAction="never"/>

</menu>

注册menu

以下代码在MainActivity.java中书写，因为我们希望导航栏展示在这个activity上面！

首先在onCreateOptionsMenu方法中注册xml；
其次注册监听点击事件onCreateOptionsMenu，根据返回的id判断目前点击的是哪一个项目；

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

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    // 根据点击得到的id来判断目前选择的是那个项目
    switch (id){
        case R.id.action_settings:
            return true;
        case R.id.action_logo:
            Toast.makeText(this, "点击了LOGO", Toast.LENGTH_SHORT).show();
    }

    return super.onOptionsItemSelected(item);
}