1. 创建一个新的项目NavigationTest
2. 在app文件夹下的build.gradle中添加BottomNavigationView所需要的依赖库
implementation 'com.android.support:design:28.0.0' //底部导航栏
3. 在res文件夹下面新建menu文件夹,并新建bottom_navigation_view.xml作为导航栏的菜单文件,内含导航栏的选项图标和选项文字。将图标资源放入drawable文件夹下
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/item_bottom_navigation_view_home" android:icon="@drawable/home" android:title="首页" /> <item android:id="@+id/item_bottom_navigation_view_pt_job" android:icon="@drawable/pt_job" android:title="兼职" /> <item android:id="@+id/item_bottom_navigation_view_message" android:icon="@drawable/message" android:title="消息" /> <item android:id="@+id/item_bottom_navigation_view_personal" android:icon="@drawable/personal" android:title="我的" /> </menu>
4. 在values/colors.xml添加选中与未选中的颜色
<!--底部导航栏颜色--> <color name="bottom_navigation_view_checked">#1874CD</color> <color name="bottom_navigation_view_unchecked">#7EC0EE</color>
5. 在drawable文件夹下新建bottom_navigation_view_selector.xml作为底部导航栏样式的配置文件。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="@color/bottom_navigation_view_checked" android:state_checked="true" /> <item android:color="@color/bottom_navigation_view_unchecked" android:state_checked="false" /> </selector>
6. 修改主函数的布局文件activity_main.xml BottomNavigationView在底部,ViewPager填满上方剩余部分。
<?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:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/activity_main_view_pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> </android.support.v4.view.ViewPager> <android.support.design.widget.BottomNavigationView android:id="@+id/activity_main_bottom_navigation_view" android:layout_width="match_parent" android:layout_height="52dp" app:itemBackground="@null" app:itemIconTint="@drawable/bottom_navigation_view_selector" app:itemTextColor="@drawable/bottom_navigation_view_selector" app:labelVisibilityMode="labeled" app:menu="@menu/bottom_navigation_view"> <!--app:labelVisibilityMode="labeled"该属性固定住图标与文字, 具体效果参见上方效果图展示--> </android.support.design.widget.BottomNavigationView> </LinearLayout>
7. 准备填充ViewPager的Fragment
A. 在values/strings.xml字符串资源文件中添加以下字符串
<string name="s_bottom_navigation_view_home">首页</string> <string name="s_bottom_navigation_view_message">消息</string> <string name="s_bottom_navigation_view_personal">我的</string> <string name="s_bottom_navigation_view_pt_job">兼职</string>
B. Fragment的布局文件(以首页Fragment为例)
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:text="@string/s_bottom_navigation_view_home"/> </android.support.constraint.ConstraintLayout>
C. Fragment的Java文件(以首页Fragment为例)
import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class HomeFragment extends Fragment { public static HomeFragment newInstance(){ HomeFragment indexFragment = new HomeFragment(); return indexFragment; } @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_home,container,false); return view; } }
8. 新建ViewPagerAdapterForNav.java 作为ViewPager的适配器
import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import java.util.ArrayList; import java.util.List; public class ViewPagerAdapterForNav extends FragmentStatePagerAdapter { //碎片集合 private List<Fragment> mFragments = new ArrayList<>(); public ViewPagerAdapterForNav(FragmentManager fm) { super(fm); } @Override public int getCount() { if (mFragments == null){ return 0; }else{ return mFragments.size(); } } @Override public Fragment getItem(int i) { return mFragments.get(i); } public void setFragments(List<Fragment> fragments) { this.mFragments = fragments; notifyDataSetChanged(); } }
9. 修改MainActivity.java完成相应功能
import android.support.design.widget.BottomNavigationView; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.MenuItem; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { //碎片集合 List<Fragment> mFragments; //组件 private BottomNavigationView mBottomNavigationView; private ViewPager mViewPager; //适配器 private ViewPagerAdapterForNav mViewPagerAdapterForNav; private MenuItem menuItem; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //隐藏标题栏 android.support.v7.app.ActionBar actionBar = getSupportActionBar(); actionBar.hide(); //实例化组件 initElement(); //初始化碎片集合 initFragments(); //导航栏与ViewPager联动 //给底部导航栏和ViewPager设置监听器 mBottomNavigationView.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { if (menuItem != null) { menuItem.setChecked(false); } else { mBottomNavigationView.getMenu().getItem(0).setChecked(false); } menuItem = mBottomNavigationView.getMenu().getItem(position); menuItem.setChecked(true); } @Override public void onPageScrollStateChanged(int state) { } }); //为ViewPager设置适配器 mViewPagerAdapterForNav = new ViewPagerAdapterForNav(getSupportFragmentManager()); mViewPager.setAdapter(mViewPagerAdapterForNav); mViewPagerAdapterForNav.setFragments(mFragments); } private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { menuItem = item; switch (item.getItemId()) { case R.id.item_bottom_navigation_view_home: mViewPager.setCurrentItem(0); return true; case R.id.item_bottom_navigation_view_pt_job: mViewPager.setCurrentItem(1); return true; case R.id.item_bottom_navigation_view_message: mViewPager.setCurrentItem(2); return true; case R.id.item_bottom_navigation_view_personal: mViewPager.setCurrentItem(3); return true; } return false; } }; private void initElement(){ mBottomNavigationView = (BottomNavigationView)findViewById(R.id.activity_main_bottom_navigation_view); mViewPager = (ViewPager)findViewById(R.id.activity_main_view_pager); } private void initFragments(){ mFragments = new ArrayList<>(); mFragments.add(HomeFragment.newInstance()); mFragments.add(Pt_jobFragment.newInstance()); mFragments.add(MessageFragment.newInstance()); mFragments.add(PersonalFragment.newInstance()); } }