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

整体演示

请添加图片描述

一、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、底部栏图片

请添加图片描述

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

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

  • 11
    点赞
  • 92
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
Android标题栏是指在应用程序顶部显示的包含应用程序名称、操作按钮和其他功能的栏。如果我们不需要标题栏,可以通过两种方法来去除。第一种方法是在代码中实现,可以通过在Activity的onCreate方法中调用requestWindowFeature(Window.FEATURE_NO_TITLE)来去除标题栏。第二种方法是在AndroidManifest.xml配置文件中实现,可以在注册Activity时添加android:theme="@android:style/Theme.NoTitleBar"来去除标题栏。\[1\]\[2\] 另外,如果只需要在单个页面隐藏ActionBar,可以在AndroidManifest.xml中的application标签中添加android:theme="@style/Theme.AppCompat.Light.NoActionBar"来隐藏ActionBar。同时,在页面布局中添加ToolBar来替代ActionBar,可以在LinearLayout中添加androidx.appcompat.widget.Toolbar来实现。在MainActivity.java中,可以设置ToolBar的属性来自定义标题栏的样式和功能。\[3\] #### 引用[.reference_title] - *1* *2* [Android去掉标题栏方法](https://blog.csdn.net/qq_41953685/article/details/103148994)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Android 标题栏导航栏设计实现](https://blog.csdn.net/qq_52108058/article/details/127794966)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微笑伴你而行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值