这里写目录标题
-
- 介绍
- 导入
- 使用
- 总结
介绍
BottomNavigationView是Google的material下的用于底部导航组件。总的来说就是方便、好用
Blog如有不对,敬请斧正
喜欢Android的可以关注我,日常更新Android干货
看都看到这了,加个关注叭!
建议收藏,防止找不到,哈哈
导入
implementation 'com.google.android.material:material:1.2.1'
(1.2.1目前是最新版)
使用
1、创建主页面加入BottomNavigationView
activity_nav_bottom.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<FrameLayout
android:id="@+id/home_fragment"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="2dp"
android:layout_weight="1"
android:background="#ffffff" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_bottom"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#ffffff"
app:menu="@menu/menu_nav"
/>
</LinearLayout>
2、为BottomNavigationView创建导航用的菜单项
设置其 id 、title、icon属性
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/menu_one"
android:title="一"
android:icon="@drawable/ic_find"
/>
<item
android:id="@+id/menu_two"
android:title="二"
android:icon="@drawable/ic_video"
/>
<item
android:id="@+id/menu_three"
android:title="三"
android:icon="@drawable/ic_my"
/>
<item
android:id="@+id/menu_four"
android:title="四"
android:icon="@drawable/ic_accunt"
/>
</menu>
3、为BottomNavigationView中的菜单项创建Fragment及其布局
我一共创建了4个布局,简单演示:
package com.example.myapplication.nav_bottom1;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import com.example.myapplication.R;
public class fragment_one extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_one,container,false);
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="50sp"
android:text="ONE"
/>
</LinearLayout>
4、为BottomNavigationView中的菜单项设置监听
(1)实现BottomNavigationView.OnNavigationItemSelectedListener
(2)、利用FragmentTransaction切换不同的Fragment
package com.example.myapplication.nav_bottom1;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.MenuItem;
import com.example.myapplication.R;
import com.google.android.material.bottomnavigation.BottomNavigationView;
public class nav_bottom extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {
private BottomNavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_nav_bottom);
navigationView = findViewById(R.id.nav_bottom);
navigationView.setOnNavigationItemSelectedListener(this);
navigationView.setSelectedItemId(R.id.menu_one);
}
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
switch (item.getItemId()){
case R.id.menu_one:
fragmentTransaction.replace(R.id.home_fragment, new fragment_one()).commit();
return true;
case R.id.menu_two:
fragmentTransaction.replace(R.id.home_fragment,new fragment_two()).commit();
return true;
case R.id.menu_three:
fragmentTransaction.replace(R.id.home_fragment,new fragment_three()).commit();
return true;
case R.id.menu_four:
fragmentTransaction.replace(R.id.home_fragment,new fragment_four()).commit();
return true;
}
return true;
}
}
总结
BottomNavigationView是比较流行和官方推荐的组件,还有很多属性,用起来也是非常灵活的