使用Bottom Navigation Activity和Fragment仿微信页面切换

使用使用Bottom Navigation Activity和Fragment仿微信页面切换已经不是什么新鲜的技术了，但前几天尝试了一下，觉得还是写点东西。
Bottom Navigation Activity本质上是个普通的Activity，不一样的是它在创建的时候会自动创建一些相关的资源，方便程序员的使用。那话不多说，直接写怎么用。

1.首先新建一个Bottom Navigation Activity

（可以使用新项目，旧的学习项目也可以）

新建的Activity包含了一个xml文件，这就是活动加载的布局。更改一下布局里的代码，将原本的TextView去掉，写一个一会需要动态加载的碎片（Fragment）。代码如下

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BottomNavigation">

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

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</android.support.constraint.ConstraintLayout>

2.新建三个Fragment (直接在activity同一目录就好)

每个新建的Fragment中也都包含了一个xml布局文件。建好文件后我们重写Fragment和xml中的代码。

改动一下代码：

首先是Fragment.java中的代码，默认的代码中有许多的方法，这些都不需用。

package com.example.learn;
//Fragment01.java 中的代码

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment01 extends Fragment {

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

            return inflater.inflate(R.layout.fragment_fragment01, container, false);
    }
}

package com.example.learn;
//Fragment02.java 中的代码

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment02 extends Fragment {

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

            return inflater.inflate(R.layout.fragment_fragment02, container, false);
    }
}

package com.example.learn;
//Fragment03.java 中的代码

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Fragment03 extends Fragment {

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

            return inflater.inflate(R.layout.fragment_fragment03, container, false);
    }
}

可以看见.java中的大部分代码都被去除了，

这里注意个细节，如果只是想要实现这篇文章实现的效果必须把Fragment.java代码里的其他方法都去除掉，不然无法运行

重写了Fragment中的代码后我们来改动一下xml布局文件里的内容：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment01">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是fragment01" />

</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment02">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是fragment02" />

</FrameLayout>

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment03">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="这是fragment03" />

</FrameLayout>

这里的代码我们做了很简单的改动，只是改一下原TextView中的文字，方便一会我们区分。

3.添加按钮点击功能

可以看到我们创建的Bottom Navigation Activity相关的布局文件里有三个可以点击的按钮。接下来我们写一下BottomNavigation.java里面的代码：

package com.example.learn;

import android.os.Bundle;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.support.annotation.NonNull;
import android.view.MenuItem;

public class BottomNavigation extends AppCompatActivity {
    
    private android.support.v4.app.FragmentTransaction transaction;
    private android.support.v4.app.FragmentManager fragmentManager;

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    setFragment(new Fragment01());//点击第一个按钮事设置当前的Fragment
                    return true;
                case R.id.navigation_dashboard:
                    setFragment(new Fragment02());//点击第二个按钮事设置当前的Fragment
                    return true;
                case R.id.navigation_notifications:
                    setFragment(new Fragment03());//点击第三个按钮事设置当前的Fragment
                    return true;
            }
            return false;
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_b);
        BottomNavigationView navView = findViewById(R.id.nav_view);
        
        setFragment(new Fragment01());//活动初始化的时候设置Fragment
        
        navView.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    }

    //设置当前碎片，此方法实现Fragment的替换
    private void setFragment(Fragment fragment){
        fragmentManager=getSupportFragmentManager();
        transaction=fragmentManager.beginTransaction();
        transaction.replace(R.id.myframe,fragment);//此处的R.id.myframe，是最上面的那段代码中的Fragment。
        transaction.commit();
    }
}

在上面这段代码中，我们删除了原TextView的相关内容，添加了替换Fragment的方法，在点击按钮后使用函数实现Fragment的替换。至此，我们的代码已经完全实现了。

写在最后：

如果大家只是想单纯的实现这个功能，在新建Fragment类的时候AS会自动添加许多的方法与内容。这部分必须去掉。不然程序会闪退。
另外，碎片中的UI控件不能直接在Activity代码中用FindViewById()来使用。也会导致闪退。

作者：Zxx