Android顶部导航栏制作

编程入门行业动态更新时间:2024-10-28 03:26:09

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=""xmlns:app=""xmlns: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=""xmlns:app=""xmlns:tools=""tools:context="com.zhiyiyi.designone.MainActivity"><itemandroid:id="@+id/action_settings"android:orderInCategory="100"android:title="@string/action_settings"android:icon="@drawable/setting"app:showAsAction="always" /><itemandroid:id="@+id/action_logo"android:orderInCategory="99"android:title="Logo"app:showAsAction="always"android:icon="@drawable/home"/><itemandroid: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.xmlgetMenuInflater().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);
}