Android 标题栏及导航栏设计与实现
2024-04-10 23:08:07
文章目录
- 整体演示
- 一、Toolbar实现顶部标题
- 1、案例演示
- 2、实现步骤
- 2.1、隐藏页面自带标题栏
- 2.2、页面布局添加ToolBar
- 2.3、MainActivity.java（设置ToolBar属性）
- 二、ToolBar添加菜单和搜索框
- 1、案例演示
- 2.1、创建menu资源文件
- 2.2、menu_main.xml
- 2.3、MainActivity.java(加载菜单和搜索栏)
- 三、BottomNavigationView底部导航栏
- 1、案例演示
- 2、实现步骤
- 2.1、导入依赖包
- 2.2、创建底部菜单栏（menu_bottom.xml）
- 2.3、将控件加入布局
- 四、MainActivity.java
- 5、底部栏图片
整体演示
一、Toolbar实现顶部标题
1、案例演示
2、实现步骤
2.1、隐藏页面自带标题栏
ActionBar是Android 5.0以前的顶部标题栏，由于其不够灵活所有被ToolBar取代，所有我们要隐藏ActionBar
将主题应用设为Light.NoActionBar
1、全部页面都隐藏ActionBar
values/themes/
<style name="Theme.MyApplication" parent="Theme.AppCompat.Light.NoActionBar"></style>
2、单个页面隐藏ActionBar
AndroidManifest.xml
<applicationandroid:theme="@style/Theme.AppCompat.Light.NoActionBar"></application>
2.2、页面布局添加ToolBar
<LinearLayout 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:orientation="vertical"tools:context=".MainActivity"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"></androidx.appcompat.widget.Toolbar></LinearLayout>
2.3、MainActivity.java（设置ToolBar属性）
设置了 setSupportActionBar() 后 ，toolBar的事件监听才有作用
public class MainActivity extends AppCompatActivity {private Toolbar toolbar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化toolbartoolbar();}@SuppressLint("ResourceAsColor")public void toolbar(){toolbar=findViewById(R.id.toolbar);//标题toolbar.setTitle("LuFei");//子标题toolbar.setSubtitle("儿子");//logotoolbar.setLogo(R.drawable.lufei);//左侧图标toolbar.setNavigationIcon(R.drawable.left2);//标题颜色toolbar.setTitleTextColor(R.color.teal_200);//背景颜色toolbar.setBackgroundResource(R.color.white);//设置toolbar对象setSupportActionBar(toolbar);toolbar.setNavigationOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {finish();}});toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) {//拿到了item对象，我们有idswitch (item.getItemId()){case R.id.menu1:Toast.makeText(MainActivity.this, "加入", Toast.LENGTH_SHORT).show();break;case R.id.menu2:Toast.makeText(MainActivity.this, "提示", Toast.LENGTH_SHORT).show();break;case R.id.menu3:Toast.makeText(MainActivity.this, "退出", Toast.LENGTH_SHORT).show();break;}return false;}});}}
二、ToolBar添加菜单和搜索框
1、案例演示
2.1、创建menu资源文件
2.2、menu_main.xml
- always：总是在标题栏上显示菜单图标
- ifRoom：如果右侧有空间，该项就显示在标题栏上
- never：从不在标题栏上直接显示，一直放在溢出的菜单列表中
- withText：如果能在标题栏上显示，除了显示图标，还要显示文字说明
- collapseActionView：操作视图折叠为一个按钮，点击该按钮在展开操作视图，主要用于设置SearchView
<menu xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"><item android:id="@+id/menu1"android:icon="@mipmap/ic_launcher"app:showAsAction="always"android:title="加入" /><item android:id="@+id/menu2"android:icon="@mipmap/ic_launcher"app:showAsAction="ifRoom"android:title="提示" /><item android:id="@+id/menu3"android:icon="@mipmap/ic_launcher"app:showAsAction="never"android:title="退出" /><item android:id="@+id/search"android:icon="@mipmap/ic_launcher_round"app:showAsAction="always"app:actionViewClass="androidx.appcompat.widget.SearchView"android:title="搜索" />
</menu>
2.3、MainActivity.java(加载菜单和搜索栏)
public class MainActivity extends AppCompatActivity {private Toolbar toolbar;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化toolbartoolbar();}@SuppressLint("ResourceAsColor")public void toolbar(){toolbar=findViewById(R.id.toolbar);//标题toolbar.setTitle("LuFei");//子标题toolbar.setSubtitle("儿子");//logotoolbar.setLogo(R.drawable.lufei);//左侧图标toolbar.setNavigationIcon(R.drawable.left2);//标题颜色toolbar.setTitleTextColor(R.color.teal_200);//背景颜色toolbar.setBackgroundResource(R.color.white);//设置toolbar对象setSupportActionBar(toolbar);toolbar.setNavigationOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {finish();}});toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) {//拿到了item对象，我们有idswitch (item.getItemId()){case R.id.menu1:Toast.makeText(MainActivity.this, "加入", Toast.LENGTH_SHORT).show();break;case R.id.menu2:Toast.makeText(MainActivity.this, "提示", Toast.LENGTH_SHORT).show();break;case R.id.menu3:Toast.makeText(MainActivity.this, "退出", Toast.LENGTH_SHORT).show();break;}return false;}});}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {//初始化searchgetMenuInflater().inflate(R.menu.menu_main,menu);//获取搜索框菜单栏MenuItem menuItem=menu.findItem(R.id.search);//获取SearchView对象SearchView searchView= (SearchView) menuItem.getActionView();//设置搜索栏默认提示searchView.setQueryHint("请输入商品名");//默认搜索栏为展开状态searchView.setIconified(false);//设置搜索监听器searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {//输入搜索内容后提交时触发@Overridepublic boolean onQueryTextSubmit(String query) {Toast.makeText(MainActivity.this, "您输入的内容"+query, Toast.LENGTH_SHORT).show();return false;}//输入内容改变时触发@Overridepublic boolean onQueryTextChange(String newText) {return false;}});return true;}
}
三、BottomNavigationView底部导航栏
1、案例演示
2、实现步骤
2.1、导入依赖包
implementation 'com.google.android.material:material:1.4.0'
2.2、创建底部菜单栏（menu_bottom.xml）
<menu xmlns:android="http://schemas.android.com/apk/res/android"><item android:id="@+id/bottom1"android:title="积分"android:icon="@drawable/xiangguotong"/><item android:id="@+id/bottom2"android:title="答题"android:icon="@drawable/bailing"/><item android:id="@+id/bottom3"android:title="学习"android:icon="@drawable/xuexi"/><item android:id="@+id/bottom4"android:title="电台"android:icon="@drawable/diantai"/><item android:id="@+id/bottom5"android:title="电视台"android:icon="@drawable/dianshitai"/>
</menu>
2.3、将控件加入布局
- 去掉背景 app:itemBackground=“@null”
- 设置导航栏图标颜色 app:itemIconTint=“@drawable/select_button_text”
- 设置导航栏字体颜色 app:itemTextColor=“@drawable/select_button_text”
- 解决导航栏菜单大于三个，文字不显示问题 app:labelVisibilityMode=“labeled”
<LinearLayout 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:orientation="vertical"tools:context=".MainActivity"><androidx.appcompat.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"></androidx.appcompat.widget.Toolbar><FrameLayoutandroid:id="@+id/frameLayout"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></FrameLayout><com.google.android.material.bottomnavigation.BottomNavigationViewandroid:id="@+id/bottomNavigationView"android:layout_width="match_parent"android:layout_height="50dp"android:background="@color/white"app:itemBackground="@null"app:labelVisibilityMode="labeled"app:itemIconTint="@drawable/select_button_text"app:itemTextColor="@drawable/select_button_text"app:menu="@menu/menu_bottom"/>
</LinearLayout>
selector选择器（select_button_text.xml）
去设置字体颜色，使文字颜色动态进行改变时，没有设置成功，原因是因为如果我们需要对文字颜色使用selector时，需要在item中使用
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 按钮选中状态--><item android:state_checked="true" android:color="@color/red"></item>
<!-- 按钮未选中状态--><item android:state_checked="false" android:color="@color/black"></item></selector>
四、MainActivity.java
- 在MainActivity中实现点击菜单栏fragment切换
- 创建Fragment对象，并将其添加到FragmentLayout中
- 添加点击事件，根据点击的菜单项实现对应的Fragment
public class MainActivity extends AppCompatActivity {private Toolbar toolbar;private List<Fragment> list=new ArrayList<>();private BottomNavigationView bottomNavigationView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化toolbartoolbar();//初始化底部导航initBottomNavigation();}@SuppressLint("ResourceAsColor")public void toolbar(){toolbar=findViewById(R.id.toolbar);//标题toolbar.setTitle("LuFei");//子标题toolbar.setSubtitle("儿子");//logotoolbar.setLogo(R.drawable.lufei);//左侧图标toolbar.setNavigationIcon(R.drawable.left2);//标题颜色toolbar.setTitleTextColor(R.color.teal_200);//背景颜色toolbar.setBackgroundResource(R.color.white);//设置toolbar对象setSupportActionBar(toolbar);toolbar.setNavigationOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {finish();}});toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {@Overridepublic boolean onMenuItemClick(MenuItem item) {//拿到了item对象，我们有idswitch (item.getItemId()){case R.id.menu1:Toast.makeText(MainActivity.this, "加入", Toast.LENGTH_SHORT).show();break;case R.id.menu2:Toast.makeText(MainActivity.this, "提示", Toast.LENGTH_SHORT).show();break;case R.id.menu3:Toast.makeText(MainActivity.this, "退出", Toast.LENGTH_SHORT).show();break;}return false;}});}public void initBottomNavigation(){bottomNavigationView=findViewById(R.id.bottomNavigationView);
// bottomNavigationView.setItemIconTintList(null);/*** 将所有的碎片放到集合中* 获取FragmentManager通过GetSupportFragmentManager获得* 添加Fragment提交*/list.add(new Fragment1());list.add(new Fragment2());list.add(new Fragment3());list.add(new Fragment4());list.add(new Fragment5());FragmentManager manager=getSupportFragmentManager();FragmentTransaction transaction=manager.beginTransaction();transaction.add(R.id.frameLayout,list.get(0),"积分");transaction.add(R.id.frameLayout,list.get(1),"答题");transaction.add(R.id.frameLayout,list.get(2),"学习");transaction.add(R.id.frameLayout,list.get(3),"电台");transaction.add(R.id.frameLayout,list.get(4),"电视台");transaction.commit();//进入主页面时显示学习页面，隐藏其他fragmenttransaction.hide(list.get(0));transaction.hide(list.get(1));transaction.hide(list.get(3));transaction.hide(list.get(4));//设置底部导航选中“学习”菜单项bottomNavigationView.setSelectedItemId(R.id.bottom3);bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {@Overridepublic boolean onNavigationItemSelected(@NonNull MenuItem item) {FragmentManager manager=getSupportFragmentManager();FragmentTransaction transaction=manager.beginTransaction();switch (item.getItemId()){case R.id.bottom1:transaction.hide(list.get(1));transaction.hide(list.get(2));transaction.hide(list.get(3));transaction.hide(list.get(4));transaction.show(list.get(0));transaction.commit();return true;case R.id.bottom2:transaction.hide(list.get(0));transaction.hide(list.get(2));transaction.hide(list.get(3));transaction.hide(list.get(4));transaction.show(list.get(1));transaction.commit();return true;case R.id.bottom3:transaction.hide(list.get(1));transaction.hide(list.get(0));transaction.hide(list.get(3));transaction.hide(list.get(4));transaction.show(list.get(2));transaction.commit();return true;case R.id.bottom4:transaction.hide(list.get(1));transaction.hide(list.get(2));transaction.hide(list.get(0));transaction.hide(list.get(4));transaction.show(list.get(3));transaction.commit();return true;case R.id.bottom5:transaction.hide(list.get(1));transaction.hide(list.get(2));transaction.hide(list.get(3));transaction.hide(list.get(0));transaction.show(list.get(4));transaction.commit();return true;}return false;}});}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {//初始化searchgetMenuInflater().inflate(R.menu.menu_main,menu);//获取搜索框菜单栏MenuItem menuItem=menu.findItem(R.id.search);//获取SearchView对象SearchView searchView= (SearchView) menuItem.getActionView();//设置搜索栏默认提示searchView.setQueryHint("请输入商品名");//默认搜索栏为展开状态searchView.setIconified(false);//设置搜索监听器searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {//输入搜索内容后提交时触发@Overridepublic boolean onQueryTextSubmit(String query) {Toast.makeText(MainActivity.this, "您输入的内容"+query, Toast.LENGTH_SHORT).show();return false;}//输入内容改变时触发@Overridepublic boolean onQueryTextChange(String newText) {return false;}});return true;}
}
5、底部栏图片
Android 标题栏及导航栏设计与实现相关推荐
- Android开发——底部导航栏设计
底部导航栏设计 1.依赖配置 2.tabbar的UI实现 3.tabbar的逻辑绑定 4.tabbar的滑动与点击联动 5.tabbar与文本输入的冲突解决方案 其实,常见的Android和微 ...
- Android状态栏和导航栏透明和沉浸式模式
最近在App上需要对状态栏进行相关的设置,在网上看了些文章,像郭神的沉浸式那篇博客对我启发蛮大,但是对状态栏的设置,包括隐藏,透明,颜色设置等,并没有比较系统的概念,实现方式不止一种,有操作Windo ...
- 状态栏、标题栏、导航栏的了解
状态栏:是指手机左上最顶上,显示中国移动.安全卫士.电量.网速等等,在手机的顶部.下拉就会出现通知栏. 标题栏:是指一个APP程序最上部的titleBar,从名字就知道它显然就是一个应用程序一个页面的 ...
- 微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）
设置标题栏 标题栏window 在app.json文件里面,通过window对象里面的属性进行设置 示例: app.json: 运行: 设置导航栏 导航栏TabBar 如果我们的小程序是一个多 tab ...
- android MIPI屏 导航栏丢失
/***************************************************************************** android MIPI屏 导航栏丢失* ...
- html 导航栏设计,在网页中设计导航菜单的三个原则（附案例）
导航菜单可能是网页设计中最重要的部分了.每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息.好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息. 而且导航 ...
- 2019年最实用的导航栏设计实践和案例分析全解
我们都知道,用户的浏览习惯是从左到右,从上到下.所以一个网站的导航栏至关重要,用户进入你的网站,首先查找的信息就是从导航栏开始.一个用户体验好的导航栏,会增加网站的转化率和回访率.反之,用户会离开你的 ...
- 9.后台管理系统主页面布局以及左侧导航栏设计
9.后台管理系统主页面布局以及左侧导航栏设计 1.首页布局 步骤: 在views目录下新建Main.vue文件,作为登录之后的布局 参考:element-ui 使用此模块的目的是,当中间内容部分有超出 ...
- Android隐藏导航栏按键,Android如何控制导航栏单个按键的显隐状态
我们都知道Android系统的导航栏通常有三个按键,分别是BACK, HOME, APP_SWITCH. 网上很多有关导航栏和状态栏显隐的文章,但几乎都是控制导航栏或状态栏所有按键同时显示或消失,如果 ...
最新文章
- 信不信？以面向对象的思想是可以写好高并发程序的！
- 线上环境HBASE-1.2.0出现oldWALs无法自动回收情况；
- SQL Server 获取所有表和数据的批量操作
- Vue-Treeselect 的下拉菜单不出Table的框
- P1217 [USACO1.5]回文质数 Prime Palindromes（技巧+暴力枚举+线性筛）
- 【编译制导指令】#pragma pack - 字节数基准对齐
- MIT自适应律MRAC的理解和MATLAB实现
- 在RedHat Linux系统中安装和配置snmp服务
- IOC容器-Autofac在MVC中实现json方式注入使用
- Demo源码放送：打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！
- php跨域有那些方法,PHP跨域访问的3种方法
- Javassist简介
- 2021 最新 android studio 阿里 maven 仓库地址 Using insecure protocols with repositories, without explicit op
- 山景BP1048使用记录
- 【Centos】Docker停止容器服务后，磁盘I/O仍然迟迟不下降。(未解决)
- 互联网晚报 | 9月6日 星期一 | 北京证券交易所完成工商注册；“武汉云”正式启用；中国连续5届残奥会金牌榜、奖牌榜双第一...
- NLP-D9-第一场大数据比赛D1知识蒸馏翻译论文CATTI备考-第一套综合
- 百度之星astar-413-problem1
- [python作业]给定字符串“site sea suede sweet see kase sse ssee loses“，匹配出所有s开头，e结尾的单词。
- 也仿薄荷健康的刻度尺效果（一）