Android底部导航栏实现，flutter项目结构

最新推荐文章于 2025-03-04 10:23:32 发布

wa32saa

最新推荐文章于 2025-03-04 10:23:32 发布

阅读量273

点赞数

分类专栏：程序员文章标签：架构移动开发 android

本文链接：https://blog.youkuaiyun.com/wa32saa/article/details/122776372

版权

这篇博客详细介绍了如何在Android应用中实现底部导航栏，包括四个Fragment页面的创建和切换。通过设置布局文件、风格文件以及适配器，实现了底部导航栏的功能。每个Fragment页面有自己的点击事件，并展示了如何在页面之间切换时改变按钮颜色。同时，文章提到了使用ViewPager和FragmentPagerAdapter的优缺点，提供了使用这两种方式实现底部导航栏的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

}

if (mFrag3 != null) {

transaction.hide(mFrag3);

}

if (mFrag4 != null) {

transaction.hide(mFrag4);

}

//将四个ImageButton置为灰色

private void resetImgs() {

mImg1.setImageResource(R.mipmap.icon2);

mImg2.setImageResource(R.mipmap.icon2);

mImg3.setImageResource(R.mipmap.icon2);

mImg4.setImageResource(R.mipmap.icon2);

}

底部按钮颜色变化是使用两形状一样张颜色不一样图片来回切换实现的。将当前显示的页面对应按钮设置成绿色图片。其他设置成灰色。

在这里插入图片描述

四个页面对应的Fragment

pageFragment1,pageFragment2,pageFragment3.class ,pageFragment4.class

lic class pageFragment1 extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.tab1, container, false);

return view;

}

class pageFragment2 extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.tab2, container, false);

TextView txt = (TextView) view.findViewById(R.id.txt2);

txt.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Log.d(“dd”,“dddd”);

Toast.makeText(getActivity(), “当前页面：2”, Toast.LENGTH_SHORT).show();

}

});

return view;

}

public class pageFragment3 extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.tab3, container, false);

return view;

}

public class pageFragment4 extends Fragment {

@Nullable

@Override

public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.tab4, container, false);

return view;

}

布局文件：

activity_main.xml

<LinearLayout

xmlns:android=“http://schemas.android.com/apk/res/android”

android:orientation=“vertical”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<FrameLayout

android:id="@+id/id_content"

android:layout_width=“match_parent”

android:layout_height=“0dp”

android:layout_weight=“1”>

底部导航栏布局：

<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”

android:layout_width=“match_parent”

android:layout_height=“55dp”

android:gravity=“center”

android:orientation=“horizontal”>

<LinearLayout

android:layout_width=“0dp”

android:layout_height=“wrap_content”

android:layout_weight=“1”

android:id="@+id/id_tab1"

android:gravity=“center”

android:orientation=“vertical”>

<ImageButton

android:id="@+id/id_tab_img1"

android:clickable=“false”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:src="@mipmap/icon1"

android:background="#00000000"/>

<TextView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:textColor="#A6A6A6"

android:text=“页面1”/>

<LinearLayout

android:id="@+id/id_tab2"

android:layout_width=“0dp”

android:layout_height=“wrap_content”

android:layout_weight=“1”

android:gravity=“center”

android:orientation=“vertical”>

<ImageButton

android:id="@+id/id_tab_img2"

android:clickable=“false”

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:src="@mipmap/icon2"

android:background="#00000000"/>

<TextView

android:layout_width=“wrap_content”

android:layout_height=“wrap_content”

android:textColor="#A6A6A6"

android:text=“页面2”/>

<LinearLayout

android:id="@+id/id_tab3"

最低0.47元/天解锁文章