底部导航栏

我就是我 2023-08-17 17:09 69阅读 0赞

1.添加相应的文件

2.分别加入4个Fragment以及布局文件

3.MianActivity的引用

4.MainActivity的布局文件

添加相应的文件：

a.先引入导航栏的依赖

implementation 'com.android.support:design:+'

b.准备导航栏的图片素材（我这里的是4个主页，我准备了8个，4个为true的，4个为false的）

![1264306-20190925100628274-565954564.png][]![1264306-20190925100638935-1940676211.png][]![1264306-20190925100649246-29891676.png][]![1264306-20190925100659002-1663805673.png][]![1264306-20190925100717665-1148086414.png][]![1264306-20190925100733497-909210565.png][]![1264306-20190925100745494-1282875851.png][]![1264306-20190925100819094-233668271.png][]

c.创建一个menu文件，然后再里面创建一个Menu resource file文件

1 <?xml version="1.0" encoding="utf-8"?>
     2 <menu xmlns:android="http://schemas.android.com/apk/res/android"
     3     xmlns:app="http://schemas.android.com/apk/res-auto">
     4     <item
     5         android:id="@+id/menu_home"
     6         android:title="首页"
     7         app:showAsAction="ifRoom"
     8         android:enabled="true"
     9         android:icon="@drawable/home_t"/>
    10     <item
    11         android:id="@+id/menu_classification"
    12         android:title="分类"
    13         app:showAsAction="ifRoom"
    14         android:enabled="true"
    15         android:icon="@drawable/classification_f"/>
    16     <item
    17         android:id="@+id/menu_shoppingcart"
    18         android:title="购物车"
    19         app:showAsAction="ifRoom"
    20         android:enabled="true"
    21         android:icon="@drawable/shoppingcart_f"/>
    22     <item
    23         android:id="@+id/menu_personal"
    24         android:title="我的"
    25         app:showAsAction="ifRoom"
    26         android:enabled="true"
    27         android:icon="@drawable/personal_f"/>
    28 </menu>

c.在drawable中创建一个bottom\_navigtion\_item\_selector.xml文件

1 <?xml version="1.0" encoding="utf-8"?>
    2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    3 
    4     <item android:color="#157AE2" android:state_checked="true" />
    5     <item android:color="#CCCCCC" android:state_checked="false" />
    6 </selector>

d.创建一个绑定显示未选中导航栏描述字的类

1 public class BottomNavigationViewHelper {
     2     @SuppressLint("RestrictedApi")
     3     public static void disableShiftMode(BottomNavigationView view) {
     4         BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
     5         try {
     6             Field shiftingMode = menuView.getClass().getDeclaredField("labelVisibilityMode");
     7             shiftingMode.setAccessible(true);
     8             shiftingMode.setInt(menuView, 1);//labelVisibilityMode
     9 //            shiftingMode.setBoolean(menuView, false);//mShiftingMode
    10             shiftingMode.setAccessible(false);
    11             for (int i = 0; i < menuView.getChildCount(); i++) {
    12                 BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
    13                 item.setShifting(false);
    14                 item.setChecked(item.getItemData().isChecked());
    15             }
    16         } catch (NoSuchFieldException e) {
    17             Log.e("BNVHelper", "Unable to get shift mode field", e);
    18         } catch (IllegalAccessException e) {
    19             Log.e("BNVHelper", "Unable to change value of shift mode", e);
    20         }
    21     }
    22 }

分别加入4个Fragment以及布局文件（这里我发其中的一个碎片的代码）

1 public class ClassificationFragment extends Fragment {
     2     private View view;
     3     @Nullable
     4     @Override
     5     public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
     6         view = inflater.inflate(R.layout.fragment_classification,container,false);
     7 
     8         return view;
     9     }
    10 }

MianActivity的引用（直接贴出MainActivity的代码）

1 public class MainActivity extends AppCompatActivity {
     2     private BottomNavigationView bottomNavigationView;
     3     private int lastIndex;
     4     List<Fragment> mFragment;
     5     private Toolbar toolbar;
     6     @Override
     7     protected void onCreate(Bundle savedInstanceState) {
     8         super.onCreate(savedInstanceState);
     9         setContentView(R.layout.activity_main);
    10         initDate();
    11         initBottomNavigation();
    12     }
    13 
    14     private void initDate(){
    15         mFragment = new ArrayList<>();
    16         mFragment.add(new HomeFragment());
    17         mFragment.add(new ClassificationFragment());
    18         mFragment.add(new ShoppingCartFragment());
    19         mFragment.add(new PersonalFragment());
    20         setFragmentPosition(0);
    21     }
    22 
    23     private void initBottomNavigation(){
    24         bottomNavigationView = findViewById(R.id.bv_bottomNavigation);
    25         bottomNavigationView.setItemIconTintList(null); //取消图片默认颜色
    26         BottomNavigationViewHelper.disableShiftMode(bottomNavigationView); //显示未选中导航栏的描述字
    27         bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    28             @Override
    29             public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
    30                 resetToDefaultIcon();//重置到默认不选中图片
    31                 switch (menuItem.getItemId()){
    32                     case R.id.menu_home:
    33                         menuItem.setIcon(R.drawable.home_t); //设置选中的图片
    34                         setFragmentPosition(0); //选中的碎片
    35                         break;
    36                     case R.id.menu_classification:
    37                         menuItem.setIcon(R.drawable.classification_t); //设置选中的图片
    38                         setFragmentPosition(1);
    39                         break;
    40                     case R.id.menu_shoppingcart:
    41                         menuItem.setIcon(R.drawable.shoppingcart_t); //设置选中的图片
    42                         setFragmentPosition(2);
    43                         break;
    44                     case R.id.menu_personal:
    45                         menuItem.setIcon(R.drawable.personal_t); //设置选中的图片
    46                         setFragmentPosition(3);
    47                         break;
    48                         default:break;
    49                 }
    50                 return true;
    51             }
    52         });
    53     }
    54 
    55     //重置图标
    56     private void resetToDefaultIcon() {
    57         MenuItem home =  bottomNavigationView.getMenu().findItem(R.id.menu_home);
    58         home.setIcon(R.drawable.home_f);
    59         MenuItem classification =  bottomNavigationView.getMenu().findItem(R.id.menu_classification);
    60         classification.setIcon(R.drawable.classification_f);
    61         MenuItem shoppingcart =  bottomNavigationView.getMenu().findItem(R.id.menu_shoppingcart);
    62         shoppingcart.setIcon(R.drawable.shoppingcart_f);
    63         MenuItem personal =  bottomNavigationView.getMenu().findItem(R.id.menu_personal);
    64         personal.setIcon(R.drawable.personal_f);
    65 
    66     }
    67 
    68     //设置选中的Fragment
    69     private void setFragmentPosition(int position){
    70         FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
    71         Fragment currentFragment = mFragment.get(position);
    72         Fragment lastFragment = mFragment.get(lastIndex);
    73         lastIndex = position;
    74         fragmentTransaction.hide(lastFragment);
    75         if(!currentFragment.isAdded()){
    76             getSupportFragmentManager().beginTransaction().remove(currentFragment).commit();
    77             fragmentTransaction.add(R.id.ll_frameLayout,currentFragment);
    78         }
    79         fragmentTransaction.show(currentFragment);
    80         fragmentTransaction.commitAllowingStateLoss();
    81     }
    82 }

MainActivity布局文件的代码

1 <?xml version="1.0" encoding="utf-8"?>
     2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     3     xmlns:app="http://schemas.android.com/apk/res-auto"
     4     xmlns:tools="http://schemas.android.com/tools"
     5     android:layout_width="match_parent"
     6     android:layout_height="match_parent">
     7 
     8     <FrameLayout
     9         android:id="@+id/ll_frameLayout"
    10         android:layout_width="match_parent"
    11         android:layout_height="match_parent"
    12         android:layout_above="@id/bv_bottomNavigation" />
    13 
    14     <com.google.android.material.bottomnavigation.BottomNavigationView
    15         android:id="@+id/bv_bottomNavigation"
    16         android:layout_width="match_parent"
    17         android:layout_height="wrap_content"
    18         android:layout_alignParentBottom="true"
    19         android:background="@color/colorWhite"
    20         app:itemIconTint="@drawable/bottom_navigation_item_selector"
    21         app:itemTextColor="@drawable/bottom_navigation_item_title"
    22         app:menu="@menu/main_bottom_navigation">
    23 
    24     </com.google.android.material.bottomnavigation.BottomNavigationView>
    25 </RelativeLayout>

转载于:https://www.cnblogs.com/Mr-Deng/p/11583336.html

[1264306-20190925100628274-565954564.png]: https://img2018.cnblogs.com/blog/1264306/201909/1264306-20190925100628274-565954564.png
[1264306-20190925100638935-1940676211.png]: https://img2018.cnblogs.com/blog/1264306/201909/1264306-20190925100638935-1940676211.png
[1264306-20190925100649246-29891676.png]: https://img2018.cnblogs.com/blog/1264306/201909/1264306-20190925100649246-29891676.png
[1264306-20190925100659002-1663805673.png]: https://img2018.cnblogs.com/blog/1264306/201909/1264306-20190925100659002-1663805673.png
[1264306-20190925100717665-1148086414.png]: https://img2018.cnblogs.com/blog/1264306/201909/1264306-20190925100717665-1148086414.png
[1264306-20190925100733497-909210565.png]: https://img2018.cnblogs.com/blog/1264306/201909/1264306-20190925100733497-909210565.png
[1264306-20190925100745494-1282875851.png]: https://img2018.cnblogs.com/blog/1264306/201909/1264306-20190925100745494-1282875851.png
[1264306-20190925100819094-233668271.png]: /images/20230808/a7cba0856b7e4d6497fba170bbd6ea87.png