• 底部导航栏是基于Bottom Navigation Bar 插件使用的
  • 这个插件包裹在com.android.support:design:28.0.0,必须引入

1. 设计底部导航栏页面

1.1. 创建必须的文件夹

  • 在res下创建color和menu文件夹

color文件夹: 用于存放导航栏的个性化颜色

menu文件夹: 用于存放导航栏的子项

1.2. 设计主页面

  • 首先设计子项: menu下新建nav_items.xml文件
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"> <item
android:id="@+id/nav_homes"
android:icon="@drawable/ic_home_black_24dp"
android:title="@string/nav_home" />
<item
android:id="@+id/nav_searchs"
android:icon="@drawable/ic_search_black_24dp"
android:title="@string/nav_search" />
<item
android:id="@+id/nav_accounts"
android:icon="@drawable/ic_account_circle_black_24dp"
android:title="@string/nav_account" />
</menu>
  • 设计个性化颜色,color文件夹下新建nav_item_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorWhite" android:state_checked="true"/>
<item android:color="@color/colorWhiteTransparent" android:state_checked="false"/>
</selector>
  • 然后再主页面中引入子项 ,在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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"> <android.support.design.widget.BottomNavigationView
android:id="@+id/main_nav"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
app:itemBackground="@color/colorPrimary"
app:itemIconTint="@color/nav_item_color"
app:itemTextColor="@color/nav_item_color"
app:menu="@menu/nav_items"></android.support.design.widget.BottomNavigationView> <FrameLayout
android:id="@+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/main_nav"> </FrameLayout> </RelativeLayout>

2. 设计逻辑函数

点击每个子项都可以跳转到对应的页面上去

  • 首先创建三个fragment: MainFragment, SearchFragment, AccountFragment
  • 然后再主页面中写逻辑函数
package com.example.myapplication;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.FrameLayout; public class MainActivity extends AppCompatActivity { private BottomNavigationView mMainNav;
private FrameLayout mMainFrame;
private HomeFragment homeFragment;
private SearchFragment searchFragment;
private AccountFragment accountFragment; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); mMainFrame = (FrameLayout)findViewById(R.id.main_frame);
mMainNav = (BottomNavigationView)findViewById(R.id.main_nav); homeFragment = new HomeFragment();
searchFragment = new SearchFragment();
accountFragment = new AccountFragment(); // 设置默认的fragment
setFragment(homeFragment); mMainNav.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) { switch (menuItem.getItemId()){
case R.id.nav_homes:
setFragment(homeFragment);
return true;
case R.id.nav_searchs:
setFragment(searchFragment);
return true;
case R.id.nav_accounts:
setFragment(accountFragment);
return true;
default:
return false;
}
}
});
} // 根据传入的framgment对象,对现在设置新的fragment
private void setFragment(Fragment fragment) { FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction(); fragmentTransaction.replace(R.id.main_frame, fragment); fragmentTransaction.commit(); }
}

3. 项目展示

Android应用-底部导航栏的使用的更多相关文章

  1. Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

  2. Android 修改底部导航栏navigationbar的颜色

    Android 修改底部导航栏navigationbar的颜色 getWindow().setNavigationBarColor(Color.BLUE); //写法一 getWindow().set ...

  3. 【转】Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

  4. Android底部导航栏——FrameLayout + RadioGroup

    原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6285881.html Android底部导航栏有多种实现方式,本文详细介绍FrameLayout ...

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

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

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

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

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

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

  8. Android底部导航栏

    Android底部导航栏 今天简单写了一个底部导航栏,封装了一个库,用法比较简单 效果图 Github地址:https://github.com/kongqw/KqwBottomNavigation ...

  9. Android开源项目——带图标文字的底部导航栏IconTabPageIndicator

    接下来的博客计划是,在<Android官方技术文档翻译>之间会发一些Android开源项目的介绍,直接剩下的几篇Android技术文档发完,然后就是Android开源项目和Gradle翻译 ...

随机推荐

  1. C# Equals

    [C# Equals] 1.Object.Equals() The type of comparison between the current instance and the obj parame ...

  2. 【Todo】Linux进程调度算法学习

    参考这篇文章 http://blog.chinaunix.net/uid-27052262-id-3239260.html Linux支持三种进程调度策略,分别是SCHED_FIFO . SCHED_ ...

  3. 750. Number Of Corner Rectangles四周是点的矩形个数

    [抄题]: Given a grid where each entry is only 0 or 1, find the number of corner rectangles. A corner r ...

  4. HTTP 499状态码 nginx下499错误详解-乾颐堂

    日志记录中HTTP状态码出现499错误有多种情况,我遇到的一种情况是nginx反代到一个永远打不开的后端,就这样了,日志状态记录是499.发送字节数是0. 老是有用户反映网站系统时好时坏,因为线上的产 ...

  5. [SoapUI] 比较两个不同环境下的XML Response, 从外部文件读取允许的偏差值,输出结果到Excel

    import static java.lang.Math.* import java.text.NumberFormat import java.awt.Color import com.eviwar ...

  6. linux查看操作系统版本信息

    linux查看操作系统版本信息  摘自:https://www.cnblogs.com/vaelailai/p/7545166.html 一.linux下如何查看已安装的centos版本信息: 1.L ...

  7. Smarty的基本语法------变量调节器

    (1)首字母大写capitalize示例:{$articleTitle|capitalize}(2)字符串连接 cat示例:{$articleTitle|cat:" yesterday.&q ...

  8. js流程图:aworkflow.js

    auto-workflow 用于快速构建各种关系图的库 github地址:https://github.com/auto-workflow/AWorkflow 快速开始 npm install awo ...

  9. Ajax之XMLHttpRequest

    XMLHttpRequest对象 XMLHttpRequest  提供客户端同http服务器通讯的协议 一:创建 IE : http_request = new ActiveXObject(" ...

  10. recv函数的用法详解

    recv函数 int recv( SOCKET s,     char FAR *buf,      int len,     int flags     ); 不论是客户还是服务器应用程序都用rec ...