草庐IT

Android 标题栏及导航栏设计与实现

微笑伴你而行 2023-08-11 原文

文章目录

整体演示

一、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

    <application
        android: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.Toolbar
        android: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;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化toolbar
        toolbar();
    }
    @SuppressLint("ResourceAsColor")
    public void toolbar(){
        toolbar=findViewById(R.id.toolbar);
        //标题
        toolbar.setTitle("LuFei");
        //子标题
        toolbar.setSubtitle("儿子");
        //logo
        toolbar.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() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                //拿到了item对象，我们有id
                switch (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;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化toolbar
        toolbar();
    }
    @SuppressLint("ResourceAsColor")
    public void toolbar(){
        toolbar=findViewById(R.id.toolbar);
        //标题
        toolbar.setTitle("LuFei");
        //子标题
        toolbar.setSubtitle("儿子");
        //logo
        toolbar.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() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                //拿到了item对象，我们有id
                switch (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;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //初始化search
        getMenuInflater().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() {
            //输入搜索内容后提交时触发
            @Override
            public boolean onQueryTextSubmit(String query) {
                Toast.makeText(MainActivity.this, "您输入的内容"+query, Toast.LENGTH_SHORT).show();
                return false;
            }
            //输入内容改变时触发
            @Override
            public 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.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </androidx.appcompat.widget.Toolbar>

    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android: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

  1. 在MainActivity中实现点击菜单栏fragment切换
  2. 创建Fragment对象，并将其添加到FragmentLayout中
  3. 添加点击事件，根据点击的菜单项实现对应的Fragment
public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private List<Fragment> list=new ArrayList<>();
    private BottomNavigationView bottomNavigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化toolbar
        toolbar();
        //初始化底部导航
        initBottomNavigation();
    }
    @SuppressLint("ResourceAsColor")
    public void toolbar(){
        toolbar=findViewById(R.id.toolbar);
        //标题
        toolbar.setTitle("LuFei");
        //子标题
        toolbar.setSubtitle("儿子");
        //logo
        toolbar.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() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                //拿到了item对象，我们有id
                switch (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();
        //进入主页面时显示学习页面，隐藏其他fragment
        transaction.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() {
            @Override
            public 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;
            }
        });
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        //初始化search
        getMenuInflater().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() {
            //输入搜索内容后提交时触发
            @Override
            public boolean onQueryTextSubmit(String query) {
                Toast.makeText(MainActivity.this, "您输入的内容"+query, Toast.LENGTH_SHORT).show();
                return false;
            }
            //输入内容改变时触发
            @Override
            public boolean onQueryTextChange(String newText) {
                return false;
            }
        });
        return true;
    }
}

5、底部栏图片



Android标题栏spanclasstokenjavaandroid studio

有关Android 标题栏及导航栏设计与实现的更多相关文章

  1. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  2. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  3. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  4. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  5. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  6. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  7. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  8. MIMO-OFDM无线通信技术及MATLAB实现（1）无线信道：传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO

  9. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  10. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作，这种方式比较简单，也比较容易理解。本文为大家介绍另一种不使用递归的方式，由于没有使用递归，只用到了循环和集合，所以效率更高一些！一、使用递归遍历文件夹整体思路1、使用File封装初始目录，2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组，取出每个File对象4-1、如果File是否是一个文件，打印4-2、否则就是一个目录，递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

随机推荐