前言
无论是顶部还是底部导航栏,都是大多数APP的标配,网络上的相关实现教程也非常之多。最近回忆起以前写的小项目,发现对这块内容有些遗忘,不妨就再整理一遍代码逻辑,记录下来,方便日后查阅(指复制粘贴)。
实现的方式有很多,本文采用以下方式实现:
- 底部导航栏:Fragment + BottomNavigationView
- 顶部导航栏:Fragment + ViewPager2 + TabLayout
底部导航栏
<布局文件>
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto"> <FrameLayout android:id="@+id/main_page_controller" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginBottom="50dp" android:background="#EFEEEE"/> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/main_navigation_bar" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentBottom="true" android:background="#ffffff" app:itemIconTint="@color/navigation_bar_color" app:itemTextColor="@color/navigation_bar_color" app:labelVisibilityMode="labeled" app:menu="@menu/navigation_items"/> </RelativeLayout>
<menu文件>
<?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" android:title="首页"/> <item android:id="@+id/plan" android:icon="@mipmap/plan" android:title="日程"/> <item android:id="@+id/game" android:icon="@mipmap/game" android:title="娱乐"/> <item android:id="@+id/setting" android:icon="@mipmap/setting" android:title="设置"/> </menu>
<MainActivity.java>
public class MainActivity extends AppCompatActivity { private BottomNavigationView mNavigationView; private FragmentManager mFragmentManager; private Fragment[] fragments; private int lastFragment; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mNavigationView = findViewById(R.id.main_navigation_bar); initFragment(); initListener(); } private void initFragment() { HomeFragment mHomeFragment = new HomeFragment(); PlanFragment mPlanFragment = new PlanFragment(); GameFragment mGameFragment = new GameFragment(); SettingFragment mSettingFragment = new SettingFragment(); fragments = new Fragment[]{mHomeFragment, mPlanFragment, mGameFragment, mSettingFragment}; mFragmentManager = getSupportFragmentManager(); //默认显示HomeFragment mFragmentManager.beginTransaction() .replace(R.id.main_page_controller, mHomeFragment) .show(mHomeFragment) .commit(); } private void initListener() { mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.home: if (lastFragment != 0) { MainActivity.this.switchFragment(lastFragment, 0); lastFragment = 0; } return true; case R.id.plan: if (lastFragment != 1) { MainActivity.this.switchFragment(lastFragment, 1); lastFragment = 1; } return true; case R.id.game: if (lastFragment != 2) { MainActivity.this.switchFragment(lastFragment, 2); lastFragment = 2; } return true; case R.id.setting: if (lastFragment != 3) { MainActivity.this.switchFragment(lastFragment, 3); lastFragment = 3; } return true; } return false; } }); } private void switchFragment(int lastFragment, int index) { FragmentTransaction transaction = mFragmentManager.beginTransaction(); transaction.hide(fragments[lastFragment]); if (!fragments[index].isAdded()){ transaction.add(R.id.main_page_controller,fragments[index]); } transaction.show(fragments[index]).commitAllowingStateLoss(); } }
<实现效果>
顶部导航栏
<布局文件>
<?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" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> <com.google.android.material.tabs.TabLayout android:id="@+id/home_indicator" android:layout_width="match_parent" android:layout_height="30dp" app:tabGravity="fill" /> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/home_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>
<ViewPgaer2适配器>
public class HomePagerAdapter extends FragmentStateAdapter { private List<String> mData = new ArrayList<>(); public HomePagerAdapter(@NonNull FragmentActivity fragmentActivity, List<String> data) { super(fragmentActivity); mData = data; } @NonNull @Override public Fragment createFragment(int position) { return HomePageFragment.newInstance(mData.get(position)); } @Override public int getItemCount() { return mData.size(); } }
<HomeFragment.java>
public class HomeFragment extends Fragment { private TabLayout mTabLayout; private ViewPager2 mViewPager2; private List<String> mData = new ArrayList<>(); @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_home, container, false); initData(); initView(rootView); return rootView; } private void initView(View rootView) { mTabLayout = rootView.findViewById(R.id.home_indicator); mViewPager2 = rootView.findViewById(R.id.home_pager); HomePagerAdapter homePagerAdapter = new HomePagerAdapter(getActivity(), mData); mViewPager2.setAdapter(homePagerAdapter); new TabLayoutMediator(mTabLayout, mViewPager2, new TabLayoutMediator.TabConfigurationStrategy() { @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) { tab.setText(mData.get(position)); } }).attach(); } private void initData() { mData.add("页面1"); mData.add("页面2"); mData.add("页面3"); mData.add("页面4"); mData.add("页面5"); } }
<HomePageFragment.java>
public class HomePageFragment extends Fragment { private static final String ARG_PARAM1 = "param1"; private String mParam1; private TextView textView; public HomePageFragment() { } public static HomePageFragment newInstance(String param1) { HomePageFragment fragment = new HomePageFragment(); Bundle args = new Bundle(); args.putString(ARG_PARAM1, param1); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { mParam1 = getArguments().getString(ARG_PARAM1); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_home_page, container, false); textView = rootView.findViewById(R.id.home_page_tv); textView.setText(mParam1); return rootView; } }
<实现效果>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。