Android开发-Fragment页面切换

前言

本文使用第三方框架，非原生Android开发，请先添加所需依赖，另外本文使用Android x 库开发。

添加依赖

1.在build.gradle:app中添加，点击Sync Now同步

dependencies {
               implementation 'com.google.android.material:material:1.2.0-alpha03'
               annotationProcessor 'com.jakewharton:butterknife-compiler:10.2.1'
}

2.若出现下载不了，请在build.gradle：project中添加maven 仓库

 repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }

绘制布局

1.activity_main.xml使用相对布局，底部导航栏按钮使用 material 依赖中的BottomNavigationView控件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.activity.MainActivity">

   <FrameLayout
       android:id="@+id/main_page_container"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>
    <!--底部按钮-->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/main_bottm"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        <!--菜单项-->
        app:menu="@menu/home_item"
        android:layout_alignParentBottom="true"
        />

</RelativeLayout>

2.res文件下新建meun目录，新建home_item.xml,icon底部按钮图片，title底部按钮文字，在BottomNavigationView控件的 app:menu="@menu/home_item" 属性中应用

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/home"
    android:icon="@mipmap/home_normal"
    android:title="@string/home_title"/>
    />
    <item
        android:id="@+id/select"
        android:icon="@mipmap/select_normal"
        android:title="@string/select_title"/>
    />
    <item
        android:id="@+id/packet"
        android:icon="@mipmap/red_packet_normal"
        android:title="@string/packet_title"/>
    />
    <item
        android:id="@+id/search"
        android:icon="@mipmap/search_normal"
        android:title="@string/search_title"/>
    />

</menu>

3.四个对应的FrameLayout页面

<?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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30dp"
        android:text="首页"/>

</LinearLayout>

实现功能

1.编写BaseFrameLayout基类，完成FrameLayout的共同操作

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 abstract class BaseFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,@Nullable ViewGroup
            container,@Nullable Bundle savedInstanceState) {
        return loadRootView(inflater,container,savedInstanceState);
    }

    protected View loadRootView(LayoutInflater inflater,ViewGroup container,
                                Bundle savedInstanceState) {
        int resId = getRootViewResId();
        return inflater.inflate(resId,container,false);
    }

    protected abstract int getRootViewResId();
}

2.调用BaseFragment 中的getRootViewResId 返回R.layout.home_fragment，为四个Fragment创建view

import com.example.taobao.R;
import com.example.taobao.base.BaseFragment;

public class HomeFragment extends BaseFragment {
    @Override
    protected int getRootViewResId() {
        return R.layout.home_fragment;
    }
}

3.在MainActivity.java文件中为底部导航栏（BottomNavigationView）设置监听，调用setOnNavigationItemSelectedListener方法，对列表id进行判断

mbottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                if (item.getItemId()==R.id.home){
                }else if(item.getItemId()==R.id.select){
                }else if(item.getItemId()==R.id.packet){
                }else if (item.getItemId()==R.id.search){   
                }
                return true;
            }
        });

4.在MainActivity.java文件中为四个Fragment页面设置监听，并重写switchFragment方法

    private void switchFragment(BaseFragment targetFragment) {
        /*开启事务*/
        FragmentTransaction fragmentTransaction = mFm.beginTransaction();
        /*页面跳转，参数类型：主FragmentID，需要跳转的FragmentID*/
        fragmentTransaction.replace(R.id.main_page_container,targetFragment);
        /*提交事务*/
        fragmentTransaction.commit();

    }

5.MainActivity.java的完整代码如下：

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.MenuItem;
import com.example.taobao.R;
import com.example.taobao.base.BaseFragment;
import com.example.taobao.ui.fragment.HomeFragment;
import com.example.taobao.ui.fragment.ResFragment;
import com.example.taobao.ui.fragment.SearchFragment;
import com.example.taobao.ui.fragment.SelectFragment;
import com.example.taobao.utils.LogUtils;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.main_bottm)
    public BottomNavigationView mbottomNavigationView;
    HomeFragment mHomeFragment;
    ResFragment mResFragment;
    SearchFragment mSearchFragment;
    SelectFragment mSelectFragment;
    FragmentManager mFm;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initView();
        initFragment();

    }

    private void initView() {
        mbottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                if (item.getItemId()==R.id.home){
                    LogUtils.d(MainActivity.class,"首页");
                      switchFragment(mHomeFragment);
                }else if(item.getItemId()==R.id.select){
                    LogUtils.i(MainActivity.class,"精选");
                    switchFragment(mSelectFragment);

                }else if(item.getItemId()==R.id.packet){
                    LogUtils.w(MainActivity.class,"特惠");
                    switchFragment(mResFragment);

                }else if (item.getItemId()==R.id.search){
                    LogUtils.e(MainActivity.class,"搜索");
                    switchFragment(mSearchFragment);
                }
                return true;
            }
        });
    }
    
    private void initFragment() {
         mHomeFragment = new HomeFragment();
         mResFragment=new ResFragment();
         mSearchFragment=new SearchFragment();
         mSelectFragment=new SelectFragment();
         mFm = getSupportFragmentManager();
         switchFragment(mHomeFragment);
    }

    private void switchFragment(BaseFragment targetFragment) {
        /*开启事务*/
        FragmentTransaction fragmentTransaction = mFm.beginTransaction();
        /*页面跳转，参数类型：主FragmentID，需要跳转的FragmentID*/
        fragmentTransaction.replace(R.id.main_page_container,targetFragment);
        /*提交事务*/
        fragmentTransaction.commit();
    }
}

代码中的LogUtils使用重写的Log控制类，可以删除，放在这里起提示作用，可以用Log.d(TAG," 提示语句")

效果图

颜色控制

res >> values >> colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--底部按钮颜色-->
    <color name="colorPrimary">#FF9D69</color>
   <!-- 状态栏颜色-->
    <color name="colorPrimaryDark">#FFCA93</color>
    <!--主页面控件颜色-->
    <color name="colorAccent">#03DAC5</color>
</resources>

源码下载

等等…