android底部导航栏实现

 

第一种用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(0, 0, 40, 40);
        //设置图片在文字的哪个方向
        rb_1.setCompoundDrawables(null, drawable_news, null, null);

        //定义底部标签图片大小和位置
        Drawable drawable_live = getResources().getDrawable(R.drawable.pp);
        //当这个图片被绘制时,给他绑定一个矩形 ltrb规定这个矩形
        drawable_live.setBounds(0, 0, 40, 40);
        //设置图片在文字的哪个方向
        rb_2.setCompoundDrawables(null, drawable_live, null, null);

        //定义底部标签图片大小和位置
        Drawable drawable_tuijian = getResources().getDrawable(R.drawable.oo);
        //当这个图片被绘制时,给他绑定一个矩形 ltrb规定这个矩形
        drawable_tuijian.setBounds(0, 0, 40, 40);
        //设置图片在文字的哪个方向
        rb_3.setCompoundDrawables(null, drawable_tuijian, null, null);


    }


}

 

 

 

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

 

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

效果图

 
android底部导航栏实现
轻松实现.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
 
android底部导航栏实现
基础版和加号版本.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


     
    android底部导航栏实现
    自定义中间按钮

属性

  • 什么?不过瘾?看看下面给你提供可以更改的属性,满足你的需求(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
上一篇:VUE axios请求 封装 get post Http


下一篇:电脑用命令给Android手机录屏方法 记录