物联网之Android开发1——底部导航栏的编写(单个activity，多个Fragment)

（如果想要快速的办法，建议直接在建module的时候选择Bottom Navigation Activity，用Android的默认模板）

 

先看效果：

Bottom navigation bar

从上面的视频可以看到我需要创建4个Fragment才能实现这种效果。

我在包里创建了一个Fragment文件夹专门来放fragment文件，下面就是我创建的四个Fragment文件的地址以及四个Fragment文件：

FrontFragment（首页）：

public class FrontFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.front_fragment, null);
        return view;
    }
}

下面是Fragment文件对应的布局文件

front_fragment（首页）：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="front"/>

</androidx.constraintlayout.widget.ConstraintLayout>

上面的Fragment以及它们对应的布局文件都是一样的，为的就是展示页面切换的效果。下面才是重头戏。

布局文件activity_main.xml：

在这个布局文件中父容器用了相对布局管理器--RelativeLayout，具体的布局方式如下：

FrameLayout是页面切换的部分，我需要在页面布局的时候给它个位置：

    <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

下面的LinearLayout是一个水平的线性布局管理器（也就是底部导航栏），在这里我需要四个ImageButton来对应四个Fragment，但是我的Image上没有文字说明，所以我还要添加一个TextView来对按钮进行文字说明，我的每个ImageButton外面还得有一个相对布局管理器来把ImageButton和TextView包起来。具体看下图：

具体代码如下：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#F0FFFF"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingTop="10dp"
        android:paddingBottom="10dp">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <ImageButton
                android:id="@+id/image1"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:scaleType="fitXY"
                android:layout_centerHorizontal="true"
                android:background="#0000"
                android:src="@drawable/sh01" />

            <TextView
                android:id="@+id/image1_text1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/image1"
                android:layout_centerHorizontal="true"
                android:text="首页" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <ImageButton
                android:id="@+id/image2"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:scaleType="fitXY"
                android:layout_centerHorizontal="true"
                android:background="#0000"
                android:src="@drawable/sh02" />

            <TextView
                android:id="@+id/image1_text2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/image2"
                android:layout_centerHorizontal="true"
                android:text="灯光" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <ImageButton
                android:id="@+id/image3"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:scaleType="fitXY"
                android:layout_centerHorizontal="true"
                android:background="#0000"
                android:src="@drawable/sh03" />

            <TextView
                android:id="@+id/image1_text3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/image3"
                android:layout_centerHorizontal="true"
                android:text="设备" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <ImageButton
                android:id="@+id/image4"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:scaleType="fitXY"
                android:layout_centerHorizontal="true"
                android:background="#0000"
                android:src="@drawable/sh04" />

            <TextView
                android:id="@+id/image1_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/image4"
                android:layout_centerHorizontal="true"
                android:text="我的" />
        </RelativeLayout>

    </LinearLayout>

 页面布局部分讲完就到activity部分了。

首先就是初始化，声明变量：

FragmentManager fragmentManager;
FragmentTransaction fragmentTransaction;
Fragment f = null;

获取按钮对象：

ImageButton imageButton1 = findViewById(R.id.image1);
ImageButton imageButton2 = findViewById(R.id.image2);
ImageButton imageButton3 = findViewById(R.id.image3);
ImageButton imageButton4 = findViewById(R.id.image4);

点击事件监听：

imageButton1.setOnClickListener(listener);
imageButton2.setOnClickListener(listener);
imageButton3.setOnClickListener(listener);
imageButton4.setOnClickListener(listener);

默认第一页为 FrontFragment：

fragmentManager = getSupportFragmentManager();
fragmentTransaction = fragmentManager.beginTransaction();
f = new FrontFragment();
fragmentTransaction.add(R.id.fragment, f);
fragmentTransaction.commit();

接口重写onClickListener方法，判断点击事件，进行页面切换：

    View.OnClickListener listener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            fragmentManager = getSupportFragmentManager();
            fragmentTransaction = fragmentManager.beginTransaction();

            switch (view.getId()) {
                case R.id.image1:
                    f = new FrontFragment();
                    break;

                case R.id.image2:
                    f = new LightFragment();
                    break;

                case R.id.image3:
                    f = new DeviceFragment();
                    break;

                case R.id.image4:
                    f = new MimeFragment();
                    break;

                default:
                    break;
            }

            fragmentTransaction.replace(R.id.fragment, f);
            fragmentTransaction.commit();
        }
    };