项目杂谈–即时通讯(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”,那么就会使用默认的样式