1、添加依赖
implementation 'com.google.android.material:material:1.0.0'
2、添加控件前,先创建一个menu菜单,底部导航栏的显示是通过menu菜单显示的
然后创建menu资源文件,资源文件名:bottom_nav_menu
这里参照android studio的示例创建的,如果有图片,icon属性可以用自己的图片
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/home"
android:title="@string/title_home" />
<item
android:id="@+id/navigation_call"
android:icon="@drawable/call"
android:title="@string/title_call" />
<item
android:id="@+id/navigation_message"
android:icon="@drawable/message"
android:title="@string/title_message" />
<item
android:id="@+id/navigation_person"
android:icon="@drawable/person"
android:title="@string/person"/>
</menu>
3、在布局文件中添加BottomNavigationView控件
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
以上过程底部导航栏已经完成,运行效果如下
4、下面加入ViewPager和Fragment,布局文件修改如下
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_nav_menu" />
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="409dp"
android:layout_height="673dp"
app:layout_constraintBottom_toTopOf="@+id/bottom_nav_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
再写一个 ViewPager 的适配器(参考别人的),代码如下:
package com.example.bottomnavigation;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import java.util.List;
public class FragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
public FragmentAdapter(List<Fragment> fragments,FragmentManager fm) {
super(fm);
this.fragments=fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
然后,为每一个按钮都新建一个 Fragment 用于切换使用,Fragment 代码很简单,啥都不干,就加载一下布局:
package com.example.bottomnavigation;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class HomeFragment extends Fragment {
public HomeFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_home, container, false);
}
}
对应的布局文件
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/home_fragment" />
</FrameLayout>
同样的方法在创建三个
最后是 MainActivity 的代码,一个是对 ViewPager 滑动事件的监听,滑动一下,BottomNavigationView 也要跟随着切换,还有就是 BottomNavigationView 点击事件的监听,每点击一下按钮,需要跳转到指定的 Fragment 中,代码如下:
package com.example.bottomnavigation;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import android.view.MenuItem;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private BottomNavigationView bottomNavigationView;
private ViewPager viewPager;
private List<Fragment> fragments=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().hide(); //隐藏ActionBar
initView();
}
private void initView() {
bottomNavigationView=findViewById(R.id.bottom_nav_view);
viewPager=findViewById(R.id.view_pager);
fragments.add(new HomeFragment());
fragments.add(new CallFragment());
fragments.add(new MessageFragment());
fragments.add(new PersonFragment());
FragmentAdapter adapter=new FragmentAdapter(fragments,getSupportFragmentManager());
viewPager.setAdapter(adapter);
//BottomNavigationView 点击事件监听
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
int menuId=menuItem.getItemId();
switch (menuId){
case R.id.navigation_home:
viewPager.setCurrentItem(0);
break;
case R.id.navigation_call:
viewPager.setCurrentItem(1);
break;
case R.id.navigation_message:
viewPager.setCurrentItem(2);
break;
case R.id.navigation_person:
viewPager.setCurrentItem(3);
break;
}
return true;
}
});
// ViewPager 滑动事件监听
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//将滑动到的页面对应的 menu 设置为选中状态
bottomNavigationView.getMenu().getItem(position).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}