zoukankan      html  css  js  c++  java
  • Android------底部导航栏BottomNavigationBar

    Android 的底部导航栏 BottomNavigationBar 由Google官方Material design中增加的。

    Android底部导航栏的实现方式特别多,例如TabHost,TabLayout,或者TextView等,都可以实现底部导航栏的效果。

    但Google既然推出了还是可以尽量用他来实现底部导航栏这样的功能。

    下来看看案例效果图

                 

    使用添加依赖

    compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0'

    布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        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.zhangqie.bottomnavigationbar.MainActivity">
    
        <FrameLayout
            android:id="@+id/fragment"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
    
        <com.ashokvarma.bottomnavigation.BottomNavigationBar
            android:id="@+id/bottom_navigation_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            />
    
    </LinearLayout>

    BottomNavigationBar的属性设置

    mBottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);
            mBottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
            mBottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_STATIC);
            mBottomNavigationBar.setBarBackgroundColor(android.R.color.white);
            badgeItem = new BadgeItem()
                    .setBackgroundColor(Color.RED).setText("99")//设置角标内容
                    .setHideOnSelect(true); //设置被选中时隐藏角标
            mBottomNavigationBar
                    .setActiveColor(R.color.colorBottomBack) //设置选中的颜色
                    .setInActiveColor(R.color.colorActive);//未选中颜色
    
            mBottomNavigationBar.addItem(new BottomNavigationItem(R.drawable.icon_home_normal, "首页"))//添加图标和文字
                    .addItem(new BottomNavigationItem(R.drawable.icon_shop_normal, "店铺"))
                    .addItem(new BottomNavigationItem(R.drawable.icon_cart_normal, "购物车"))
                    .addItem(new BottomNavigationItem(R.drawable.icon_my_normal, "我的").setBadgeItem(badgeItem))
                    .initialise();
       //设置点击事件 mBottomNavigationBar.setTabSelectedListener(
    new BottomNavigationBar.OnTabSelectedListener(){ @Override public void onTabSelected(int position) { showFragment(position); } @Override public void onTabUnselected(int position) { } @Override public void onTabReselected(int position) { } });

    setMode的相关属性

    包含3种Mode:

    MODE_DEFAULT

    •    如果Item的个数<=3就会使用MODE_FIXED模式,否则使用MODE_SHIFTING模式


    MODE_FIXED (固定大小)

    •    填充模式,未选中的Item会显示文字,没有换挡动画。
    •    宽度=总宽度/action个数
    •    最大宽度: 168dp
    •    最小宽度: 80dp
    •    Padding:6dp(8dp)、10dp、12dp
    •    字体大小:12sp、14sp


    MODE_SHIFTING (不固定大小)

    • 换挡模式,未选中的Item不会显示文字,选中的会显示文字。在切换的时候会有一个像换挡的动画

    setBackgroundStyles的相关属性


    包含3种Style:
    BACKGROUND_STYLE_DEFAULT

    • 如果设置的Mode为MODE_FIXED,将使用BACKGROUND_STYLE_STATIC 。如果Mode为MODE_SHIFTING将使用BACKGROUND_STYLE_RIPPLE。


    BACKGROUND_STYLE_STATIC

    • 点击的时候没有水波纹效果
    • 航条的背景色是白色,加上setBarBackgroundColor()可以设置成你所需要的任何背景颜色

    BACKGROUND_STYLE_RIPPLE

    • 点击的时候有水波纹效果
    • 导航条的背景色是你设置的处于选中状态的 Item的颜色(ActiveColor),也就是setActiveColorResource这个设置的颜色

    BottomNavigationBar源码:https://github.com/Ashok-Varma/BottomNavigation

    由于代码太多,就不一一贴出来了,源码直接下载即可

    源码传送门

  • 相关阅读:
    zoj 2316 Matrix Multiplication 解题报告
    BestCoder7 1001 Little Pony and Permutation(hdu 4985) 解题报告
    codeforces 463C. Gargari and Bishops 解题报告
    codeforces 463B Caisa and Pylons 解题报告
    codeforces 463A Caisa and Sugar 解题报告
    CSS3新的字体尺寸单位rem
    CSS中文字体对照表
    引用外部CSS的link和import方式的分析与比较
    CSS样式表引用方式
    10个CSS简写/优化技巧
  • 原文地址:https://www.cnblogs.com/zhangqie/p/7605655.html
Copyright © 2011-2022 走看看