BottomNavigationView 进阶使用之切换Fragment

文章里的代码是在简单使用的基础上写的,没看过或者没看的,点击http://jethro.cc/index.php/archives/70/查看

效果图
效果图

这篇文章不会详细讲解 fragment,看不懂的话,建议搜索查看 fragment 的知识

0X01 建立要显示的 fragment

首先,把 Fragment 和 Fragment 的布局建立好。新建类和布局什么的过于基础了,就不详细写了,这里贴上代码文件的结构

以及我Fragment和相应的布局的代码,这里只贴主页的,反正其他的跟这个代码差不多

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- #FF0000 是红色的16进制的颜色代码-->
    <TextView
        android:id="@+id/text"
        android:background="#FF0000"
        android:text="主页"
        android:textSize="30sp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

HomeActivity.java

package cc.jethro.bottomnavigationviewtest;

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

/**
 * 主页 fragment
 * fragment 就相当于一个 Actively
 * Created by jethro on 2017/5/19.
 */

public class HomeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //加载 fragment 的布局文件
        View view = inflater.inflate(R.layout.fragment_home, container,false);
        return view;
    }
}

1X01 让 Fragment 显示出来

大概思路是为 Fragment 提供一个容器 FragmentLayout,然后在 JAVA 代码里使用
BottomNavigateView 控制让某个 Fragment 显示在容器上面。(不理解的可以把
FragmentLayout 理解为ImageView,把 fragment 理解为图片)

01x1 在 Activity 的布局中添加 FragmentLayout

activity_main.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:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cc.jethro.bottomnavigationviewtest.MainActivity">

    <FrameLayout
        android:id="@+id/content_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>


    <android.support.design.widget.BottomNavigationView
        android:background="?android:attr/windowBackground"
        android:id="@+id/navigation_view"
        app:menu="@menu/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </android.support.design.widget.BottomNavigationView>

</LinearLayout>

01x2 在 Java 代码中控制 Fragment 的显示

首先要显示一个默认的 fragment,然后在BottomNavigationView里添加监听,比如监听到用户选择了个人选项,就把主页选项和社区选项给隐藏掉,显示个人 Fragment,好,下面用代码来实现

01x2.1 显示一个默认的 fragment

我这里默认显示 HomeFragment,代码如下


public class MainActivity extends AppCompatActivity {

    FragmentManager fragmentManager; //fragment管理器

    HomeFragment homeFragment; //主页
    CommunityFragment communityFragment; 社交
    MeFragment meFragment; 个人

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fragmentManager = getSupportFragmentManager(); //获取 fragment 管理器

        //默认显示HomeFragment
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); //获得 Fragment 事务处理器
        homeFragment = new HomeFragment(); //把主页 new 出来
        fragmentTransaction.replace(R.id.content_view, homeFragment); //加载fragment
        fragmentTransaction.commit();//提交加载操作
    }
}

OK,来解析一下代码,
FragmentManager 顾名思义,是一个 Fragment 管理器,通过 getSupportFragmentManager() 获得

FragmentTransaction 这个是Fragment事务处理器,用于处理fragment的添加、显示、隐藏等操作,通过fragmentManager.beginTransaction获得。

FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

fragmentTransaction.commit();
都是成对出现的,前者是获取事务处理器,后者是提交事务,这里的事务就是指的显示、隐藏、添加 Fragment。

fragmentTransaction.replace(R.id.content_view, homeFragment); 这个方法是重新加载
fragment 的 ,第一个参数是FragmentLayout的id ,第二个参数是Fragment

fragmentTransaction.add(R.id.content_view, homeFragment);这个方法是添加并显示 fragment 的,第一个参数是 FragmentLayout 的id ,第二个参数是 Fragment

fragmentTransaction1.hide(meFragment);这个方法是隐藏fragment 的,参数是 Fragment

fragmentTransaction1.show(homeFragment); 这个方法是显示 fragment 的,参数是 Fragment

01x2.2 在 bottomNavigationView 的选择监听中进行显示隐藏操作

        //为navigation设置监听
        navigationView.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //获取事务处理器
                FragmentTransaction fragmentTransaction1 = fragmentManager.beginTransaction();

                switch (item.getItemId()) { //读取选择的item的id

                    //当选中的item的id是 navigation_home 时,
                    //隐藏其他fragment,把fragment_home显示出来
                    case R.id.navigation_home:

                        //如果 communityFragment 不等于空,就把他隐藏掉
                        if (communityFragment != null){
                            fragmentTransaction1.hide(communityFragment);
                        }
                        
                        if (meFragment != null){
                            fragmentTransaction1.hide(meFragment);
                        }

                        //如果fragment还没创建就创建一个,然后add
                        //如果fragment已经创建了,就show
                        if (homeFragment == null) {
                            homeFragment = new HomeFragment();
                            fragmentTransaction1.add(R.id.content_view ,homeFragment);
                        }else
                            fragmentTransaction1.show(homeFragment);
                        break;

                    case R.id.navigation_community:
                        if (homeFragment != null){
                            fragmentTransaction1.hide(homeFragment);
                        }
                        if (meFragment != null){
                            fragmentTransaction1.hide(meFragment);
                        }
                        if (communityFragment == null) {
                            communityFragment = new CommunityFragment();
                            fragmentTransaction1.add(R.id.content_view ,communityFragment);
                        }else
                            fragmentTransaction1.show(communityFragment);
                        break;

                    case R.id.navigation_me:
                        if (communityFragment != null){
                            fragmentTransaction1.hide(communityFragment);
                        }
                        if (homeFragment != null){
                            fragmentTransaction1.hide(homeFragment);
                        }
                        if (meFragment == null) {
                            meFragment = new MeFragment();
                            fragmentTransaction1.add(R.id.content_view ,meFragment);
                        }else
                            fragmentTransaction1.show(meFragment);
                        break;
                }

                //提交操作
                fragmentTransaction1.commit();

                return true; //一定要返回true,否则会选择不了item
            }
        });

END 编译运行一下

效果图

添加新评论