阅读量:2
前言：本期教学如何制作底部导航栏以及使用Fragment实现页面切换的完整功能，本篇提供所有源代码，均测试无误，大家可以放心使用。
目录
2.2、message.xml、book.xml和mine.xml
2.4、MessageFragment、BookFragment和MineFragment
一、功能演示
点击下方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切换
