文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-09-25 22:35

关注

文章目录

整体演示

请添加图片描述

一、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
<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、将控件加入布局
<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);                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、底部栏图片

请添加图片描述

请添加图片描述
请添加图片描述

请添加图片描述
请添加图片描述

来源地址:https://blog.csdn.net/qq_52108058/article/details/127794966

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯