领券联盟-主界面实现页面切换

我们前面做好了底部的导航栏

领券联盟-页面分析以及导航栏的实现 (opens new window)

接下来我们就要创建上部分内容，要填坑了。

拿什么填坑呢？

我们使用fragment

创建fragment

首先我们有一个基类

package com.sunofbeaches.taobaounion.base;

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();
}

接着，创建HomeFragment、RedPacketFragment、SearchFragment、SelectedFragment

目前来说，没有太多的代码，只是返回一个布局资源id即可。

比如说HomeFragment.java

package com.sunofbeaches.taobaounion.ui.fragment;

import com.sunofbeaches.taobaounion.R;
import com.sunofbeaches.taobaounion.base.BaseFragment;


public class HomeFragment extends BaseFragment {

    @Override
    protected int getRootViewResId() {
        return R.layout.fragment_home;
    }
}

布局也是空布局

只是有一个文字说明是哪个界面

<?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"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="首页" />

</LinearLayout>

主界面代码

我们使用了ButterKinfe，直接在onCreate的时候绑定

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

那么控件就可以使用注解的方式注入了

    @BindView(R.id.main_navigation_bar)
    public BottomNavigationView mNavigationView;

创建fragment

    private void initFragments() {
        mHomeFragment = new HomeFragment();
        mRedPacketFragment = new RedPacketFragment();
        mSelectedFragment = new SelectedFragment();
        mSearchFragment = new SearchFragment();
        mFm = getSupportFragmentManager();
        switchFragment(mHomeFragment);
    }

给底部的导航栏设置选中的监听

    private void initListener() {
        mNavigationView.setOnNavigationItemSelectedListener(item -> {
            if(item.getItemId() == R.id.home) {
                LogUtils.d(MainActivity.class,"切换到首页");
                switchFragment(mHomeFragment);
            } else if(item.getItemId() == R.id.selected) {
                LogUtils.i(MainActivity.class,"切换到精选");
                switchFragment(mSelectedFragment);
            } else if(item.getItemId() == R.id.red_packet) {
                LogUtils.w(MainActivity.class,"切换到特惠");
                switchFragment(mRedPacketFragment);
            } else if(item.getItemId() == R.id.search) {
                LogUtils.e(MainActivity.class,"切换到搜索");
                switchFragment(mSearchFragment);
            }
            return true;
        });
    }

选中以后要进行切换呀，对吧！

所以呢，就有了这个切换的方法

   private void switchFragment(BaseFragment targetFragment) {
        FragmentTransaction fragmentTransaction = mFm.beginTransaction();
        fragmentTransaction.replace(R.id.main_page_container,targetFragment);
        fragmentTransaction.commit();
    }

至于使用hide还是replace我们后面会讲到。

同学们先完成这个导航栏切换上面的页面吧。

MainActivity.java的代码

package com.sunofbeaches.taobaounion.ui.activity;

import android.os.Bundle;

import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.sunofbeaches.taobaounion.R;
import com.sunofbeaches.taobaounion.base.BaseFragment;
import com.sunofbeaches.taobaounion.ui.fragment.HomeFragment;
import com.sunofbeaches.taobaounion.ui.fragment.RedPacketFragment;
import com.sunofbeaches.taobaounion.ui.fragment.SearchFragment;
import com.sunofbeaches.taobaounion.ui.fragment.SelectedFragment;
import com.sunofbeaches.taobaounion.utils.LogUtils;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.main_navigation_bar)
    public BottomNavigationView mNavigationView;
    private HomeFragment mHomeFragment;
    private RedPacketFragment mRedPacketFragment;
    private SelectedFragment mSelectedFragment;
    private SearchFragment mSearchFragment;
    private FragmentManager mFm;

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

    private void initFragments() {
        mHomeFragment = new HomeFragment();
        mRedPacketFragment = new RedPacketFragment();
        mSelectedFragment = new SelectedFragment();
        mSearchFragment = new SearchFragment();
        mFm = getSupportFragmentManager();
        switchFragment(mHomeFragment);
    }

    private void initListener() {
        mNavigationView.setOnNavigationItemSelectedListener(item -> {
            if(item.getItemId() == R.id.home) {
                LogUtils.d(MainActivity.class,"切换到首页");
                switchFragment(mHomeFragment);
            } else if(item.getItemId() == R.id.selected) {
                LogUtils.i(MainActivity.class,"切换到精选");
                switchFragment(mSelectedFragment);
            } else if(item.getItemId() == R.id.red_packet) {
                LogUtils.w(MainActivity.class,"切换到特惠");
                switchFragment(mRedPacketFragment);
            } else if(item.getItemId() == R.id.search) {
                LogUtils.e(MainActivity.class,"切换到搜索");
                switchFragment(mSearchFragment);
            }
            return true;
        });
    }

    private void switchFragment(BaseFragment targetFragment) {
        FragmentTransaction fragmentTransaction = mFm.beginTransaction();
        fragmentTransaction.replace(R.id.main_page_container,targetFragment);
        fragmentTransaction.commit();
    }

}

ok啦，就写到这里吧