IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> 导航栏的使用(ToolBar、BottomNavgationView) -> 正文阅读

[移动开发]导航栏的使用(ToolBar、BottomNavgationView)

一、ToolBar标题栏的使用
toolbar标题栏:一个 ToolBar 的基本组成,包括左侧导航图标、标题、子标题等。

具体的创建步骤如下:

1、隐藏页面自带标题栏
(1)将应用主题设为 NoActionBar

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    >

(2)在 Java 代码中调用 requestWindowFeature()方法
注意:有些android studio软件可能因为版本的不同,无法调用这个方法

@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 requestWindowFeature(Window.FEATURE_NO_TITLE) 
 setContentView(R.layout.activity_study);
 ……
}

2、在页面布局文件中加入 ToolBar
在页面布局设计中,加入androidx.appcompat.widget.Toolbar控件,根据toolbar栏的功能需要,可以在里面添加其他的控件。
具体代码省略

3、在 Activity 代码中设置 ToolBar

public class MainActivity extends AppCompactActivity {
private ToolBar toolBar;
@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 toolBar = findViewById(R.id.toolbar);
 //设置 Logo 图标
 toolBar.setLogo(R.drawable.logo);
 //设置左侧导航图标
 toolBar.setNavigationIcon(R.drawable.ic_back);
 //设置标题
 toolBar.setTitle("标题栏");
 //设置标题文字颜色
 toolBar.setTitleTextColor(Color.BLACK);
//设置子标题
 toolBar.setSubtitle("子标题栏");
 //设置背景颜色
 toolBar.setBackgroundResource(R.color. colorAccent);
 //设置 ToolBar 对象
 setSupportActionBar(toolBar);
toolbar.setNavigationOnClickListener(
new OnClickListener(){
 @Override
 public void onClick(View v) {
 finish();
 }
);
}
}

在这里尤为要注意的是添加导航图标点击事件监听之前需要写setSupportActionBar()方法以使用设置好的toolbar控件。

以上步骤就能实现一个简单的toolbar工具栏

二、菜单控件的使用
菜单项:对于ToolBar 上没有空间完全显示的菜单项或设
置为不显示的菜单项则隐藏在右侧的溢出菜单中,
1、添加菜单资源
在res目录下,创建个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_search"
        android:title="搜索"
        android:icon="@mipmap/xuexi"
        app:showAsAction="always"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        />
    <item android:id="@+id/action_join"
        android:title="加入"
        android:icon="@mipmap/huodong"
        app:showAsAction="always"/>
    <item android:id="@+id/action_notifications"
        android:title="提示"
        android:icon="@mipmap/user_photo"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/action_quit"
        android:title="退出"
        android:orderInCategory="100"
        android:icon="@mipmap/left"
        app:showAsAction="never"/>
</menu>

我这里添加了搜索栏searchview。

2、加载菜单

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

3、给菜单项添加点击事件

 //工具栏菜单项点击事件
        toolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch(item.getItemId()) {
                    case R.id.action_join:
                        Toast.makeText(MainActivity.this,"点击加入",
                                Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_notifications:
                        Toast.makeText(MainActivity.this,"点击提示",
                                Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_quit:
                        Toast.makeText(MainActivity.this,"点击退出",
                                Toast.LENGTH_SHORT).show();
                        break;
                     case R.id.action_search:
                         Toast.makeText(MainActivity.this,"点击搜索",
                                 Toast.LENGTH_SHORT).show();
                         break;
                    default:
                        break;
                }
                return true;
            }
        });

注意,以上代码需要放在setSupportActionBar()之后,否则不起作用。

下面介绍底部导航栏的使用
控件:BottomNavigationView
1、导入依赖包
在使用该控件之前需要在dependencies中导入依赖包:’com.google.android.material:material:1.2.0’;

2、设计底部导航栏
此处的思路同使用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">
<item
 android:id="@+id/points"
 android:icon="@drawable/points"
 android:title="积分" />
<item
 android:id="@+id/answer"
 android:icon="@drawable/answer"
 android:title="答题" />
<item
 android:id="@+id/study"
 android:icon="@drawable/study"
 android:title="学习" />
<item
 android:id="@+id/radio"
 android:icon="@drawable/ radio "
 android:title="电台" />
<item
 android:id="@+id/tv"
 android:icon="@drawable/tv"
 android:title="电视台" />
</menu>

3、将 BottomNavigationView 控件加入布局
根据底部栏所在的包,添加一个BottomNavigationView 控件,并设置背景、文字颜色、图标颜色等属性

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".activity.StudyActivity">
 <com.google.android.material.bottomnavigation.BottomNavigationView
 android:id="@+id/bottom_nav"
 android:layout_width="match_parent"
 android:layout_height="50dp"
 android:layout_alignParentBottom="true"
 android:background="#ffffff"
 app:itemBackground="@null"
 app:itemIconTint="@drawable/selector_nav"
 app:itemTextColor="@drawable/selector_nav"
 app:labelVisibilityMode="labeled"
 app:menu="@menu/nav_menu" />
</RelativeLayout>

4、添加 BottomNavigationView 点击效果
通常需要将BottomNavigationView 控件与fragement相结合使用。
具体实现说明省略

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2021-12-06 15:23:13  更:2021-12-06 15:24:03 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 7:27:01-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码