博客

安卓 底部tab导航栏

  • Post author:
  • Post category:其他


我用的EasyNavigation库

https://github.com/forvv231/EasyNavigation

.

在这里插入图片描述

  • 依赖
  1. 根目录 build.gradle 的repositories: 
	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}
  1. 添加引入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();

    }
}

完整项目地址链接:

https://bls.lanzoui.com/isPS4wqzp7a

.


版权声明：本文为ayibosi原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。