仿微信底部导航栏
要做一个类似微信底部导航栏要用到 MaterialDesign系列之 BottomNavigationView，找图片的话推荐一个很好用的网站https://www.iconfont.cn。
实现效果:页面跳转，触摸图标颜色变化。顶部Toolbar设置，
退出效果。
项目源码下面会有，持续更新中。
- 添加依赖
//BottomNavigationView
implementation 'com.google.android.material:material:1.2.1'
- xml布局 activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.activity.MainActivity">
<include layout="@layout/toolbar_layout"/>
<com.example.client.widget.NormalRefreshView
android:id="@+id/refreshableView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible">
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:layout_alignParentBottom="true"
app:itemIconTint="@drawable/bottom_navigation_item_selector"
app:itemTextColor="@drawable/bottom_navigation_item_selector"
app:labelVisibilityMode="labeled"
app:menu="@menu/main_bottom_navigation" />
</com.example.client.widget.NormalRefreshView>
</LinearLayout>
- 主界面设置 MainActivity.java
public class MainActivity extends BaseActivity implements View.OnClickListener{
private List<Fragment> mFragments = new ArrayList<>();
@BindView(R.id.bottomNavigationView)
BottomNavigationView mNavigationView;
@BindView(R.id.view_pager)
ViewPager viewPager;
@BindView(R.id.message)
TextView text_message;
private RelativeLayout layout_message;
private RelativeLayout layout_contacts;
private RelativeLayout layout_find;
private RelativeLayout layout_mine;
/**
* 退出时间
*/
private long exitTime;
@Override
protected int getLayoutId() {
return R.layout.activity_main;
}
@Override
protected void initData(Bundle savedInstanceState) {
super.initData(savedInstanceState);
mFragments.add(new MessageFragment());
mFragments.add(new ContactsFragment());
mFragments.add(new FindFragment());
mFragments.add(new MineFragment());
@Override
protected void initWidget() {
super.initWidget();
layout_message=findViewById(R.id.layout_message);
layout_contacts=findViewById(R.id.layout_contacts);
layout_find=findViewById(R.id.layout_find);
layout_mine=findViewById(R.id.layout_mine);
// 初始化页卡
initPager();
//设置当前界面
// viewPager.setCurrentItem(2);
}
@SuppressLint("HandlerLeak")
Handler handler = new Handler() {
public void handleMessage(android.os.Message msg) {
switch (msg.what) {
case SUCCESS:
// refreshableView.finishRefresh(true);
normalRefreshView.finishRefresh(true);
text_message.setText("信息");
break;
case FAILED:
// refreshableView.finishRefresh(false);
normalRefreshView.finishRefresh(false);
break;
default:
break;
}
};
};
private void initPager() {
FragmentAdapter adapter = new FragmentAdapter(mFragments, getSupportFragmentManager());
viewPager.setAdapter(adapter);
//BottomNavigationView 点击事件监听
mNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
int menuId = menuItem.getItemId();
// 跳转指定页面：Fragment
switch (menuId) {
case R.id.menu_message:
viewPager.setCurrentItem(0,false);
break;
case R.id.menu_contacts:
viewPager.setCurrentItem(1,false);
break;
case R.id.menu_find:
viewPager.setCurrentItem(2,false);
break;
case R.id.menu_mine:
viewPager.setCurrentItem(3,false);
break;
}
return false;
}
});
// ViewPager 滑动事件监听
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//将滑动到的页面对应的 menu 设置为选中状态
mNavigationView.getMenu().getItem(position).setChecked(true);
if(position==0){
layout_message.setVisibility(View.VISIBLE);
layout_contacts.setVisibility(View.GONE);
layout_find.setVisibility(View.GONE);
layout_mine.setVisibility(View.GONE);
}if(position==1){
layout_message.setVisibility(View.GONE);
layout_contacts.setVisibility(View.VISIBLE);
layout_find.setVisibility(View.GONE);
layout_mine.setVisibility(View.GONE);
} if(position==2){
layout_message.setVisibility(View.GONE);
layout_contacts.setVisibility(View.GONE);
layout_find.setVisibility(View.VISIBLE);
layout_mine.setVisibility(View.GONE);
}if(position==3) {
layout_message.setVisibility(View.GONE);
layout_contacts.setVisibility(View.GONE);
layout_find.setVisibility(View.GONE);
layout_mine.setVisibility(View.VISIBLE);
}
}
@Override
public void onPageScrollStateChanged(int position) {
}
});
}
//退出功能
@Override
public boolean dispatchKeyEvent(KeyEvent event) {
if (event.getKeyCode() == KeyEvent.KEYCODE_BACK
&& event.getAction() == KeyEvent.ACTION_DOWN
&& event.getRepeatCount() == 0) {
// 重写键盘事件分发，onKeyDown方法某些情况下捕获不到，只能在这里写
if ((System.currentTimeMillis() - exitTime) > 2000) {
Snackbar snackbar = Snackbar.make(viewPager, "再按一次退出程序", Snackbar.LENGTH_SHORT);
snackbar.getView().setBackgroundResource(R.color.colorPrimary);
snackbar.show();
exitTime = System.currentTimeMillis();
} else {
finish();
}
return true;
}
return super.dispatchKeyEvent(event);
}
}
- 添加4个碎片 大体一样这里列举其中一个
MessageFragment
public class MessageFragment extends BaseFragment {
@Override
protected int getLayoutId() {
return R.layout.message_fragement;
}
}
message_fragement.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="消息"
android:textColor="@color/black"
android:textSize="16sp"
android:layout_marginTop="300dp"
android:layout_gravity="center" />
</LinearLayout>
- 要在res文件，新建一个menu文件夹
新建main_bottom_navigation
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_message"
android:enabled="true"
android:icon="@mipmap/sel_message"
android:title="消息"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_contacts"
android:enabled="true"
android:icon="@mipmap/sel_contacts"
android:title="通讯录"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_find"
android:enabled="true"
android:icon="@mipmap/sel_find"
android:title="发现"
app:showAsAction="ifRoom" />
<item
android:id="@+id/menu_mine"
android:enabled="true"
android:icon="@mipmap/sel_mine"
android:title="我"
app:showAsAction="ifRoom" />
</menu>
- Toolbar这里我是自定义的 列举其中一个
新建一个toolbar_layout.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:background="@color/black"
android:layout_height="wrap_content">
<include layout="@layout/message_toolbar"
android:visibility="visible"/>
<include layout="@layout/contacts_toolbar"
android:visibility="gone"/>
<include layout="@layout/find_toolbar"
android:visibility="gone"/>
<include layout="@layout/mine_toolbar"
android:visibility="gone"/>
</LinearLayout>
新建一个message_toolbar文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:id="@+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="15dp"
android:text="消息"
android:gravity="center_vertical"
android:minHeight="45dp"
android:textSize="17sp"
android:textColor="@color/white"/>
<ImageView
android:id="@+id/message_add"
android:layout_width="23dp"
android:layout_height="23dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="@mipmap/find_add"
android:layout_marginRight="15dp"/>
</RelativeLayout>
- 触摸图标时候颜色变化
在drawable新建bottom_navigation_item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/color_focused" android:state_checked="true" />
<item android:color="@color/color_un_focused" android:state_checked="false" />
</selector>
在之前主界面activity_main中添加，app:labelVisibilityMode="labeled"图标超过3个显示文字，不然会隐藏。
app:itemIconTint="@drawable/bottom_navigation_item_selector"
app:itemTextColor="@drawable/bottom_navigation_item_selector"
app:labelVisibilityMode="labeled"
- 项目地址
下面是我的项目源码地址，持续更新。
https://github.com/hazardhhh/Myclient.git