android底部导航栏实现

2022-12-31 14:32:44

第一种用radiobutton实现

https://wizardforcel.gitbooks.io/w3school-android/content/75.html

布局文件，使用radiogroup

<?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"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <View

        android:id="@+id/ly_top_bar"

        android:layout_width="match_parent"

        android:layout_height="1dp"

        android:background="@color/colorPrimary"/>

    <RadioGroup

        android:layout_width="match_parent"

        android:layout_height="56dp"

        android:id="@+id/rg_tab_bar"

        android:layout_alignParentBottom="true"

        android:orientation="horizontal">

        <RadioButton

            android:id="@+id/rbb_1"

            style="@style/tab_menu_item"

            android:drawableTop="@drawable/qq"

            android:text="@string/jihua"/>

        <RadioButton

            android:id="@+id/rbb_2"

            style="@style/tab_menu_item"

            android:drawableTop="@drawable/pp"

            android:text="@string/dating"/>

        <RadioButton

            android:id="@+id/rbb_3"

            style="@style/tab_menu_item"

            android:drawableTop="@drawable/oo"

            android:text="@string/wode"/>

    </RadioGroup>

    <View

        android:id="@+id/div_tab_bar"

        android:layout_width="match_parent"

        android:layout_height="2px"

        android:layout_above="@id/rg_tab_bar" />

    <FrameLayout

        android:id="@+id/ly_content"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_above="@id/div_tab_bar"

        android:layout_below="@id/ly_top_bar">

    </FrameLayout>

</RelativeLayout>

activity文件,每个界面是一个fragment

package com.example.administrator.miaomiao;

import android.graphics.drawable.Drawable;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentTransaction;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.RadioButton;

import android.widget.RadioGroup;

public class allactivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {

    private RadioGroup rg_tab_bar;

    private RadioButton rb_1;

    private RadioButton rb_2;

    private RadioButton rb_3;

    //Fragment Object

    private Fragment1 fg1;

    private Fragment2 fg2;

    private Fragment3 fg3;

    private FragmentManager fManager;

//    private Toolbar toolbar;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_allactivity);

        fManager = getSupportFragmentManager();

        rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);

        rg_tab_bar.setOnCheckedChangeListener(this);

        //获取第一个单选按钮，并设置其为选中状态

        rb_1 = (RadioButton) findViewById(R.id.rbb_1);

        rb_2 = (RadioButton) findViewById(R.id.rbb_2);

        rb_3 = (RadioButton) findViewById(R.id.rbb_3);

        rb_1.setChecked(true);

        initView();

    }

    @Override

    public void onCheckedChanged(RadioGroup group, int checkedId) {

        FragmentTransaction fTransaction = fManager.beginTransaction();

        hideAllFragment(fTransaction);

        switch (checkedId){

            case R.id.rbb_1:

                if(fg1 == null){

                    fg1 = new Fragment1();

                    fTransaction.add(R.id.ly_content,fg1, "Fragment1");

                }else{

                    fTransaction.show(fg1);

                }

                break;

            case R.id.rbb_2:

                if(fg2 == null){

                    fg2 = new Fragment2();

                    fTransaction.add(R.id.ly_content,fg2, "Fragment2");

                }else{

                    fTransaction.show(fg2);

                }

                break;

            case R.id.rbb_3:

                if(fg3 == null){

                    fg3 = new Fragment3();

                    fTransaction.add(R.id.ly_content,fg3, "Fragment3");

                }else{

                    fTransaction.show(fg3);

                }

                break;

        }

        fTransaction.commit();

    }

    //隐藏所有Fragment

    private void hideAllFragment(FragmentTransaction fragmentTransaction){

        if(fg1 != null)fragmentTransaction.hide(fg1);

        if(fg2 != null)fragmentTransaction.hide(fg2);

//        if(fg3 != null)fragmentTransaction.hide(fg3);

        if(fg3 != null)fragmentTransaction.hide(fg3);

    }

    private void initView() {

        //定义底部标签图片大小和位置

        Drawable drawable_news = getResources().getDrawable(R.drawable.qq);

        //当这个图片被绘制时，给他绑定一个矩形 ltrb规定这个矩形

        drawable_news.setBounds(, , , );

        //设置图片在文字的哪个方向

        rb_1.setCompoundDrawables(null, drawable_news, null, null);

        //定义底部标签图片大小和位置

        Drawable drawable_live = getResources().getDrawable(R.drawable.pp);

        //当这个图片被绘制时，给他绑定一个矩形 ltrb规定这个矩形

        drawable_live.setBounds(, , , );

        //设置图片在文字的哪个方向

        rb_2.setCompoundDrawables(null, drawable_live, null, null);

        //定义底部标签图片大小和位置

        Drawable drawable_tuijian = getResources().getDrawable(R.drawable.oo);

        //当这个图片被绘制时，给他绑定一个矩形 ltrb规定这个矩形

        drawable_tuijian.setBounds(, , , );

        //设置图片在文字的哪个方向

        rb_3.setCompoundDrawables(null, drawable_tuijian, null, null);

    }

}

第二种在github上搜的，博客地址为https://www.jianshu.com/p/ce8e09cda486。

因为公司好多项目会用到底部导航栏，大都千篇一律，无非2-5个Tab（可能会有些点击动画、红点提示或者中间多个加号）总是重复相同的操作...所以...很懒的我希望几行代码就能实现这个效果（少敲一行是一行）

效果图

轻松实现.gif

实现

依赖

Step 1. Add it in your root build.gradle at the end of repositories:

    allprojects {

        repositories {

            ...

            maven { url 'https://jitpack.io' }

        }

    }

Step 2. Add the dependency

    implementation 'com.github.forvv231:EasyNavigation:1.0.3'

1、基础版

xml

<com.next.easynavigation.view.EasyNavigationBar

     android:id="@+id/navigationBar"

     android:layout_width="match_parent"

     android:layout_height="match_parent">

</com.next.easynavigation.view.EasyNavigationBar>

注：因EasyNavigationBar包含ViewPager，需设置充满

Activity

private String[] tabText = {"首页", "发现", "消息", "我的"};

//未选中icon

private int[] normalIcon = {R.mipmap.index, R.mipmap.find, R.mipmap.message, R.mipmap.me};

//选中时icon

private int[] selectIcon = {R.mipmap.index1, R.mipmap.find1, R.mipmap.message1, R.mipmap.me1};

private List<android.support.v4.app.Fragment> fragments = new ArrayList<>();

navigationBar = findViewById(R.id.navigationBar);

fragments.add(new FirstFragment());

fragments.add(new SecondFragment());

fragments.add(new FirstFragment());

fragments.add(new SecondFragment());

navigationBar.titleItems(tabText)

                .normalIconItems(normalIcon)

                .selectIconItems(selectIcon)

                .fragmentList(fragments)

                .fragmentManager(getSupportFragmentManager())

                .build();

怎么样是不是很Easy啊(￣▽￣)~*

2、加号版本

private String[] tabText = {"首页", "发现", "", "消息", "我的"};

//未选中icon

private int[] normalIcon = {R.mipmap.index, R.mipmap.find, R.mipmap.add_image, R.mipmap.message, R.mipmap.me};

//选中时icon

private int[] selectIcon = {R.mipmap.index1, R.mipmap.find1, R.mipmap.add_image, R.mipmap.message1, R.mipmap.me1};

navigationBar.titleItems(tabText)

                .normalIconItems(normalIcon)

                .selectIconItems(selectIcon)

                .fragmentList(fragments)

                .mode(EasyNavigationBar.MODE_ADD)

                .fragmentManager(getSupportFragmentManager())

                .build();

资源数组中添加文字和图片，不需要文字可传空串
mode设置为EasyNavigationBar.MODE_ADD

基础版和加号版本.png

3、中间添加自定义view

 View view = LayoutInflater.from(this).inflate(R.layout.custom_add_view, null);

 navigationBar.titleItems(tabText)

                .normalIconItems(normalIcon)

                .selectIconItems(selectIcon)

                .fragmentManager(getSupportFragmentManager())

                .fragmentList(fragments)

                .mode(EasyNavigationBar.MODE_ADD_VIEW)

                .addCustomView(view)

                .addLayoutRule(EasyNavigationBar.RULE_CENTER)

                .build();

addCustomView添加自定义好的view
mode设置为EasyNavigationBar.MODE_ADD_VIEW

自定义中间按钮

属性

什么？不过瘾？看看下面给你提供可以更改的属性，满足你的需求（xml也可设置）

navigationBar.titleItems(tabText)      //必传  Tab文字集合

                .normalIconItems(normalIcon)   //必传  Tab未选中图标集合

                .selectIconItems(selectIcon)   //必传  Tab选中图标集合

                .fragmentList(fragments)       //必传  fragment集合

                .fragmentManager(getSupportFragmentManager())     //必传

                .iconSize(20)     //Tab图标大小

                .tabTextSize(10)   //Tab文字大小

                .tabTextTop(2)     //Tab文字距Tab图标的距离

                .normalTextColor(Color.parseColor("#666666"))   //Tab未选中时字体颜色

                .selectTextColor(Color.parseColor("#333333"))   //Tab选中时字体颜色

                .scaleType(ImageView.ScaleType.CENTER_INSIDE)  //同 ImageView的ScaleType

                .navigationBackground(Color.parseColor("#80000000"))   //导航栏背景色

                .onTabClickListener(new EasyNavigationBar.OnTabClickListener() {   //Tab点击事件  return true 页面不会切换

                    @Override

                    public boolean onTabClickEvent(View view, int position) {

                        return false;

                    }

                })

                .smoothScroll(false)  //点击Tab  Viewpager切换是否有动画

                .canScroll(false)    //Viewpager能否左右滑动

                .mode(EasyNavigationBar.MODE_ADD)   //默认MODE_NORMAL 普通模式  //MODE_ADD 带加号模式

                .anim(Anim.ZoomIn)                //点击Tab时的动画

                .addIconSize(36)    //中间加号图片的大小

                .addLayoutHeight(100)   //包含加号的布局高度 背景透明  所以加号看起来突出一块

                .navigationHeight(40)  //导航栏高度

                .lineHeight(100)         //分割线高度  默认1px

                .lineColor(Color.parseColor("#ff0000"))

                .addLayoutRule(EasyNavigationBar.RULE_BOTTOM) //RULE_CENTER 加号居中addLayoutHeight调节位置 EasyNavigationBar.RULE_BOTTOM 加号在导航栏靠下

                .addLayoutBottom(10)   //加号到底部的距离

                .hasPadding(true)    //true ViewPager布局在导航栏之上 false有重叠

                .hintPointLeft(-3)  //调节提示红点的位置hintPointLeft hintPointTop（看文档说明）

                .hintPointTop(-3)

                .hintPointSize(6)    //提示红点的大小

                .msgPointLeft(-10)  //调节数字消息的位置msgPointLeft msgPointTop（看文档说明）

                .msgPointTop(-10)

                .msgPointTextSize(9)  //数字消息中字体大小

                .msgPointSize(18)    //数字消息红色背景的大小

                .addAlignBottom(true)  //加号是否同Tab文字底部对齐  RULE_BOTTOM时有效；

                .addTextTopMargin(50)  //加号文字距离加号图片的距离

                .addTextSize(15)      //加号文字大小

                .addNormalTextColor(Color.parseColor("#ff0000"))    //加号文字未选中时字体颜色

                .addSelectTextColor(Color.parseColor("#00ff00"))    //加号文字选中时字体颜色

                .build();

需求（简单列举几个）

需求1：红点或数字消息提示

//数字消息大于99显示99+ 小于等于0不显示，取消显示则可以navigationBar.setMsgPointCount(2, 0)

navigationBar.setMsgPointCount(2, 109);

navigationBar.setMsgPointCount(0, 5);

//红点提示 第二个参数控制是否显示

navigationBar.setHintPoint(3, true);

清除也可以这样（这样的方法名可能直观些）

//清除第四个红点提示

navigationBar.clearHintPoint(3);

//清除第一个数字消息

navigationBar.clearMsgPoint(0);

数字消息的位置可通过msgPointLeft、msgPointTop来控制，默认这两个值为Tab图标的一半

数字消息位置属性说明.png

注：红点提示同理，通过hintPointLeft和hintPointTop两个属性调节位置

需求2：半开放式登录、点击“我的”Tab、不切换页面、需要进行登录操作

  .onTabClickListener(new EasyNavigationBar.OnTabClickListener() {

                    @Override

                    public boolean onTabClickEvent(View view, int position) {

                        if (position == 3) {

                            Toast.makeText(AddActivity.this, "请先登录", Toast.LENGTH_SHORT).show();

                            return true;

                        }

                        return false;

                    }

                })

onTabClickEvent方法中return true则拦截事件、不进行页面切换

注：这种情况canScroll不能设置为true、否则滑动仍会切换页面

需求3：加号突出（以前这种比较多,现在好多都在导航栏里面、找了好多app...）

简书和爱奇艺两种加号.png

像图中的两种需求，如何调整加号的位置呢？

提供两种解决方式、addLayoutRule设置属性RULE_CENTER和RULE_BOTTOM两种

新建位图图像 (2).png

1、RULE_CENTER
中间加号（红色圆圈）相对红色框居中，可通过addLayoutHeight调节加号的位置，此时addLayoutBottom属性无效

2、RULE_BOTTOM
中间加号（红色圆圈）在红色框底部，可通过addLayoutBottom属性调节加号到底部的距离，从而改变加号的位置；

 <com.next.easynavigation.view.EasyNavigationBar

        android:id="@+id/navigationBar"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:Easy_addIconSize="40dp"

        app:Easy_navigationHeight="60dp"

        app:Easy_addLayoutHeight="80dp"

        app:Easy_addLayoutBottom="10dp"

        app:Easy_addLayoutRule="RULE_CENTER">

中间加号下面文字和其他Tab文字对齐？

addAlignBottom属性可设置加号文字和其他Tab底部对齐。
注：addLayoutRule= RULE_BOTTOM时、addAlignBottom才有效

类似全民k歌.jpg

需求4：加号旋转

EasyNavigationBar.MODE_ADD模式下

可使用 navigationBar.getAddImage()获取到加号直接进行操作；

EasyNavigationBar.MODE_ADD_VIEW模式下

可使用navigationBar.getCustomAddView()对你添加的view进行操作；

navigationBar.getCustomAddView().animate().rotation(180).setDuration(400);

需求5：点击第一个页面中的按钮、跳转到第二个页面并执行其中的方法（部分人可选择无视）

第二个页面添加方法供Activity调用

 //提示消息

 public void showToast(String str) {

     Toast.makeText(getActivity(), str, Toast.LENGTH_SHORT).show();

 }

第一个页面中调用代码

 //跳转第二个页面

 ((AddActivity) getActivity()).getNavigationBar().selectTab(1);

 //调用第二个页面的方法

 ((SecondFragment) (((AddActivity) getActivity()).getNavigationBar().getAdapter().getItem(1))).showToast("嘻嘻哈哈嗝");

使用注意事项

若运行后EasyNavigationBar为空白、则查看Log信息提示修改；

EasyNavigationBar.MODE_ADD模式下

中间图片资源及文字同其他tab一起传入，若不需要文字、传空串即可，三个资源数组数量应该相等且数量应为奇数（因为有加号存在）。

若想点击加号实现Fragment切换，addAsFragment设置为true、此时Fragment数量=资源数量。

若点击加号不切换Fragment，跳转界面或弹出底部菜单（此时加号文字图片状态不会变），addAsFragment应为false(默认false),此时Fragment数量=资源数量-1。

EasyNavigationBar.MODE_ADD_VIEW模式下

若想点击加号实现Fragment切换，addAsFragment设置为true、此时Fragment数量=资源数量+1。

若点击加号不切换Fragment，addAsFragment应为false(默认false)，实现跳转界面或弹出底部菜单（此时），FragmentFragment数量=资源数量。

更新（1.0.0）

1、中间加号下可添加文字；
2、中间加号位置可添加自定义View;
3、可设置点击加号后同其他Tab一样切换Fragment；

移除addIcon属性、添加中间的图片文字同Tab一样；
移除onAddClickListener、监听事件同Tab、实现onTabClickListener；

新增addAlignBottom属性（加号是否同Tab文字底部对齐 RULE_BOTTOM时有效）
新增addTextTopMargin属性（加号文字距离加号图片的距离）
新增addTextSize属性（加号文字大小）
新增addNormalTextColor属性（加号文字未选中时字体颜色）
新增addSelectTextColor属性（加号文字选中时字体颜色）

更改addIconBottom方法名为addLayoutBottom；
更改addIconRule方法名为addLayoutRule；

Demo

github：https://github.com/forvv231/EasyNavigation

apk：https://fir.im/7r4d

By the way

本Demo中仿微博弹出菜单实现

参考https://github.com/DuShuYuan/PlusMenu

码农公寓

效果图

实现