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>

源碼下載

等等…