关闭

Android--BottomNavigationBar实现底部导航栏

标签: BottomNavigationBar底部菜单Androidfragmentbasefragment
2600人阅读 评论(2) 收藏 举报
分类:

1.BottomNavigationBar的下载地址

https://github.com/Ashok-Varma/BottomNavigation

2.使用的方法

2.1在Gradle中添加

compile ‘com.ashokvarma.android:bottom-navigation-bar:0.9.5’

2.2布局实现

 <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:layout_gravity="bottom"
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
  • 1
  • 2
  • 3
  • 4
  • 5

2.3类中Activity中添加BottomNavigationItem

BottomNavigationBar bottomNavigationBar = (BottomNavigationBar) findViewById(R.id.bottom_navigation_bar);

bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.ic_home_white_24dp, "Home"))
                .addItem(new BottomNavigationItem(R.drawable.ic_book_white_24dp, "Books"))
                .addItem(new BottomNavigationItem(R.drawable.ic_music_note_white_24dp, "Music"))
                .addItem(new BottomNavigationItem(R.drawable.ic_tv_white_24dp, "Movies & TV"))
                .addItem(new BottomNavigationItem(R.drawable.ic_videogame_asset_white_24dp, "Games"))
                .initialise();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2.4设置事件监听器TabChangeListener

 bottomNavigationBar.setTabSelectedListener(new BottomNavigationBar.OnTabSelectedListener(){
            @Override
            public void onTabSelected(int position) {
            }
            @Override
            public void onTabUnselected(int position) {]
            }
            @Override
            public void onTabReselected(int position) {
            }
        });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

3.展示

MODE_FIXED+BACKGROUND_STYLE_STATIC效果

DE_FIXED+BACKGROUND_STYLE_RIPPLE效果

MODE_SHIFTING+BACKGROUND_STYLE_STATIC效果

 

MODE_SHIFTING+BACKGROUND_STYLE_RIPPLE效果

4.代码实现

package com.android.xiaobai;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.ashokvarma.bottomnavigation.BottomNavigationBar;
import com.ashokvarma.bottomnavigation.BottomNavigationItem;

import java.util.ArrayList;

import fragment.ContactsFragment;
import fragment.DongtaiFragment;
import fragment.MsgFragment;

/**
 * Created by xiaobai on 2018/1/31/031.
 */

public class MessageActivity extends AppCompatActivity implements BottomNavigationBar.OnTabSelectedListener {
    private ArrayList<Fragment> fragments;
    private BottomNavigationBar bottomNavigationBar;
    private MsgFragment msgFragment;
    private ContactsFragment contactsFragment;
    private DongtaiFragment dongtaiFragment;
    private FragmentManager fragmentManager;
    private FragmentTransaction transaction;
    int lastSelectedPosition = 0;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activty_message);

        bottomNavigationBar = findViewById(R.id.bottom_navigation_bar);
        init();
    }

    private void init() {
        //要先设计模式后再添加图标!
        //设置按钮模式  MODE_FIXED表示固定   MODE_SHIFTING表示转移
        bottomNavigationBar.setMode(BottomNavigationBar.MODE_FIXED);
        //设置背景风格
        // BACKGROUND_STYLE_STATIC表示静态的
        //BACKGROUND_STYLE_RIPPLE表示涟漪的,也就是可以变化的 ,跟随setActiveColor里面的颜色变化
        bottomNavigationBar.setBackgroundStyle(BottomNavigationBar.BACKGROUND_STYLE_RIPPLE);
        //添加并设置图标、图标的颜色和文字
        bottomNavigationBar
                .addItem(new BottomNavigationItem(R.drawable.im_botton_message, "消息")).setActiveColor(R.color.blue)
                .addItem(new BottomNavigationItem(R.drawable.im_botton_contacts, "联系人")).setActiveColor(R.color.red)
                .addItem(new BottomNavigationItem(R.drawable.im_botton_dongtai, "动态")).setActiveColor(R.color.orign)
                .setFirstSelectedPosition(lastSelectedPosition )
                .initialise();

        bottomNavigationBar.setTabSelectedListener(this);
        setDefaultFragment();
    }

    //设置初始界面
    private void setDefaultFragment() {
        fragmentManager = getSupportFragmentManager();
        transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.layFrame, MsgFragment.newInstance("消息"));
        transaction.commit();
    }

    @Override
    public void onTabSelected(int position) {
        fragmentManager = getSupportFragmentManager();
        transaction = fragmentManager.beginTransaction();
        switch (position) {
            case 0:
                if (msgFragment == null) {
                    msgFragment = MsgFragment.newInstance("消息");
                }
                transaction.replace(R.id.layFrame, msgFragment);
                break;
            case 1:
                if (contactsFragment == null) {
                    contactsFragment = ContactsFragment.newInstance("联系人");
                }
                transaction.replace(R.id.layFrame, contactsFragment);
                break;
            case 2:
                if (dongtaiFragment == null) {
                    dongtaiFragment = DongtaiFragment.newInstance("动态");
                }
                transaction.replace(R.id.layFrame, dongtaiFragment);
                break;
            default:
                break;
        }
        // 事务提交
        transaction.commit();
    }

    @Override
    public void onTabUnselected(int position) {
        Log.d("dongtaiFragment", "onTabUnselected() called with: " + "position = [" + position + "]");
    }

    @Override
    public void onTabReselected(int position) {

    }
}

package fragment;

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

import com.android.xiaobai.R;

/**
 * Created by xiaobai on 2018/1/31/031.
 */

public class MsgFragment extends BaseFragment {
    /**
     * 标志位,标志已经初始化完成
     */
    private boolean isPrepared;
    /**
     * 是否已被加载过一次,第二次就不再去请求数据了
     */
    private boolean mHasLoadedOnce;
    TextView textView;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        if (mView == null) {
            // 需要inflate一个布局文件 填充Fragment
            mView = inflater.inflate(R.layout.fragment_msg, container, false);
            initView();
            isPrepared = true;
//        实现懒加载
            lazyLoad();
        }
        //缓存的mView需要判断是否已经被加过parent, 如果有parent需要从parent删除,要不然会发生这个mView已经有parent的错误。
        ViewGroup parent = (ViewGroup) mView.getParent();
        if (parent != null) {
            parent.removeView(mView);
        }

        return mView;
    }
    /**
     * 初始化控件
     */
    private void initView() {

    }

    @Override
    public void lazyLoad() {
        if (!isPrepared || !isVisible || mHasLoadedOnce) {
            return;
        }
        //填充各控件的数据
        mHasLoadedOnce = true;
    }
    public static MsgFragment newInstance(String param1) {
        MsgFragment fragment = new MsgFragment();
        Bundle args = new Bundle();
        args.putString("agrs1", param1);
        fragment.setArguments(args);
        return fragment;
    }
}
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MessageActivity">

    <FrameLayout
        android:id="@+id/layFrame"
        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>


package fragment;

import android.support.v4.app.Fragment;
import android.view.View;


/**
 * Created by xiaobai on 2018/1/31/031.
 */

public abstract class BaseFragment extends Fragment {
    /**
     * Fragment当前状态是否可见
     */
    public boolean isVisible;

    /**
     * inflate布局文件 返回的view
     */
    public View mView;

    /**
     * 简化 findViewById
     *
     * @param viewId
     * @param <T>
     * @return
     */
    protected <T extends View> T find(int viewId) {
        return (T) mView.findViewById(viewId);
    }

    /**
     * setUserVisibleHint是在onCreateView之前调用的
     * 设置Fragment可见状态
     */
    @Override
    public void setUserVisibleHint(boolean isVisibleToUser) {
        super.setUserVisibleHint(isVisibleToUser);
        /**
         * 判断是否可见
         */
        if (getUserVisibleHint()) {
            isVisible = true;
            onVisible();
        } else {
            isVisible = false;
            onInvisible();
        }
    }

    /**
     * 可见
     */
    private void onVisible() {
        lazyLoad();
    }

    /**
     * 不可见
     */
    private void onInvisible() {
    }

    /**
     * 延迟加载
     * 子类必须重写此方法
     */
    public abstract void lazyLoad();
}

BottomNavigationBar 图标和文字的间距:

在自己项目里value文件夹中的dimens.xml里面复写fixed_height_bottom_padding(默认是10dp,值越小,间距越大。适合的模式是BottomNavigationBar.MODE_FIXED)

如果模式是BottomNavigationBar.MODE_SHIFTING也是一样,复写和修改相关的参数



2
0
查看评论

TextView+ImageView+LinearLayout实现底部导航栏

效果图:activity_main.xml布局:xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.co...
  • qq_40449414
  • qq_40449414
  • 2018-01-19 16:00
  • 115

android TextView去除顶部和底部留白

最近在做项目时要在textview前面加一个同等大小的标签效果,把前面标签高度设置为后面textView的TextSize大小时,发现前边标签总是比textView要小一块,还要给前边标签设置paddingTop才能与后面内容对齐,paddingTop大小是4dp左右,所以TextView的上下留白...
  • u012545354
  • u012545354
  • 2016-05-12 00:18
  • 4261

【android学习】用TextView实现的底部菜单,以及Fragment的应用

【总体概述】 首先,MainActivity.java 继承FragmentActivity。 每个底部菜单按钮对应一个Fragment. 黑色的框是用来切换Fragment.橘色的框是底部菜单,有3个按钮。 这个底部菜单的布局,是外面套一个LinerLayout,里面3个TextView。通过设置...
  • SunshineTan
  • SunshineTan
  • 2016-05-17 18:39
  • 716

使用RadioGroup实现底部导航栏效果,不需要java代码。

使用RadioGroup实现底部导航栏效果,不需要java代码。
  • shaoenxiao
  • shaoenxiao
  • 2016-05-04 16:16
  • 557

Android用BottomNavigationBar实现底部导航栏

之前底部导航栏的基本上都是自己通过selector来实现的,今天换上了Google推出的BottomNavigationBar,感觉效果还不错,写了一个项目上要用到的功能的demo,先上一张效果图,大家感受一下: 这里主要介绍BottomNavigationBar的使用,首先要在b...
  • lkjfyy
  • lkjfyy
  • 2017-12-28 16:43
  • 187

android控件的对齐方式,控件布局(顶部、底部)留着自用~~~

android:layout_above 将该控件的底部至于给定ID的控件之上 android:layout_below 将该控件的顶部至于给定ID的控件之下 android:layout_toLeftOf 将该控件的右边缘和给定ID的控件的左边缘对齐 android:layout_toRightO...
  • sky_plum_blossom
  • sky_plum_blossom
  • 2015-10-22 15:17
  • 8581

iOS textview滚动到底部

textView.ScrollRectToVisible((new CGRect(0,textView.ContentSize.Height-15,textView.ContentSize.Width,10)),false);
  • honeycandys
  • honeycandys
  • 2016-02-23 14:31
  • 1905

使用RadioButton+Fragment实现底部导航栏

底部导航栏,在我们App项目中是非常常用!而且实现它的方式很多,今天我们就来使用RadioButton+Fragment实现底部导航栏!下面就让我们动手吧,首先我们打开RadioButtonDemo这个项目,首先修改activity_main.xml文件如下:<?xml version=&qu...
  • github_37216983
  • github_37216983
  • 2017-03-30 23:49
  • 1810

Fragment实例精讲——底部导航栏的实现(1)

本文转自:http://www.runoob.com/w3cnote/android-tutorial-fragment-demo1.html 本节引言: 在上一节中我们对Fragment进行了一个初步的了解,学习了概念,生命周期,Fragment管理与Fragment事务,以及动态与静态加载F...
  • songlinjiang
  • songlinjiang
  • 2016-03-28 03:58
  • 1308

ImageView 宽度顶边显示,高度保持比例

图片宽度顶边显示,高度保持比例 <ImageView android:layout_width="match_parent" android:layout_height="wrap_content&q...
  • u012246458
  • u012246458
  • 2016-07-13 13:45
  • 1480
    个人资料
    • 访问:968268次
    • 积分:10973
    • 等级:
    • 排名:第1753名
    • 原创:281篇
    • 转载:58篇
    • 译文:2篇
    • 评论:133条
    博客专栏
    文章分类
    最新评论