AndroidStudio制作底部导航栏以及用Fragment实现切换功能

超、凢脫俗 2021-09-15 04:56 409阅读 0赞

# 前言 #

大家好，我是 `Vic`，今天给大家带来`AndroidStudio制作底部导航栏以及用Fragment实现切换功能`的概述，希望你们喜欢

## 学习目标 ##

AndroidStudio制作底部导航栏以及用Fragment实现切换功能，用户点击底部导航栏可以实现三个模块的跳转。

## 图片资源 ##

需要底部导航栏三个点击按钮的图片资源  
main\_button\_1.png,main\_button\_2.png,main\_button\_3.png

以及点击变换的图片资源  
main\_button\_1\_selected.png,main\_button\_2\_selected.png,main\_button\_3\_selected.png

以上图片资源都放进drawable文件夹中

## activity\_main 布局 ##

在 MainActivity 页面中主要有两个区域：

*  一个是放 Fragment 的 main\_body
 *  一个是放底部导航栏的 main\_bottom\_bar

主要的Fragment代码块：

主要的底部导航栏的代码块：

<LinearLayout android:id="@+id/main_bottom_bar" android:layout_alignParentBottom="true" android:background="#F2F2F2" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="55dp">
        <RelativeLayout android:layout_weight="1" android:id="@+id/bottom_bar_1_btn" android:layout_width="0dp" android:layout_height="match_parent">
             <TextView android:id="@+id/bottom_bar_text_1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="3dp" android:gravity="center" android:singleLine="true" android:text="button_1" android:textColor="#666666" android:textSize="14sp"/>
             <ImageView android:layout_width="27dp" android:layout_height="27dp" android:layout_above="@+id/bottom_bar_text_1" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="3dp" android:id="@+id/bottom_bar_image_1" android:src="@drawable/main_button_1"/>
         </RelativeLayout>
        ....
    </LinearLayout>

## 实例化控件 ##

实例化控件一些琐碎的代码：

//先实例化控件，那我给出自己打的实例化代码 //来自main_title_bar.xml private TextView tv_main_title;//标题 private TextView tv_back;//返回按钮 private RelativeLayout title_bar; //来自activity_main.xml private RelativeLayout main_body; private TextView bottom_bar_text_1; private ImageView bottom_bar_image_1; ... private LinearLayout main_bottom_bar; private RelativeLayout bottom_bar_1_btn; private RelativeLayout ...;

然后

initView(); //实例化 private void initView(){ //标题显示 tv_back=findViewById(R.id.tv_back); tv_main_title=findViewById(R.id.tv_main_title); title_bar=findViewById(R.id.title_bar); //底部导航栏 main_body=findViewById(R.id.main_body); bottom_bar_text_1=findViewById(R.id.bottom_bar_text_1); bottom_bar_image_1=findViewById(R.id.bottom_bar_image_1); ... //包含底部 android:id="@+id/main_bottom_bar" main_bottom_bar=findViewById(R.id.main_bottom_bar); //private RelativeLayout bottom_bar_1_btn; bottom_bar_1_btn=findViewById(R.id.bottom_bar_1_btn); //添加点击事件 bottom_bar_1_btn.setOnClickListener(this); ... //技巧 //tv_back.setVisibility(View.GONE); tv_main_title.setText("课程"); title_bar.setBackgroundColor(Color.parseColor("#30B4FF")); }

## 底部导航栏状态的切换方法 ##

给MainActivity加一个setSelectStatus() 方法，方法里用参数index来判断当前选的按钮

示例代码

private void setSelectStatus(int index) { switch (index){ case 0: //图片点击选择变换图片，颜色的改变，其他变为原来的颜色，并保持原有的图片 bottom_bar_image_1.setImageResource(R.drawable.main_button_1_selected); bottom_bar_text_1.setTextColor(Color.parseColor("#0097F7")); //其他的文本颜色不变 bottom_bar_text_2.setTextColor(Color.parseColor("#666666")); bottom_bar_text_3.setTextColor(Color.parseColor("#666666")); //图片也不变 bottom_bar_image_2.setImageResource(R.drawable.main_button_2); bottom_bar_image_3.setImageResource(R.drawable.main_button_3); break; case 1://同理如上 ... break; case 2://同理如上 ... break; } }

## 实现底部导航栏的响应 ##

导航栏文本颜色和图片切换效果的方法写好了，接下来是点击响应的方法

给MainActivity加上View.OnClickListener接口

在生成的 onClick() 方法中加上导航栏区域的响应

@Override public void onClick(View v) { switch (v.getId()){ case R.id.bottom_bar_1_btn: setSelectStatus(0); break; case R.id.bottom_bar_2_btn: setSelectStatus(1); break; case R.id.bottom_bar_3_btn: setSelectStatus(2); break; } }

别忘了在initView() 中添加监听器

bottom_bar_1_btn.setOnClickListener(this);

## 三个 fragment 的创建 ##

就是简单的创建三个布局，展现Fragment\_1/2/3 即可

示例代码块

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white">
        <TextView android:text="Fragment_1" android:textColor="@android:color/black" android:textSize="50sp" android:layout_width="wrap_content" android:layout_height="wrap_content" />
    </LinearLayout>

然后通过我之前写的插件自动生成三个Fragemnt ，就可以了不用管生成的Fragement\_1/2/3.java文件了，  
插件文章  
《 [Android开发的插件Code Generator与LayoutCreator的安装与使用，提升你的开发效率][Android_Code Generator_LayoutCreator] 》

## 三个fragment的显示和切换 ##

在MainActivity里把AppCompatActivity改为FragmentActivity

把Fragment加到Activity里的代码  
通常用这个来展示，但是代码过长，我们来简化一下

/* * FragmentManager manager = getSupportFragmentManager(); * FragmentTransaction transaction = manager.beginTransaction(); * transaction.add(R.id.main_body,new CourseFragment()).commit(); * */

我们先来添加一个setMain() 方法，来显示打开界面时，显示的初始页面

/用于打开初始页面 private void setMain() { //getSupportFragmentManager() -> beginTransaction() -> add -> (R.id.main_boy,显示课程 new CourseFragment() this.getSupportFragmentManager().beginTransaction().add(R.id.main_body,new CourseFragment()).commit(); }

上面的代码中可以看到相对来说比较少，那我们就用这个，然后我们来实现点击底部导航栏来切换响应的fragment,我们在onClick()中添加即可。

case R.id.bottom_bar_1_btn: //添加 getSupportFragmentManager().beginTransaction().replace(R.id.main_body,new Button_1Fragment()).commit(); setSelectStatus(0); break;

如果觉得不错，那就点个赞吧！❤️

## 总结 ##

*  本文讲了AndroidStudio制作底部导航栏以及用Fragment实现切换功能，界面的布局介绍，如果您还有更好地理解，欢迎沟通
 *  定位：分享 `Android`&`Java`知识点，有兴趣可以继续关注

[Android_Code Generator_LayoutCreator]: https://www.jianshu.com/p/9d2bf0513443