使用BottomNavigationView做底部工具栏,使用ViewPager做页面切换,使用Fragment完成每个页面的逻辑。

效果图如下:

  • 首先是activity_main.xml代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="com.zhangda.meituan.activity.MainActivity"> <android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:menu="@menu/navigation" /> <android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/navigation"/> </RelativeLayout>

navigation.xml代码

<?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/ic_home_24dp"
android:title="@string/title_home"/> <item
android:id="@+id/navigation_near"
android:icon="@drawable/ic_near_24dp"
android:title="@string/title_near"/> <item
android:id="@+id/navigation_go"
android:icon="@drawable/ic_go_24dp"
android:title="@string/title_go"/> <item
android:id="@+id/navigation_order"
android:icon="@drawable/ic_order_24dp"
android:title="@string/title_order"/> <item
android:id="@+id/navigation_mine"
android:icon="@drawable/ic_mine_24dp"
android:title="@string/title_mine"/> </menu>
  • MainActivity代码
    private ViewPager viewPager;
private MenuItem menuItem;
private BottomNavigationView bottomNavigationView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPager); bottomNavigationView = (BottomNavigationView) findViewById(R.id.navigation);
BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);
bottomNavigationView.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener); viewPager.addOnPageChangeListener(mViewPagerOnPageChangeListener);
//禁止ViewPager滑动
viewPager.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return true;
}
});
setupViewPager(viewPager);
}
private ViewPager.OnPageChangeListener mViewPagerOnPageChangeListener
= 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 {
bottomNavigationView.getMenu().getItem(0).setChecked(false);
}
menuItem = bottomNavigationView.getMenu().getItem(position);
menuItem.setChecked(true);
} @Override
public void onPageScrollStateChanged(int state) { }
};
private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() { @Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
viewPager.setCurrentItem(0);
break;
case R.id.navigation_near:
viewPager.setCurrentItem(1);
break;
case R.id.navigation_go:
viewPager.setCurrentItem(2);
break;
case R.id.navigation_order:
viewPager.setCurrentItem(3);
break;
case R.id.navigation_mine:
viewPager.setCurrentItem(4);
break;
}
return false;
}
}; private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFragment(FragmentHome.newInstance());
adapter.addFragment(FragmentNear.newInstance());
adapter.addFragment(FragmentGo.newInstance());
adapter.addFragment(FragmentOrder.newInstance());
adapter.addFragment(FragmentMine.newInstance());
viewPager.setAdapter(adapter);
}
  • ViewPagerAdapter代码
public class ViewPagerAdapter extends FragmentPagerAdapter {

    private final List<Fragment> mFragmentList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
super(manager);
} @Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
} @Override
public int getCount() {
return mFragmentList.size();
} public void addFragment(Fragment fragment) {
mFragmentList.add(fragment);
} }

fragment代码就不再赘述了,几个tab页面,对应几个fragment,对应几个布局,各自写逻辑即可。

  • 需要特殊说明的是,BottomNavigationView组件当超过三个tab元素时,显示不太美好,这块需要特殊处理一下,其中在MainActivity中需要加入这句代码:
BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

BottomNavigationViewHelper代码如下:

public class BottomNavigationViewHelper {

    @SuppressLint("RestrictedApi")
public static void disableShiftMode(BottomNavigationView navigationView) { BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);
Field shiftingMode = null;
try {
shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
shiftingMode.setAccessible(true);
shiftingMode.setBoolean(menuView, false);
shiftingMode.setAccessible(false);
for (int i = 0; i < menuView.getChildCount(); i++) {
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);
itemView.setShiftingMode(false);
itemView.setChecked(itemView.getItemData().isChecked());
}
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
}
}

如果想要改变底部工具栏的选中颜色,改变color.xml中colorPrimary的值即可。

  • 另外,本次我使用vector图标,也就是矢量图标,底部工具栏的图表会随着手机分辨率自动调整,增加了分辨率的适应性。图片可以使用android studio自带的,也可以带入svg图片,下面举例一个:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFF"
android:strokeColor="#E8E8E8"
android:strokeWidth="0.2"
android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z"/>
</vector>

转载于:https://my.oschina.net/u/1011854/blog/1575116

使用BottomNavigationView+ViewPager+Fragment的底部导航栏的更多相关文章

  1. [置顶] xamarin android Fragment实现底部导航栏

    前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment  Xamarin Android Fragment的两种加载方式.下面的这个例子介绍xamarin ...

  2. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  3. Android学习笔记- Fragment实例 底部导航栏的实现

    1.要实现的效果图以及工程目录结构: 先看看效果图吧: 接着看看我们的工程的目录结构: 2.实现流程: Step 1:写下底部选项的一些资源文件 我们从图上可以看到,我们底部的每一项点击的时候都有不同 ...

  4. Android之RadioGroup+ViewPager制作的底部导航栏

    在日常开发中我们常常会用到类似微信或者QQ的底部导航.实现这样的效果有多种,今天就为大家介绍一种实现简单,可控性好的底部导航的实现方法. 首先创建activity_main.xml布局文件,里面主要由 ...

  5. 使用fragment添加底部导航栏

    切记:fragment一定要放在framlayout中,不然不会被替换完全(就是切换之后原来的fagment可能还会存在) main.xml <LinearLayout xmlns:androi ...

  6. Android底部导航栏创建——ViewPager + RadioGroup

    原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html Android底部导航栏有多种实现方式,本文详解其中的ViewPager ...

  7. Android_ViewPager+Fragment实现页面滑动和底部导航栏

    1.Xml中底部导航栏由一个RadioGroup组成,其上是ViewPager. <?xml version="1.0" encoding="utf-8" ...

  8. 二、Fragment+RadioButton实现底部导航栏

    在App中经常看到这样的tab底部导航栏   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activi ...

  9. AndroidStudio制作底部导航栏以及用Fragment实现切换功能

    前言 大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...

随机推荐

  1. 命令行工具nslookup查域名DNS服务器

    在使用的操作系统里进入终端, 1.输入 nslookup 回车 2.输入 set type=ns 回车 3.输入域名(不带WWW的),如:baidu.com 回车 操作过程如下, > set t ...

  2. "着重内容"组件:<strong> —— 快应用组件库H-UI

     <import name="strong" src="../Common/ui/h-ui/text/c_tag_b"></import&g ...

  3. Django模拟ASP.NET MVC 自动匹配路由(转载)

    项目结构 操作步骤 1.创建项目结构如上图 2.在myapp目录下创建urls文件,代码: from django.conf.urls import patterns, url from untitl ...

  4. python3(二十一) pip

    先确保安装了windows的Python的pip 出现上图说明安装了,命令未找到则没有安装 安装一个图形处理的第三方库 Anaconda安装第三方库 我们经常需要用到很多第三方库,如MySQL驱动程序 ...

  5. HBase-2.2.3源码编译-Windows版

    源码环境一览 windows: 7 64Bit Java: 1.8.0_131 Maven:3.3.9 Git:2.24.0.windows.1 HBase:2.2.3 Hadoop:2.8.5 下载 ...

  6. 【半监督学习】MixMatch、UDA、ReMixMatch、FixMatch

    半监督学习(Semi-Supervised Learning,SSL)的 SOTA 一次次被 Google 刷新,从 MixMatch 开始,到同期的 UDA.ReMixMatch,再到 2020 年 ...

  7. [总结]最近公共祖先(倍增求LCA)

    目录 一.定义 二.LCA的实现流程 1. 预处理 2. 计算LCA 三.例题 例1:P3379 [模板]最近公共祖先(LCA) 四.树上差分 1. 边差分 2. 点差分 3. 例题 一.定义 给定一 ...

  8. Docker+Cmd+Cli+Git之前端工程化纪要(二)自定义类package.json文件管理模块包

    全新升级后的FE工作流为:使用FE命令包进行项目的初始化,其中包括项目初始化.拉取脚手架.私库拉取模块包或后期扩展的CI/CD等与本公司工作流相关的操作. 出现的问题如下: 脚手架工具的包依赖信息存放 ...

  9. js多线程的实现

    我们都知道JS是一种单线程语言,即使是一些异步的事件也是在JS的主线程上运行的(具体是怎么运行的,可以看我另一篇博客JS代码运行机制).像setTimeout.ajax的异步请求,或者是dom元素的一 ...

  10. 2016NOIP普及组T2回文日期

    回文日期 分类:枚举,函数 [题目描述] 日常生活中,通过年.月.日这三个要素可以表示出一个唯一确定的日期. 牛牛习惯用8位数字表示一个日期,其中,前4位代表年份,接下来2位代表月份,最后2位代表日期 ...