BottomNavigationView是Google推出的底部导航栏组件,在没有这些底部导航组件之前,Android开发者多使用的是RadioGroup,在上一个项目开发中我们使用了Google的BottomNaviationView与ViewPager相结合搭建了UI框架,现项目已经完成,总结如下:

使用BottomNaviationView需要添加依赖库:

在app moudle 里面的build.gradle文件中,dependencies节点下面添加如下依赖:

compile 'com.android.support:design:25.3.0'

添加完依赖我们便可以在布局文件中使用了,activity_main.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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.qj.simpleuiframe.MainActivity"> <!--状态栏-->
<View
android:layout_width="match_parent"
android:layout_height="24dp"
android:background="@color/color661BB5D7"/> <!--标题栏-->
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@color/color1BB5D7"
android:gravity="center"
android:textColor="@color/colorFFFFFF"
android:textSize="20sp"/> <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/> <!--底部导航栏-->
<android.support.design.widget.BottomNavigationView
android:id="@+id/bnv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:itemIconTint="@drawable/tab_text_color_selector"
app:itemTextColor="@drawable/tab_text_color_selector"
app:menu="@menu/navigation"/>
</LinearLayout>

先说说底部导航栏BottomNaviationView:
app:menu="@menu/navigation" 这句说明:在我们的res文件夹下面有一个menu文件夹,menu文件夹里面有一个navigation文件,里面是关于我们底部导航栏的信息

我们来看看这个navigation.xml文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item
android:id="@+id/tab_one"
android:icon="@drawable/tab_one_selector"
android:title="@string/tab_one"/> <item
android:id="@+id/tab_two"
android:icon="@drawable/tab_two_selector"
android:title="@string/tab_two"/> <item
android:id="@+id/tab_three"
android:icon="@drawable/tab_three_selector"
android:title="@string/tab_three"/>
</menu>

我们看到里面总共有三个导航按钮,我们以第一个为例做一下简单的说明:
id和title属性很简单,我们看一下icon属性,我们平时的底部导航按钮都是上图下文形式的(大多情况是这样),下面的文字是由我们的title属性指定的,上面的图片则是由我们这里的icon属性所决定的,我们看一看这个很简单的tab_one_selector选择器:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/commend_select" android:state_pressed="true"/>
<item android:drawable="@mipmap/commend_select" android:state_selected="true"/>
<item android:drawable="@mipmap/commend"/>
</selector>

到这app:menu="@menu/navigation"  就说完了
下面说一下

app:itemIconTint="@drawable/tab_text_color_selector"
app:itemTextColor="@drawable/tab_text_color_selector"

app:itemIconTint是设置底部导航按钮图标颜色的属性

app:itemTextColor是设置底部导航按钮文字颜色的属性

由于大多情况下图标和文件颜色都是相同的(为了统一风格样式),所以它们两个我用的是同一个颜色选择器

说到这BottomNaviationView这个控件就说完了,下面解释一下activity_main.xml文件中的状态栏控件,在布局中写状态栏的原因是因为我们的应用主题是没有ActionBar并且状态栏是透明的,所以状态栏和标题栏需要我们自己来写(也是为了满足用户定义不同样式的状态栏和标题栏的要求)

下面看一下appTheme这一主题:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- 全屏、无标题栏、状态栏透明 -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>

可以看到AppTheme的父主题是没有ActionBar的,而且我们还设置了它的的windowTranslucentStatus为true,即状态栏透明
这样我们的Activity就完全全屏了,没了状态栏和标题栏,我们就可以自己定义状态栏和标题栏了!
到这里activity_main.xml文件就说完了,下面看一下MainActivity.Java中的代码

public class MainActivity extends FragmentActivity implements BottomNavigationView.OnNavigationItemSelectedListener, ViewPager.OnPageChangeListener {  

    private ViewPager mViewPager;
private BottomNavigationView mBottomNavigationView;
private TextView mTitle; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
initListener();
} private void initView() {
mTitle = (TextView) findViewById(R.id.title);
mBottomNavigationView = (BottomNavigationView) findViewById(R.id.bnv);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
} private void initData() {
} private void initListener() {
mBottomNavigationView.setOnNavigationItemSelectedListener(this);
//系统默认选中第一个,但是系统选中第一个不执行onNavigationItemSelected(MenuItem)方法,如果要求刚进入页面就执行clickTabOne()方法,则手动调用选中第一个
mBottomNavigationView.setSelectedItemId(R.id.tab_one);//根据具体情况调用
mViewPager.addOnPageChangeListener(this);
//为viewpager设置adapter
mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
} @Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
//BottomNaviationView和ViewPager联动,当BottomNaviationView的某个tab按钮被选中了,同时设置ViewPager对应的页面被选中
int itemId = item.getItemId();
switch (itemId) {
case R.id.tab_one:
clickTabOne();
return true;//返回true,否则tab按钮不变色,未被选中
case R.id.tab_two:
clickTabTwo();
return true;
case R.id.tab_three:
clickTabThree();
return true; default:
break;
}
return false;
} @Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
} @Override
public void onPageSelected(int position) {
//ViewPager和BottomNaviationView联动,当ViewPager的某个页面被选中了,同时设置BottomNaviationView对应的tab按钮被选中
switch (position) {
case 0:
mBottomNavigationView.setSelectedItemId(R.id.tab_one);
break;
case 1:
mBottomNavigationView.setSelectedItemId(R.id.tab_two);
break;
case 2:
mBottomNavigationView.setSelectedItemId(R.id.tab_three);
break; default:
break;
}
} @Override
public void onPageScrollStateChanged(int state) {
} private void clickTabOne() {
//为防止隔页切换时,滑过中间页面的问题,去除页面切换缓慢滑动的动画效果
mViewPager.setCurrentItem(0, false);
mTitle.setText("One");
} private void clickTabTwo() {
mViewPager.setCurrentItem(1, false);
mTitle.setText("Two");
} private void clickTabThree() {
mViewPager.setCurrentItem(2, false);
mTitle.setText("Three");
}
}

代码中都有详细的注释,这里就不多说了,这里说一下ViewPager设置适配器,代码中创建了ViewPagerAdapter对象

public class ViewPagerAdapter extends FragmentPagerAdapter {
//由于页面已经固定,故这里把Adapter需要的fragment提前创建
private Fragment[] mFragments = new Fragment[]{new OneFragment(), new TwoFragment(), new ThreeFragment()}; public ViewPagerAdapter(FragmentManager fm) {
super(fm);
} @Override
public Fragment getItem(int position) {
return mFragments[position];
} @Override
public int getCount() {
return 3;
}
}

BottomNavigationView结合ViewPager的更多相关文章

  1. Android 底部按钮BottomNavigationView + Fragment + viewPager 的使用(一)

    实现的效果,左右滑动,底部栏跟着滑动,中间加的是分帧的页面        上代码:主页面activity_main.xml <?xml version="1.0" encod ...

  2. android: 结合BottomNavigationView、ViewPager和Fragment 实现左右滑动的效果

    主界面:MainActivity package com.yongdaimi.android.androidapitest; import android.os.Bundle; import andr ...

  3. 使用BottomNavigationView+ViewPager+Fragment的底部导航栏

    2019独角兽企业重金招聘Python工程师标准>>> 使用BottomNavigationView做底部工具栏,使用ViewPager做页面切换,使用Fragment完成每个页面的 ...

  4. 第三十七篇-BottomNavigationVIew底部导航的使用

    效果图: 添加底部导航和viewpaper 设置底部导航在底部 app:layout_constraintBottom_toBottomOf="parent" 新建四个fragme ...

  5. Android 底部按钮BottomNavigationView + Fragment 的使用(二)

    这里来试验BottomNavigationView + Fragment 底部按钮通过点击底部选项,实现中间的Fragment进行页面的切换. 使用BottomNavigationView 控件,实现 ...

  6. 014 Android BottomNavigationView 底部导航组件使用

    1.导入BottomNavigationView组件(点击下载按钮,安装组件) 2.新建菜单 (1)app--->src-->main--->res ,选中res目录右击new--- ...

  7. android BottomNavigationView 底部显示3个以上的item

    你现在可以用app:labelVisibilityMode="[labeled, unlabeled, selected, auto] labeled 所有的标签都是可见的. unlabel ...

  8. 踩石行动:ViewPager无限轮播的坑

    2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...

  9. Android ViewPager打造3D画廊

    本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...

随机推荐

  1. WebGIS简单实现一个区域炫酷的3D立体地图效果

    1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...

  2. java.lang.Exception: The server rejected the connection: None of the protocols were accepted

    solution for this is from comment for https://issues.jenkins-ci.org/browse/JENKINS-29616. The follow ...

  3. OpenERP中自定义模块卸载失败,Postgres数据库删不掉数据库,OpenERP登录不了一直在加载的问题解决方案。

    解决方案也就是删除掉不用的数据库,OE会提示当前有N个Session不让Drop数据库. 对于Postgres 9.1 版本,在pgAdmin中查询以下语句: SELECT pg_terminate_ ...

  4. winform FormBordStyle=none 及 wpf FormBordStyle=none 的鼠标点击移动问题

    winform: //bool formMove = false;//窗体是否移动 //Point formPoint;//记录窗体的位置 private void Login_MouseDown(o ...

  5. spring boot快速入门 7: 使用aop处理请求

    样例:登陆拦截(aop简单样例) 第一步:在pom 文件中加入aop依赖 <!-- spring aop --> <dependency> <groupId>org ...

  6. Linux 进程以及多线程的支持

    1.最初内核并没有实现对多线程的支持,2.6之后开始以轻量级进程的方式对多线程进行支持(轻量级线程组). a.在2.6 之前,如果需要实现多线程,只能在用户态下实现,用户程序自己控制线程的切换, 实际 ...

  7. WPF 自定义NotifyPropertyChanged

    该工具类实现INotifyPropertyChanged接口 /// <summary> /// 实现了属性更改通知的基类 /// </summary> public clas ...

  8. java数据结构---------插入排序的实现

    插入排序分为直接插入排序和希尔排序 插入排序 实现方法 //插入排序,按从小到大的顺序 public static void insertSort(int[] array){ int j,temp = ...

  9. R语言改变大小写 toupper()和 tolower()函数

    这些函数改变字符串的字符的大小写. 语法 toupper()和 tolower()函数的基本语法为: toupper(x) tolower(x) 以下是所使用的参数的说明: x - 向量输入. 示例 ...

  10. Delphi 通得进程ID获取主窗口句柄

    只知道进程ID,获取主窗口句柄的方法如下: 通过EnumWindows枚举所有窗口 使用GetWindowThreadProcessID,通过窗口句柄获取进程ID 比便获取的进程ID与当前已知的进程I ...