登录
当前位置： 首页 > 编程笔记 >

Android底部菜单栏实现的实例代码

越姚石
2023-03-14
本文向大家介绍Android底部菜单栏实现的实例代码，包括了Android底部菜单栏实现的实例代码的使用技巧和注意事项，需要的朋友参考一下

 Android 使用RadioGroup 实现底部导航菜单栏。

一、主界面布局的实现：

先来张效果图：


介绍一下总体界面包括的内容：底部五个导航按钮，主界面包括一个FrameLayout用来放五个Fragment。点击底部按钮会对应跳转到指定的界面。

实现布局：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.garvey.activitys.MainActivity">

 <FrameLayout
 android:id="@+id/id_fragment_content"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_above="@+id/id_diverline"></FrameLayout>

 <View
 android:id="@+id/id_diverline"
 android:layout_above="@+id/id_bottom_tags"
 android:layout_width="match_parent"
 android:layout_height="0.1dp"
 android:background="#C2C5CE"/>
 <LinearLayout
 android:id="@+id/id_bottom_tags"
 android:layout_width="match_parent"
 android:layout_height="55dp"
 android:layout_alignParentBottom="true"
 android:background="@drawable/bt_tag_bg"
 android:orientation="horizontal">

 <RadioGroup
 android:id="@+id/id_navcontent"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_gravity="center"
 android:background="@color/transparent"
 android:gravity="center"
 android:orientation="horizontal">

 <RadioButton
 android:id="@+id/id_nav_btshouye"
 android:layout_width="0dp"
 android:checked="true"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_weight="1"
 android:background="@color/transparent"
 android:button="@null"
 android:clickable="true"
 android:drawablePadding="2dp"
 android:drawableTop="@drawable/x_nav_menu_sy"
 android:gravity="center"
 android:onClick="switchView"
 android:text="首页"
 android:textColor="@drawable/x_nav_menu_color"
 android:textSize="10sp" />

 <RadioButton
 android:id="@+id/id_nav_btgouwu"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_weight="1"
 android:background="@color/transparent"
 android:button="@null"
 android:clickable="true"
 android:drawablePadding="2dp"
 android:drawableTop="@drawable/x_nav_menu_gw"
 android:gravity="center"
 android:onClick="switchView"
 android:text="购物"
 android:textColor="@drawable/x_nav_menu_color"
 android:textSize="10sp" />

 <RadioButton
 android:id="@+id/id_nav_btfengshang"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_weight="1"
 android:background="@color/transparent"
 android:button="@null"
 android:clickable="true"
 android:drawablePadding="2dp"
 android:drawableTop="@drawable/x_nav_menu_fs"
 android:gravity="center"
 android:onClick="switchView"
 android:text="风尚"
 android:textColor="@drawable/x_nav_menu_color"
 android:textSize="10sp" />

 <RadioButton
 android:id="@+id/id_nav_btshequ"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_weight="1"
 android:background="@color/transparent"
 android:button="@null"
 android:clickable="true"
 android:drawablePadding="2dp"
 android:drawableTop="@drawable/x_nav_menu_sq"
 android:gravity="center"
 android:onClick="switchView"
 android:text="社区"
 android:textColor="@drawable/x_nav_menu_color"
 android:textSize="10sp" />

 <RadioButton
 android:id="@+id/id_nav_btwode"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_weight="1"
 android:background="@color/transparent"
 android:button="@null"
 android:clickable="true"
 android:drawablePadding="2dp"
 android:drawableTop="@drawable/x_nav_menu_wd"
 android:gravity="center"
 android:onClick="switchView"
 android:text="我的"
 android:textColor="@drawable/x_nav_menu_color"
 android:textSize="10sp" />
 </RadioGroup>
 </LinearLayout>
</RelativeLayout>

编写selector 用来设置点击后的背景变化：

x_nav_menu_fs.xml，x_nav_menu_gw.xml，x_nav_menu_sq.xml，x_nav_menu_sy.xml，x_nav_menu_wd.xml

例如x_nav_menu_sy.xml文件的书写为：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@mipmap/tabitem_0" android:state_checked="true"></item>
 <item android:drawable="@mipmap/tabitem0"></item>
</selector>

编写文字点击后颜色的变化drawable:x_nav_menu_color.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

 <item android:color="#CF75E9" android:state_checked="true"></item>
 <item android:color="#989898"></item>

</selector>

编写底部菜单栏背景的drawablebt_tag_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <solid android:color="#FFFFFF" />
</shape>

按照上述方式的就完成了底部菜单栏的布局方式，同时在布局的时候我们为每个RadioButton设置了点击监听器，监听方法是：switchView(View view)。

二、布局的代码实现

创建五个fragment,分别对应每个按钮的界面，Fragment的代码非常简单，例如下面一个Fragment：

package com.garvey.modules;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.garvey.babyshop.R;
/**
 * 作者： Garvey on 2016/6/13.
 * 邮箱： lianjiawei18@163.com
 */
public class ShouYeFragment extends Fragment{
 // 缓存Fragment view
 private View rootView;
 private static ShouYeFragment shouYeFragment;
 public ShouYeFragment(){}
 public static ShouYeFragment getNewInstance(){
 if (shouYeFragment ==null){
 shouYeFragment =new ShouYeFragment();
 }
 return shouYeFragment;
 }
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 }
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
 if (rootView == null) {
 rootView = inflater.inflate(R.layout.fragment_shouye, container, false);
 }
 // 缓存的rootView需要判断是否已经被加过parent，
 // 如果有parent需要从parent删除，要不然会发生这个rootview已经有parent的错误。
 ViewGroup parent = (ViewGroup) rootView.getParent();
 if (parent != null) {
 parent.removeView(rootView);
 }
 return rootView;
 }
 @Override
 public void onResume() {
 super.onResume();
 }
}

然后编写MainActivity的代码，首先确立界面对应的索引：

 public static final int VIEW_SHOUYE_INDEX = 0;
 public static final int VIEW_GOUWU_INDEX = 1;
 public static final int VIEW_FENGSHANG_INDEX = 2;
 public static final int VIEW_SHEQU_INDEX = 3;
 public static final int VIEW_WODE_INDEX = 4;
 private int temp_position_index = -1;

然后书写对应的switchView(View view )方法来实现对应的界面切换：

public void switchView(View view) {
 switch (view.getId()) {
 case R.id.id_nav_btshouye:
 if (temp_position_index != VIEW_SHOUYE_INDEX) {
  //显示
  mTransaction = getSupportFragmentManager().beginTransaction();
  mTransaction.replace(R.id.id_fragment_content, syFragemnt);
  mTransaction.commit();
 }
 temp_position_index = VIEW_SHOUYE_INDEX;
 break;
 case R.id.id_nav_btgouwu:
 if (temp_position_index != VIEW_GOUWU_INDEX) {
  //显示
  mTransaction = getSupportFragmentManager().beginTransaction();
  mTransaction.replace(R.id.id_fragment_content, gwFragment);
  mTransaction.commit();
 }
 temp_position_index = VIEW_GOUWU_INDEX;
 break;
 case R.id.id_nav_btfengshang:
 if (temp_position_index != VIEW_FENGSHANG_INDEX) {
  //显示
  mTransaction = getSupportFragmentManager().beginTransaction();
  mTransaction.replace(R.id.id_fragment_content, fsFragment);
  mTransaction.commit();
 }
 temp_position_index = VIEW_FENGSHANG_INDEX;
 break;
 case R.id.id_nav_btshequ:
 if (temp_position_index != VIEW_SHEQU_INDEX) {
  //显示
  mTransaction = getSupportFragmentManager().beginTransaction();
  mTransaction.replace(R.id.id_fragment_content, sqFragment);
  mTransaction.commit();
 }
 temp_position_index = VIEW_SHEQU_INDEX;
 break;
 case R.id.id_nav_btwode:
 if (temp_position_index != VIEW_WODE_INDEX) {
  //显示
  mTransaction = getSupportFragmentManager().beginTransaction();
  mTransaction.replace(R.id.id_fragment_content, wdFragment);
  mTransaction.commit();
 }
 temp_position_index = VIEW_WODE_INDEX;
 break;
 }
 }

MainActivity的总代码如下：

package com.garvey.activitys;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.RadioGroup;
import com.garvey.babyshop.R;
import com.garvey.modules.FengShangFragment;
import com.garvey.modules.GouWuFragment;
import com.garvey.modules.SheQuFragment;
import com.garvey.modules.ShouYeFragment;
import com.garvey.modules.WoDeFragment;
public class MainActivity extends AppCompatActivity {
 /**
 * 底部导航栏的widdget
 */
 private RadioGroup mNavGroup;
 private FragmentTransaction mTransaction;
 /**
 * 五个Fragments
 */
 Fragment syFragemnt, gwFragment, fsFragment, sqFragment, wdFragment;
 public static final int VIEW_SHOUYE_INDEX = 0;
 public static final int VIEW_GOUWU_INDEX = 1;
 public static final int VIEW_FENGSHANG_INDEX = 2;
 public static final int VIEW_SHEQU_INDEX = 3;
 public static final int VIEW_WODE_INDEX = 4;
 private int temp_position_index = -1;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 initView();
 }

 private void initView() {
 mNavGroup = (RadioGroup) findViewById(R.id.id_navcontent);
 syFragemnt = ShouYeFragment.getNewInstance();
 gwFragment = GouWuFragment.getNewInstance();
 fsFragment = FengShangFragment.getNewInstance();
 sqFragment = SheQuFragment.getNewInstance();
 wdFragment = WoDeFragment.getNewInstance();
 //显示
 mTransaction = getSupportFragmentManager().beginTransaction();
 mTransaction.replace(R.id.id_fragment_content, syFragemnt);
 mTransaction.commit();
 }
 public void switchView(View view) {
 switch (view.getId()) {
 case R.id.id_nav_btshouye:
 if (temp_position_index != VIEW_SHOUYE_INDEX) {
  //显示
  mTransaction = getSupportFragmentManager().beginTransaction();
  mTransaction.replace(R.id.id_fragment_content, syFragemnt);
  mTransaction.commit();
 }
 temp_position_index = VIEW_SHOUYE_INDEX;
 break;
 case R.id.id_nav_btgouwu:
 if (temp_position_index != VIEW_GOUWU_INDEX) {
  //显示
  mTransaction = getSupportFragmentManager().beginTransaction();
  mTransaction.replace(R.id.id_fragment_content, gwFragment);
  mTransaction.commit();
 }
 temp_position_index = VIEW_GOUWU_INDEX;
 break;
 case R.id.id_nav_btfengshang:
 if (temp_position_index != VIEW_FENGSHANG_INDEX) {
  //显示
  mTransaction = getSupportFragmentManager().beginTransaction();
  mTransaction.replace(R.id.id_fragment_content, fsFragment);
  mTransaction.commit();
 }
 temp_position_index = VIEW_FENGSHANG_INDEX;
 break;
 case R.id.id_nav_btshequ:
 if (temp_position_index != VIEW_SHEQU_INDEX) {
  //显示
  mTransaction = getSupportFragmentManager().beginTransaction();
  mTransaction.replace(R.id.id_fragment_content, sqFragment);
  mTransaction.commit();
 }
 temp_position_index = VIEW_SHEQU_INDEX;
 break;
 case R.id.id_nav_btwode:
 if (temp_position_index != VIEW_WODE_INDEX) {
  //显示
  mTransaction = getSupportFragmentManager().beginTransaction();
  mTransaction.replace(R.id.id_fragment_content, wdFragment);
  mTransaction.commit();
 }
 temp_position_index = VIEW_WODE_INDEX;
 break;
 }
 }
}

源码下载

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对小牛知识库的支持。

 类似资料：
  • android SectorMenuView底部导航扇形菜单的实现代码

    本文向大家介绍android SectorMenuView底部导航扇形菜单的实现代码，包括了android SectorMenuView底部导航扇形菜单的实现代码的使用技巧和注意事项，需要的朋友参考一下 这次分析一个扇形菜单展开的自定义View, 也是我实习期间做的一个印象比较深刻的自定义View, 前后切换了很多种实现思路, 先看看效果展示 效果展示 效果分析 点击圆形的FloatActionB

  • Android如何实现底部菜单固定到底部

    本文向大家介绍Android如何实现底部菜单固定到底部，包括了Android如何实现底部菜单固定到底部的使用技巧和注意事项，需要的朋友参考一下 今天搞了很久的一个问题，导航菜单没有固定到底部，因为上面是ListView，可是没内容，于是就浮动上去了。 效果如下： 这里采用的是一个碎片，代码是： 出问题了，百度了很多，试了很多的办法，没用。 主页面代码： 最后发现是这段代码惹的麻烦：android:

  • Android 动态菜单实现实例代码

    本文向大家介绍Android 动态菜单实现实例代码，包括了Android 动态菜单实现实例代码的使用技巧和注意事项，需要的朋友参考一下 Android 动态菜单 先上效果图 比较简单，主要就是属性动画的使用和坐标角度的小细节。 实现 实现效果： 图标按照路径一路缩放渐变过来即可。 核心代码 item开启动画和关闭动画为一个逆过程，体现在x，y距离变化上。 x，y的距离开启时距离逐渐增长 这里要注意

  • android实现底部导航栏

    本文向大家介绍android实现底部导航栏，包括了android实现底部导航栏的使用技巧和注意事项，需要的朋友参考一下 底部导航栏我选择用FragmentTabHost+Fragment来实现，这个方法比较好用，代码量也不多 首先是开始的activity_main.xml 也可以直接在xml文件里面写 这xml文件就一个view加一个tab  view用来显示碎片，tab用来放置底部按钮的数量 再

  • 底部菜单栏与子菜单

    我使用BottomNavigationViewEx库在我的android应用程序中显示底部菜单栏，该库运行良好并修复了标准BottomNavigationView的许多缺点。 问题是，根据要求，我需要在菜单中显示7个选项，其中4个选项是对各自功能的直接访问，还有一个“更多”选项，该选项应该显示一个包含3个以上选项的子菜单（类似于一个工具栏，其中包含属性为showAsAction=“never”的项

  • Flutter实现底部菜单导航

    本文向大家介绍Flutter实现底部菜单导航，包括了Flutter实现底部菜单导航的使用技巧和注意事项，需要的朋友参考一下 简介 现在我们的 APP 上面都会在屏幕下方有一排的按钮，点击不同的按钮可以进入不同的界面。就是说在界面的底部会有一排的按钮导航。可看下面的图示。 完成图示 程序工程目录 梳理下实现步骤 我们需要实现这个底部菜单导航，就需要有底部菜单的那一排图标按钮。图标按钮是固定在一个工具

相关阅读

Flutter实现底部菜单导航Android底部菜单栏（RadioGroup+Fragment）美化Android实现底部导航栏功能jQuery实现下拉菜单的实例代码Android实现360手机助手底部的动画菜单

相关文章

Java实例内部类XML 现实案例实战-Swing实现简单爬虫PHP 完整表单实例5.2.5 Fragment实例精讲——新闻(购物)类App列表Fragment的简单实现

相关问答

带阴影的Android底部导航栏Android新底部导航栏或BottomNavigationViewSwift中单例实现的替代方案？android更改底部栏中的默认项spring bean的单例实现

相关工具

最简单代码实现九宫格md5和sha加密代码实现简单的广告栏滚动菜单四格菜单

相关文档

Git 菜单Android 实战技巧基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现如何实现自己的 jQueryRedis 设计与实现
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.