Android进阶之路 |
您所在的位置：网站首页 › 底部导航栏的作用是什么呢 › Android进阶之路 |
Android进阶之路
|
底部导航的实现之一为BottomNavigationView，乃是design库下的一款控件，或为Android 5.0的一种，同时根据某篇博文介绍说sdk25以后才可以使用，最好高于25.1，因为有一些问题没有处理好 ~ 对于一个项目，底部导航基本是标配，特提供我自己记录的几篇Blog Android进阶之路 - PagerTabStrip与ViewPager的使用（太老了，没看的必要）Tablayout + ViewPager + Fragment 快速实现底部导航（可能用的比较少了）Android入门之路 - RadioButton的简单使用（可了解）Android进阶之路 - 通过RadioGroup + RadioButton 实现底部导航栏（适当推荐）Android进阶之路 - BottomNavigationView的使用与问题处理方案（较新，推荐）Android进阶之路 - 通过 BottomNavigationView + FrameLayout 实现底部导航栏（较新，推荐）闲话不多唠，此篇文章是根据多篇博文，进行总结性的一篇记录，其中的知识点都已经手动敲打过一次，请继续前行！ 实现过程完整示例所遇问题归纳取消自带动画效果，实现常规显示禁止ViewPager自带滑动效果底部Icon、text选中状态底部icon选中、未选中图标底部text选中、未选中颜色 定制化UI，多图标时中间图标放大显示Effect tab_1 6.ViewPager适配器，BottomAdapter package com.example.yongliu.bottomnavigationview; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.ArrayList; import java.util.List; /** * author yongliu * date 2018/2/2. * desc: */ public class BottomAdapter extends FragmentPagerAdapter { private List fragments = new ArrayList(); public BottomAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return fragments.get(position); } @Override public int getCount() { return fragments.size(); } public void addFragment(Fragment fragment) { fragments.add(fragment); } } 完整示例MainActivity package com.example.yongliu.bottomnavigationview; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.design.widget.BottomNavigationView; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.view.MenuItem; public class MainActivity extends AppCompatActivity { private BottomNavigationView mBv; private ViewPager mVp; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView() { mBv = (BottomNavigationView) findViewById(R.id.bv); mVp = (ViewPager) findViewById(R.id.vp); BottomNavigationViewHelper.disableShiftMode(mBv); //这里可true是一个消费过程，同样可以使用break，外部返回true也可以 mBv.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.item_tab1: mVp.setCurrentItem(0); return true; case R.id.item_tab2: mVp.setCurrentItem(1); return true; case R.id.item_tab3: mVp.setCurrentItem(2); return true; case R.id.item_tab4: mVp.setCurrentItem(3); return true; } return false; } }); //数据填充 setupViewPager(mVp); //ViewPager监听 mVp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { mBv.getMenu().getItem(position).setChecked(true); } @Override public void onPageScrollStateChanged(int state) { } }); //禁止ViewPager滑动 // mVp.setOnTouchListener(new View.OnTouchListener() { // @Override // public boolean onTouch(View v, MotionEvent event) { // return true; // } // }); } private void setupViewPager(ViewPager viewPager) { BottomAdapter adapter = new BottomAdapter(getSupportFragmentManager()); adapter.addFragment(new Tab1Fragment()); adapter.addFragment(new Tab2Fragment()); adapter.addFragment(new Tab3Fragment()); adapter.addFragment(new Tab4Fragment()); viewPager.setAdapter(adapter); } }activity_main 所遇问题归纳注意 ：底部Bottom选项，最少为3项，超过3项之后,BottomNavigationView会自动使用本身控件的自带动画属性，同时最多好像为5项，目前没有进行验证 取消自带动画效果，实现常规显示问题 ：当底部Button超过三个之后，自带动画效果 需求 ：取消原有动画效果，常规显示 解决方式 ： 创建BottomNavigationViewHelper类，进行disableShiftMode方法调用 public class BottomNavigationViewHelper { public static void disableShiftMode(BottomNavigationView view) { BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0); try { Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode"); shiftingMode.setAccessible(true); shiftingMode.setBoolean(menuView, false); shiftingMode.setAccessible(false); for (int i = 0; i设置 item 之后，使用线性布局，以权重的方式，进行图片替换（关于这一点我没有进行具体校验）。 底部Icon、text选中状态 底部icon选中、未选中图标常规是通过类似以下代码设置图标，但是扩展性、灵活性太差 app:itemIconTint="@drawable/bottom_btn_selected_color"所以我们通过另一种方式实现，结合底部菜单的方式，主要用到了类似app:menu="@menu/bottom_menu"的属性 select_bottom_home：先创建一个选中、未选中的图标选择器 （具体个数根据自己菜单数量定制) bottom_menu：创建底部菜单，将之前建好的选择器一并声明 使用示例 底部text选中、未选中颜色早期 解决方式 app:itemTextColor="@drawable/colortext"colortext 补入的（和之前相似） bottom_text_selected（字体选中、未选中选择器） 主要属性 app:itemTextColor="@drawable/bottom_text_selected" 示例 Look Here：如果通过上方设置，无效的话则通过下方代码动态设置 java版本 //获取底部导航图标颜色，根据图标颜色设置文字颜色 Resources resource = getResources(); @SuppressLint("ResourceType") ColorStateList csl = resource.getColorStateList(R.drawable.bottom_btn_selected_color); bottomNav.setItemTextColor(csl); kt版本 //获取底部导航图标颜色，根据图标颜色设置文字颜色 val csl: ColorStateList = resources.getColorStateList(R.drawable.bottom_text_selected) binding.bn.itemTextColor = csl 定制化UI，多图标时中间图标放大显示类似效果
xml 有帮助的博文 BottomNavigationView的属性设置BottomNavigationView + ViewPager + Fragment 实现左右滑动效果BottomNavigationView 的使用及遇到的坑Android流行UI布局—底部导航 |
【本文地址】
今日新闻 |
推荐新闻 |