底部导航栏的效果在很多app中都很常见,比如qq就是底部导航栏+侧滑菜单,比较经典的还有微博、知乎、支付宝等,都是使用了底部导航栏来进行页面的分区,适用于存放功能模块比较独立,关联度不大的页面,看起来也比较美观。
首先创建一个项目,选择底部菜单
然后as会帮你自动生成底部菜单代码,在activity_main.xml中会自动添加一个BottomNavigationView
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
主页自动生成的布局是ConstraintLayout,约束布局,也叫增强型的相对布局,这是官方比较推荐的布局,因为可以减少布局的嵌套。parent是指当前的父布局,layout_constraint方向A_to方向BOf="C布局"属性表示当前布局的方向A和C布局的方向B相邻,如app:layout_constraintBottom_toBottomOf="parent"表示组件的下部和父布局的下部分被约束在一起。在res文件夹下有自动生成的menu文件夹,里面有底部菜单的menu,navigation。如果要修改或者添加菜单的选项值就是在这里修改代码,比如我修改了另外三个选项,并且添加了一个选项
<?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="@mipmap/ic_home_black_50"
android:title="首页" />
<item
android:id="@+id/navigation_sport"
android:icon="@mipmap/ic_sport_black_50"
android:title="运动" />
<item
android:id="@+id/navigation_diet"
android:icon="@mipmap/ic_diet_black_50"
android:title="饮食" />
<item
android:id="@+id/navigation_user"
android:icon="@mipmap/ic_user_black_50"
android:title="我" />
</menu>
我们可以看到现在一共有四个子项item,id是子项的身份标识,icon表示子项的图标,title表示这个子项底部显示的文本。主活动MainActivity中会对菜单选项的选择生成监听事件
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
mTextMessage.setText("home");
return true;
case R.id.navigation_sport:
mTextMessage.setText("sport");
return true;
case R.id.navigation_diet:
mTextMessage.setText("diet");
return true;
case R.id.navigation_user:
mTextMessage.setText("user");
return true;
}
return false;
}
};
表示切换选择到不同选项时主页的mTextMessage显示对应的选项信息提示,到这里BottomNavigationView的主要代码就看完了,接下来新建四个Fragment(你有几个选项就建几个fragment,每一个fragment对应一个菜单选项的所显示的页面)。
首先在主页的layout中添加一个ViewPager,
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
//这里添加ViewPager,作为选项卡上面主页的显示
<android.support.v4.view.ViewPager
android:id="@+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/navigation"
app:layout_constraintTop_toTopOf="parent">
</android.support.v4.view.ViewPager>
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
</android.support.constraint.ConstraintLayout>
然后新建四个fragment和对应的布局,
每一个fragment继承自Fragment,然后重写onCreate方法和onCreateView方法,Fragment中onCreate类似于Activity.onCreate,在其中可初始化除了view之外的一切,而组件view的初始化等主要在onCreateView中完成,是创建该fragment对应的视图,且其中需要创建自己的视图并返回给调用者。例如HomeFragment对应的class代码如下
package s.wd.myapplication.fragments;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import s.wd.myapplication.R;
public class HomeFragment extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
@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);
}
}
对应的layout如下
<?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=".fragments.HomeFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/hello_blank_fragment" />
</FrameLayout>
其他选项的布局也类似,可以参考这一篇在fragment的生命周期中进行一些优化添加链接描述 准备好了四个fragment之后在MainActivity中对各组件实例化,再将四个Fragment装入我们的PagerAdapter适配器,修改BottomNavigationView的监听事件,使ViewPager显示切换的对应fragment页面
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
mViewPager.setCurrentItem(0);
return true;
case R.id.navigation_sport:
mViewPager.setCurrentItem(1);
return true;
case R.id.navigation_diet:
mViewPager.setCurrentItem(2);
return true;
case R.id.navigation_user:
mViewPager.setCurrentItem(3);
return true;
}
return false;
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager=(ViewPager) findViewById(R.id.mViewPager);//获取到ViewPager
final BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
//ViewPager的监听
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
bottomNavigationView.getMenu().getItem(position).setChecked(true);
//写滑动页面后做的事,使每一个fragmen与一个page相对应
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
//Fragment列表,将fragment放入列表中,放入mPagerAdapter
final ArrayList<Fragment> fgLists=new ArrayList<>(4);
fgLists.add(new HomeFragment());
fgLists.add(new SportFragment());
fgLists.add(new DietFragment());
fgLists.add(new UserFragment());
FragmentPagerAdapter mPagerAdapter=new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return fgLists.get(position);
}
@Override
public int getCount() {
return fgLists.size();
}
};
mViewPager.setAdapter(mPagerAdapter);
mViewPager.setOffscreenPageLimit(3);
}
viewpager会默认预加载下一页界面的,setOffscreenPageLimit()方法是用来设置预加载页面数量,默认值为1,在你显示了一页的时候滑动,会预先加载下一个,这样的话在你移动前就已经加载了下一个界面,移动的时候就可以看到已经加载的界面了。
到这里就实现了一个简单的底部导航栏啦,既可以滑动又可以点击选项来切换页面,效果比较粗糙,大致如下