Android进阶之路 - BottomNavigationView的使用与问题处理方案
底部导航的实现之一为BottomNavigationView，乃是design库下的一款控件，或为Android 5.0的一种，同时根据某篇博文介绍说sdk25以后才可以使用，最好相对高于25.1，因为有一些问题没有处理好。
闲话不多唠，此篇文章是根据多篇博文，进行总结性的一篇记录，其中的知识点都已经手动敲打过一次，请继续前行！
Effect :
- 1.build 引入 ：
compile 'com.android.support:design:25.3.1'
- 2.BottomNavigationView控件引用
- 3.对应第二步的‘app:menu="@menu/first_menu"’属性，res - menu - 创建对应的menu文件
- 4.如上文的icon属性使用的非mipmap而是drawable的状态选取属性，在res - drawable创建文件 tab1.xml (如使用的是mipmap的死图片，此条可忽略)
- 5.创建ViewPager承载的Fragment，因内部代码相同，可直接Copy，Tab1Fragment：
package com.example.yongliu.bottomnavigationview;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* author yongliu
* date 2018/2/1.
* desc:
*/
public class Tab1Fragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab_1, null);
return view;
}
}
Xml ：
- 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);
}
}
MainActivity Xml :
所遇问题归纳
注意 ：底部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 < menuView.getChildCount(); i++) {
BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
//noinspection RestrictedApi
item.setShiftingMode(false);
// set once again checked value, so view will be updated
//noinspection RestrictedApi
item.setChecked(item.getItemData().isChecked());
}
} catch (NoSuchFieldException e) {
Log.e("BNVHelper", "Unable to get shift mode field", e);
} catch (IllegalAccessException e) {
Log.e("BNVHelper", "Unable to change value of shift mode", e);
}
}
- 设置BottomNavigationView展示类型
BottomNavigationView mBv = (BottomNavigationView) findViewById(R.id.bv);
//调用上面的类进行设置
BottomNavigationViewHelper.disableShiftMode(mBv);
问题 ：因为使用的是ViewPager ，所以自带滑动效果
需求 ：禁止ViewPager自带滑动效果
解决方式 ：
//禁止ViewPager滑动
// mVp.setOnTouchListener(new View.OnTouchListener() {
// @Override
// public boolean onTouch(View v, MotionEvent event) {
// return true;
// }
// });
需求 ：当选项卡为三项，且中间的选项卡我们用到自己的样式
解决方式 ：
//menu中第二项我们设置icon，title为空
设置 item 之后，使用线性布局，以权重的方式，进行图片替换（关于这一点我没有进行具体校验）。
需求 ：修改底部Icon与text颜色
解决方式 ：
app:itemIconTint="@drawable/colortext"
app:itemTextColor="@drawable/colortext"
colortext ：
有帮助的博文 ：
BottomNavigationView的属性设置
BottomNavigationView + ViewPager + Fragment 实现左右滑动效果
BottomNavigationView 的使用及遇到的坑
Android流行UI布局—底部导航