[移动开发] 安卓底部tab导航栏

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 安卓底部tab导航栏 -> 正文阅读

[移动开发]安卓底部tab导航栏

我用的EasyNavigation库 https://github.com/forvv231/EasyNavigation.

在这里插入图片描述

依赖

根目录 build.gradle 的repositories:

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

添加引入dependency

     	implementation 'com.github.Vincent7Wong:EasyNavigation:1.5.0'
     	//2.0.5  AndroidX版本、支持ViewPager2
     	implementation 'com.github.Vincent7Wong:EasyNavigation:2.0.5'

EasyNavigation的文档

navigationBar.defaultSetting()  //恢复默认配置、可用于重绘导航栏
                .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"))   //导航栏背景色
                .setOnTabClickListener(new EasyNavigationBar.OnTabClickListener() {
                    @Override
                    public boolean onTabSelectEvent(View view, int position) {
                        //Tab点击事件  return true 页面不会切换

                        return false;
                    }

                    @Override
                    public boolean onTabReSelectEvent(View view, int position) {
                        //Tab重复点击事件
                        return false;
                    }
                })
                .smoothScroll(false)  //点击Tab  Viewpager切换是否有动画
                .canScroll(true)    //Viewpager能否左右滑动
                .mode(EasyNavigationBar.NavigationMode.MODE_ADD)   //默认MODE_NORMAL 普通模式  //MODE_ADD 带加号模式
                .centerTextStr("发现")
                .centerImageRes(R.mipmap.add_image)
                .centerIconSize(36)    //中间加号图片的大小
                .centerLayoutHeight(100)   //包含加号的布局高度 背景透明  所以加号看起来突出一块
                .navigationHeight(60)  //导航栏高度
                .lineHeight(10)         //分割线高度  默认1px
                .lineColor(Color.parseColor("#ff0000"))
                .centerLayoutRule(EasyNavigationBar.RULE_BOTTOM) //RULE_CENTER 加号居中addLayoutHeight调节位置 EasyNavigationBar.RULE_BOTTOM 加号在导航栏靠下
                .centerLayoutBottomMargin(10)   //加号到底部的距离
                .hasPadding(true)    //true ViewPager布局在导航栏之上 false有重叠
                .hintPointLeft(-3)  //调节提示红点的位置hintPointLeft hintPointTop（看文档说明）
                .hintPointTop(-3)
                .hintPointSize(6)    //提示红点的大小
                .msgPointLeft(-10)  //调节数字消息的位置msgPointLeft msgPointTop（看文档说明）
                .msgPointTop(-10)
                .msgPointTextSize(9)  //数字消息中字体大小
                .msgPointSize(18)    //数字消息红色背景的大小
                .centerAlignBottom(true)  //加号是否同Tab文字底部对齐  RULE_BOTTOM时有效；
                .centerTextTopMargin(50)  //加号文字距离加号图片的距离
                .centerTextSize(15)      //加号文字大小
                .centerNormalTextColor(Color.parseColor("#ff0000"))    //加号文字未选中时字体颜色
                .centerSelectTextColor(Color.parseColor("#00ff00"))    //加号文字选中时字体颜色
                .setMsgPointColor(Color.BLUE) //数字消息、红点背景颜色
                .setMsgPointMoreRadius(5) //消息99+角度半径
                .setMsgPointMoreWidth(50)  //消息99+宽度
                .setMsgPointMoreHeight(40)  //消息99+高度
                .textSizeType(EasyNavigationBar.TextSizeType.TYPE_DP)  //字体单位 建议使用DP  可切换SP
                .setOnTabLoadListener(new EasyNavigationBar.OnTabLoadListener() { //Tab加载完毕回调
                    @Override
                    public void onTabLoadCompleteEvent() {
                        navigationBar.setMsgPointCount(0, 7);
                        navigationBar.setMsgPointCount(1, 109);
                        navigationBar.setHintPoint(4, true);
                    }
                })
                //.setupWithViewPager() ViewPager或ViewPager2
                .build();

做准备工作：
导入图片 https://bls.lanzoui.com/isPS4wqzp7a.到mipmap-xhdpi

activity_main.xml

   <com.next.easynavigation.view.EasyNavigationBar
        android:id="@+id/navigationBar" 
         android:layout_width="match_parent"      
         android:layout_height="match_parent"  
         app:Easy_centerIconSize="50dp">  
         </com.next.easynavigation.view.EasyNavigationBar>

再创建四个窗口ABCD
fragment_a.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#20616161"
        android:gravity="center"
        android:text="A"
        android:textColor="#ffffff"
        android:textSize="100sp" />

</android.support.constraint.ConstraintLayout>

fragment_b.xml

<?xml ve<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#20616161"
        android:gravity="center"
        android:text="B"
        android:textColor="#ffffff"
        android:textSize="100sp" />

</android.support.constraint.ConstraintLayout>rsion="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#20616161"        android:gravity="center"        android:text="B"        android:textColor="#ffffff"        android:textSize="100sp" /></android.support.constraint.ConstraintLayout>

fragment_c.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#20616161"
        android:gravity="center"
        android:text="C"
        android:textColor="#ffffff"
        android:textSize="100sp" />

</android.support.constraint.ConstraintLayout>

fragment_d.xml

<?xml v<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#20616161"
        android:gravity="center"
        android:text="D"
        android:textColor="#ffffff"
        android:textSize="100sp" />

</android.support.constraint.ConstraintLayout>ersion="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#20616161"        android:gravity="center"        android:text="D"        android:textColor="#ffffff"        android:textSize="100sp" /></android.support.constraint.ConstraintLayout>

四个Fragment
.AFragment.java

package com.mycompany.batDamo.UI;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.mycompany.batDamo.R;


public class AFragment extends android.support.v4.app.Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_a, null);
        return view;
    }


}

BFragment.java

package com.mycompany.batDamo.UI;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.mycompany.batDamo.R;


public class BFragment extends android.support.v4.app.Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_b, container,false);
        return view;
    }
}

CFragment.java

package compackage com.mycompany.batDamo.UI;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import com.mycompany.batDamo.R;

public class CFragment extends android.support.v4.app.Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_c, container,false);
        return view;
    }

    //提示消息
    public void showToast(String str) {
        Toast.makeText(getContext(), str, Toast.LENGTH_SHORT).show();
    }
}
.mycompany.batDamo.UI;
import android.os.Bundle;import android.support.annotation.Nullable;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.Toast;import com.mycompany.batDamo.R;
public class CFragment extends android.support.v4.app.Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_c, container,false);        return view;    }    //提示消息    public void showToast(String str) {        Toast.makeText(getContext(), str, Toast.LENGTH_SHORT).show();    }}

DFragment.java

package com.mycompany.batDamo.UI;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import com.mycompany.batDamo.R;


public class DFragment extends android.support.v4.app.Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_d, container,false);
        return view;
    }

    //提示消息
    public void showToast(String str) {
        Toast.makeText(getContext(), str, Toast.LENGTH_SHORT).show();
    }
}

最后MainActivity.java

package com.mycompany.batDamo;

import android.os.Bundle;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import com.mycompany.batDamo.UI.AFragment;
import com.mycompany.batDamo.UI.BFragment;
import com.mycompany.batDamo.UI.CFragment;
import com.mycompany.batDamo.UI.DFragment;
import com.next.easynavigation.view.EasyNavigationBar;
import java.util.ArrayList;
import java.util.List;
import android.support.v4.app.Fragment;

public class MainActivity extends AppCompatActivity 
{
    private EasyNavigationBar navigationBar;

    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<Fragment> fragments = new ArrayList<>();
    private Handler mHandler = new Handler();

    private boolean flag = true;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

		Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar);
		setSupportActionBar(toolbar);
        
        navigationBar = findViewById(R.id.navigationBar);

        fragments.add(new AFragment());
        fragments.add(new BFragment());
        fragments.add(new CFragment());
        fragments.add(new DFragment());

        //navigationBar.defaultSetting()  //恢复默认配置、可用于重绘导航栏
        navigationBar.titleItems(tabText)//  Tab文字集合  只传文字则只显示文字
            .normalIconItems(normalIcon) //  Tab未选中图标集合
            .selectIconItems(selectIcon) //  Tab选中图标集合
            .fragmentList(fragments)     //  fragment集合 窗口A/B/C/D
            .centerImageRes(R.mipmap.add_image)//中间 添加图标
            .centerTextStr("发布")//中间添加图标text
            .anim(null)
            .centerLayoutRule(EasyNavigationBar.RULE_BOTTOM)//RULE_CENTER 加号居中addLayoutHeight调节位置 EasyNavigationBar.RULE_BOTTOM 加号在导航栏靠下
            .centerLayoutBottomMargin(0)  //加号到底部的距离
            .centerAlignBottom(true)//加号是否同Tab文字底部对齐  RULE_BOTTOM时有效；
            .fragmentManager(getSupportFragmentManager())
            .setOnTabClickListener(new EasyNavigationBar.OnTabClickListener() {
                @Override
                public boolean onTabSelectEvent(View view, int position) {
                    //tab点击事件
                    return false;
                }

                @Override
                public boolean onTabReSelectEvent(View view, int position) {
                    return false;
                }

            })
            .setOnCenterTabClickListener(new EasyNavigationBar.OnCenterTabSelectListener() {
                @Override
                public boolean onCenterTabSelectEvent(View view) {
                    //正中间view点击事件
                    mHandler.post(new Runnable() {
                            @Override
                            public void run() {
                                //＋ 旋转动画
                                if (flag) {
                                    navigationBar.getCenterImage().animate().rotation(45).setDuration(400);
                                } else {
                                    navigationBar.getCenterImage().animate().rotation(0).setDuration(400);
                                }
                                flag = !flag;
                            }
                        });
                    return false;
                }
            })
            .canScroll(true)//Viewpager能否左右滑动
            .mode(EasyNavigationBar.NavigationMode.MODE_ADD) //默认MODE_NORMAL 普通模式  //MODE_ADD 带加号模式
            .build();

    }
}