即时通讯

项目杂谈–即时通讯(BottomNavigationBar)

先给大家上一张图吧

想必这个挺实用的就是仿了qq,有menu菜单的使用,还有底部导航栏的使用,
一般底部导航栏我们是自己写的,今天借助了第三方开源项目
https://github.com/Ashok-Varma/BottomNavigation
这个确实挺好用的。
在使用这个开源项目之前,请大家好好的阅读一下里面的内容。大牛写的东西果然很实用的。

现在来介绍一下这个项目吧,使用之前,先在你的android studio中添加一行依赖,添加完成就可以进行使用了,将布局拷贝到你的布局当中,让其处于底部即可。


    <com.ashokvarma.bottomnavigation.BottomNavigationBar
        android:id="@+id/bottom_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

接下来,按照文档下来进行操作即可,

    BottomNavigationItem conversationItem =new BottomNavigationItem(R.mipmap.conversation_selected_2,"消息");
    BottomNavigationItem contactItem=new BottomNavigationItem(R.mipmap.contact_selected_2,"联系人");
    BottomNavigationItem pluginItem =new BottomNavigationItem(R.mipmap.plugin_selected_2,"动态");
    mBottomNavigationBar.addItem(conversationItem);
    mBottomNavigationBar.addItem(contactItem);
    mBottomNavigationBar.addItem(pluginItem);

通过创建不同的BottomNavigationItem ,分别指定文字和图片,这样就创建好了底部的导航栏,然后将这些item添加到BottomNavigationBar中去。

最重要的一步: 初始化BottomNavigation

      mBottomNavigationBar.initialise();

看到上图,是不是觉得当点击的时候,图片会变颜色,一开始还以为是一个选择器,其实不是的,其实是我们指定的两个颜色,一个是选中,一个是默认。通过源码分析,还是去拿了res目录下的color,这个color可以由我们自己去设置,一般设置的话都是参考应用的主色调。所以在设计应用的时候。

            /**
     * @param activeColor res code for the default active color
     * @return this, to allow builder pattern
     */
    public BottomNavigationBar setActiveColor(@ColorRes int activeColor) {
        this.mActiveColor = ContextCompat.getColor(getContext(), activeColor);
        return this;
    }



           /**
             * @param inActiveColor res code for the default in-active color
             * @return this, to allow builder pattern
             */
            public BottomNavigationBar setInActiveColor(@ColorRes int inActiveColor) {
                this.mInActiveColor = ContextCompat.getColor(getContext(), inActiveColor);
                return this;
            }

接下来,就是点击事件了,当然这个控件同样也有它自己的点击事件监听

 mBottomNavigationBar.setTabSelectedListener(this);

相应的会去实现三个方法,在咱这个项目中,就是在选中的时候,进行fragment的显示。条目未被选中的时候,进行fragment的隐藏了。

  //条目被选中
    @Override
    public void onTabSelected(int position) {


    }
    //条目未被选中
    @Override
    public void onTabUnselected(int position) {

    }
    //条目被再次选中
    @Override
    public void onTabReselected(int position) {

    }

接下来说一说:menu菜单,本来是actionbar中可以指定menu,由于actionbar的局限性,位置不能改变,所以引入一个toolbar。。那么toolbar,作为不同控件不需要去设置主题,如果需要,代替actionbar去使用,就需要去配置要给noactionbar的主题了。

顺带着讲了一下menu菜单,其实这个也挺简单的,无非创建一个menu文件夹。指定一些我们需要的菜单,例如上图所示》添加好友,分享好友,关于我们这三个菜单,在res/menu/main.xml中指定我们所要的菜单

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/add_friend"
            android:title="添加好友"
            android:icon="@mipmap/add_friend_pressed"
        />

    <item android:title="分享好友"
          android:icon="@mipmap/scan_pressed"
              android:id="@+id/share_friend"/>
    <item
        android:title="关于我们"
        android:icon="@mipmap/about"
        android:id="@+id/aboutme"
        />
</menu>

上一步做完之后,可以来到我们的activity中复写相应的方法

@Override
    public boolean onCreateOptionsMenu(Menu menu) {

//            return super.onCreateOptionsMenu(menu); //return 
//  将我们定义好的main.xml通过菜单布局管理填充成一个view视图
        getMenuInflater().inflate(R.menu.main,menu);
        return true;

    }

当然上诉还是不够的,因为onCreateOptionsMenu只会创建一次,意味着我们再次点击可能就不会在创建菜单布局视图了,因此我们需要去重写另外一个方法.,一并解决了图标不显示的问题。

  //menu是默认不显示图标的,这个方法调用,是在点击这个menu建,然后展示menu
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        MenuBuilder builder = (MenuBuilder) menu;
        builder.setOptionalIconsVisible(true);
        return true;
    }

当然还需要对这个菜单进行点击操作,那么就需要去复写另外一个方法了

//true :代表这个点击事件被相应item消费,拦截下来自己处理了,false,代表没有被消费,按照正常的顺序向下走
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.aboutme:
                Toast.makeText(this, "关于我们", Toast.LENGTH_SHORT)
                     .show();

                break;
            case R.id.share_friend:
                Toast.makeText(this, "分享好友", Toast.LENGTH_SHORT)
                     .show();
                 break;
            case R.id.add_friend:
//                TODO
                break;
        }

        return true;
    }

注意一点就是,没有给出toolbar的布局,其实toolbar中的弹出主题是会影响我们的菜单的背景的,如果不指定 app:popupTheme=”@style/ThemeOverlay.AppCompat.Light”,那么就会使用默认的样式
这里写图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章