前言：本期教学如何制作底部导航栏以及使用Fragment实现页面切换的完整功能，本篇提供所有源代码，均测试无误，大家可以放心使用。
目录
一、功能演示
二、代码实现
2.1、bottom.xml
2.2、message.xml、book.xml和mine.xml
2.3、activity_main.xml
2.4、MessageFragment、BookFragment和MineFragment
2.5、MainActivity
三、Gitee源码
一、功能演示
点击下方Tab栏目可以切换到对应的页面。
消息页面：
通讯录页面：
我的页面：
二、代码实现
先给前端代码，大家按顺序参考就行。
2.1、bottom.xml
先写底部的布局，这里面的图标可以自己网上随便找。
完整代码：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#ECECEC"
>
<LinearLayout
android:id="@+id/messageLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/messageImageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:src="@drawable/message"
app:tint="#FFFFFF" />
<TextView
android:id="@+id/messageTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="消息"
android:textColor="@color/white"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/bookLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/bookImageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:src="@drawable/book"
app:tint="#FFFFFF" />
<TextView
android:id="@+id/bookTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="通讯录"
android:textColor="@color/white"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:id="@+id/mineLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/mineImageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="15dp"
android:src="@drawable/mine"
app:tint="#FFFFFF" />
<TextView
android:id="@+id/mineTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="我的"
android:textColor="@color/white"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>预览：
2.2、message.xml、book.xml和mine.xml
这三个xml分别对应三个栏目所切换的页面，这边只贴出一个，其他两个复制一下，改一下xml文件名就行了。
完整代码：
<?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:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="消息"
android:textSize="54sp" />
</LinearLayout>2.3、activity_main.xml
写一个FrameLayout用于动态显示页面，底部把之前写好的bottom.xml引入进来。
完整代码：
<?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:orientation="vertical">
<FrameLayout
android:id="@+id/frame_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include
layout="@layout/bottom"
android:gravity="bottom" />
</LinearLayout>下面展示后端java代码。
2.4、MessageFragment、BookFragment和MineFragment
同样的我也是只给出一个完整代码，其他正常复制一下就行。
完整代码：
package com.example.tab;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
public class MessageFragment extends Fragment {
public MessageFragment() {
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.message, container, false);
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
//页面初始化点击事件
}
}
注： return inflater.inflate(R.layout.message, container, false);这边的R.layout.***复制的时候需要自己手动修改一下。
2.5、MainActivity
这个实体类主要就是实现点击切换的功能了。
完整代码：
package com.example.tab;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import com.example.tab.BookFragment;
import com.example.tab.MessageFragment;
import com.example.tab.MineFragment;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private final Fragment messageFragment = new MessageFragment();
private final Fragment bookFragment = new BookFragment();
private final Fragment mineFragment = new MineFragment();
private FragmentManager fragmentManager;
private LinearLayout messageLayout,bookLayout,mineLayout;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
messageLayout = findViewById(R.id.messageLayout);
bookLayout = findViewById(R.id.bookLayout);
mineLayout = findViewById(R.id.mineLayout);
messageLayout.setOnClickListener(this);
bookLayout.setOnClickListener(this);
mineLayout.setOnClickListener(this);
initFragment();
}
private void initFragment(){
fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction=fragmentManager.beginTransaction();
messageLayout.setBackgroundColor(Color.parseColor("#C1C1C1"));
bookLayout.setBackgroundColor(Color.parseColor("#C1C1C1"));
mineLayout.setBackgroundColor(Color.parseColor("#C1C1C1"));
transaction.add(R.id.frame_content,messageFragment);
transaction.add(R.id.frame_content,bookFragment);
transaction.add(R.id.frame_content,mineFragment);
transaction.hide(bookFragment);
transaction.hide(mineFragment);
transaction.commit();
}
private void background(View v) {
switch (v.getId()) {
case R.id.messageLayout:
messageLayout.setBackgroundColor(Color.parseColor("#007FFF"));
break;
case R.id.bookLayout:
bookLayout.setBackgroundColor(Color.parseColor("#007FFF"));
break;
case R.id.mineLayout:
mineLayout.setBackgroundColor(Color.parseColor("#007FFF"));
break;
default:
break;
}
}
private void backgroundReturn(View v) {
switch (v.getId()) {
case R.id.messageLayout:
messageLayout.setBackgroundColor(Color.parseColor("#C1C1C1"));
break;
case R.id.bookLayout:
bookLayout.setBackgroundColor(Color.parseColor("#C1C1C1"));
break;
case R.id.mineLayout:
mineLayout.setBackgroundColor(Color.parseColor("#C1C1C1"));
break;
default:
break;
}
}
private void hideFragment(FragmentTransaction transaction){
transaction.hide(messageFragment);
transaction.hide(bookFragment);
transaction.hide(mineFragment);
}
private void showFragment(int i) {
FragmentTransaction transaction=fragmentManager.beginTransaction();
hideFragment(transaction);
switch (i){
case 0:
transaction.show(messageFragment);
background(messageLayout);
backgroundReturn(bookLayout);
backgroundReturn(mineLayout);
break;
case 1:
transaction.show(bookFragment);
background(bookLayout);
backgroundReturn(messageLayout);
backgroundReturn(mineLayout);
break;
case 2:
transaction.show(mineFragment);
background(mineLayout);
backgroundReturn(messageLayout);
backgroundReturn(bookLayout);
break;
default:
break;
}
transaction.commit();
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.messageLayout:
showFragment(0);
break;
case R.id.bookLayout:
showFragment(1);
break;
case R.id.mineLayout:
showFragment(2);
break;
default:
break;
}
}
}
大功告成.
三、Gitee源码
想要源代码的自行下载，博主免费提供： Android Studio实现底部导航栏Tab切换
![uniapp编译成h5后接口请求参数变成[object object]](https://i-blog.csdnimg.cn/direct/97d7368c1535442aa832c85910f919ae.png)
![【web]-f12-iphone6](https://i-blog.csdnimg.cn/direct/053002fd6c7244ca9875bf86bf0945dc.png)
