| Android沉浸式底部导航栏简单实现 | 您所在的位置：网站首页 › android实现底部导航栏 › Android沉浸式底部导航栏简单实现 |
Android沉浸式底部导航栏简单实现
|
文章目录
效果：具体实现：buttomnavigationview部分实现ViewPager部分实现：建立buttomnavigationview与ViwePager2联系最终效果
底部导航栏是每一个APP的核心UI组件之一，本文记录一下自己最近实现的一个沉浸式底部导航栏效果。 效果：
1、在build.gradle导入必要的依赖： implementation 'com.google.android.material:material:1.1.0'2、在主界面的xml中添加buttomnavigationview 其中有几个比较核心的属性： 1、app:itemIconTint：用来设置bottomview设置的图标的点击颜色 2、app:itemTextColor：用来设置bottomview设置的文字的点击颜色 3、app:labelVisibilityMode：设置点击按钮缩放特效，这里我将其关闭 4、android:background：设置背景，这里我为了将bottomview自带的边界阴影去掉选择了一个空白透明背景。 5、app:menu ：设置buttomview的内容相关属性 3、给menu添加相关的menu：
这里我设置了3个item。 4、设置点击选中切换颜色： 创建对应的selector文件：
1、导入依赖 implementation "androidx.viewpager2:viewpager2:1.0.0"2、在对应的xml文件中引入： 3、创建相关的FragmentStateAdapter（ViewPager2新的特性，简化ViewPager的Adapter）: public class MyViewPager2Adapter extends FragmentStateAdapter { List list; public MyViewPager2Adapter(@NonNull FragmentActivity fragmentActivity, List list) { super(fragmentActivity); this.list = list; } @NonNull @Override public Fragment createFragment(int position) { return list.get(position); } @Override public int getItemCount() { return list.size(); } }4、创建自定义的Fragment。 代码略。 建立buttomnavigationview与ViwePager2联系主要思路： 1、在Activity中ViewPager2的滑动监听方法中切换buttomnavigationview的选中项。 2、buttomnavigationview的选中响应事件当中切换ViewPager2绑定的Fragment。 详细见代码解析： public class MainActivity extends BaseActivity { Fragment fragment_function, fragment_me, fragment_main; ViewPager2 viewPager2; BottomNavigationView bottomNavigationView; List list; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initFragment(); initViewPager2(); initBottomNavigationView(); } // 初始化BottomNavigationView并建立与ViewPager2联系 public void initBottomNavigationView() { bottomNavigationView = findViewById(R.id.bottom_nav); // 设置按钮点击监听 bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { // 获得点击的item String title = item.getTitle().toString(); // 根据点击的item项目切换对应的Fragment switch (item.getItemId()) { case R.id.main_button_bar_function: viewPager2.setCurrentItem(1); break; case R.id.main_button_bar_home: viewPager2.setCurrentItem(0); break; case R.id.main_button_bar_me: viewPager2.setCurrentItem(2); break; } return true; } }); } // 初始化ViewPager2并建立与BottomNavigationView联系 public void initViewPager2() { viewPager2 = findViewById(R.id.main_viewPager); viewPager2.setAdapter(new MyViewPager2Adapter(this, list)); // 设置ViewPager的滑动监听 viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() { @Override public void onPageSelected(int position) { // 根据滑动监听切换对应的Fragment super.onPageSelected(position); bottomNavigationView.getMenu().getItem(position).setChecked(true); } }); } // 初始化Fragment public void initFragment() { fragment_function = new Fragment_function(); fragment_main = new Fragment_main(); fragment_me = new Fragment_me(); list = new ArrayList(); list.add(fragment_main); list.add(fragment_function); list.add(fragment_me); } } 最终效果
|
在这个效果当中实现了一个比较美观的底部导航栏效果，使用buttomnavigationview与ViwePager2实现了该效果。
在该目录中创建menu_bottom_navigation_view文件：
在该目录下创建。
【本文地址】