1. 创建项目和布局文件:
在 res/layout/activity_main.xml 中定义主界面的布局,包含 ViewPager 用于切换不同的 Fragment,以及 BottomNavigationView 用于底部导航。
<!-- res/layout/activity_main.xml -->
<?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">
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottom_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_nav_menu" />
</RelativeLayout>
2. 创建 Fragment:
创建两个或更多的 Fragment,用于展示不同的页面内容。
// SampleFragment1.java
public class SampleFragment1 extends Fragment {
// Fragment 1 的布局文件,内容可以根据实际需求进行修改
// ...
public SampleFragment1() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_sample1, container, false);
}
}
// SampleFragment2.java
public class SampleFragment2 extends Fragment {
// Fragment 2 的布局文件,内容可以根据实际需求进行修改
// ...
public SampleFragment2() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_sample2, container, false);
}
}
3. 创建菜单文件:
在 res/menu 文件夹中创建一个菜单文件,用于定义底部导航栏的项。
<!-- res/menu/bottom_nav_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_sample1"
android:title="Sample 1" />
<item
android:id="@+id/nav_sample2"
android:title="Sample 2" />
</menu>
4. 在 MainActivity 中使用 Fragment 和 ViewPager:
在 MainActivity.java 中使用 Fragment、ViewPager 和 BottomNavigationView。
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private BottomNavigationView bottomNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化 ViewPager 和适配器
viewPager = findViewById(R.id.view_pager);
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPagerAdapter.addFragment(new SampleFragment1());
viewPagerAdapter.addFragment(new SampleFragment2());
viewPager.setAdapter(viewPagerAdapter);
// 设置 BottomNavigationView 的监听器
bottomNavigationView = findViewById(R.id.bottom_navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(item -> {
switch (item.getItemId()) {
case R.id.nav_sample1:
viewPager.setCurrentItem(0);
return true;
case R.id.nav_sample2:
viewPager.setCurrentItem(1);
return true;
default:
return false;
}
});
// 设置 ViewPager 的页面切换监听器,用于同步更新 BottomNavigationView 的选中项
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
bottomNavigationView.getMenu().getItem(position).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
// 适配器用于管理 Fragment 列表
private static class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList = new ArrayList<>();
public ViewPagerAdapter(@NonNull FragmentManager fm) {
super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
}
public void addFragment(Fragment fragment) {
fragmentList.add(fragment);
}
@NonNull
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
}
}
5. 运行效果:
通过以上步骤,你已经成功实现了一个底部导航栏,并且可以通过滑动或点击切换不同的 Fragment 页面。这种方式更加灵活,用户可以通过滑动手势或点击导航项来切换页面,提供了更好的用户体验。
转载请注明出处:http://www.zyzy.cn/article/detail/15183/Android