Android仿微信底部菜单栏效果
更新时间：2020年07月20日 11:17:16 作者：Homilier
这篇文章主要为大家详细介绍了Android仿微信底部菜单栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前言
在市面上，大多数的APP都需要通过底部菜单栏来将程序的功能进行分类整理，通常都是分为3-5个大模块，从而正确有效地引导用户去使用我们的APP。实现底部菜单栏的方法也有很多种。
1.仿微信底部菜单栏(ViewPager+ImagerView+TextView)
......（其他方式后续会补充）
效果预览
首先来个开胃菜，看看实现效果：
先贴出项目所需的资源文件，这些可随个人自由更改颜色和文字
colors.xml
<color name="bg_line_light_gray">#9b9b9b</color> <color name="bg_main_green">#31c016</color>
strings.xml
<string name="bottom_menu_me">我</string> <string name="bottom_menu_discovery">发现</string> <string name="bottom_menu_addressbook">通讯录</string> <string name="bottom_menu_wechat">微信</string>
由于底部四个菜单项的布局都是类似的，可以把相同的内容提取出来，定义为style进行使用。这样不仅减少了代码量，也便于日后的维护。
styles.xml
<style name="ButtomMenuImgv"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_marginBottom">5dp</item> <item name="android:layout_marginTop">5dp</item> </style> <style name="ButtomMenuTv"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_marginBottom">5dp</item> <item name="android:textSize">12sp</item> <item name="android:textColor">@drawable/ic_menu_textcolors_selector</item> </style> <style name="ButtomMenuItemLayout"> <item name="android:layout_width">0dp</item> <item name="android:layout_height">match_parent</item> <item name="android:layout_weight">1</item> <item name="android:gravity">center</item> <item name="android:orientation">vertical</item> </style>
在res->drawable-xxhdpi文件夹中添加了8张png资源图片，分别对应菜单栏图片的选中与未选中状态。接着在res->drawable文件夹（如没有该文件夹则自己新建）中添加对应的四个选择器。
ic_menu_chat_selector.xml
ic_menu_addressbook_selector.xml
ic_menu_discovery_selector.xml
ic_menu_me_selector.xml
这里只贴出其中一个xml代码文件的内容（ic_menu_chat_selector.xml），其他只需更改相对应图片资源即可。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/ic_menu_chat_light" android:state_selected="true"></item> <item android:drawable="@drawable/ic_menu_chat_normal"></item> </selector>
在res->layout中新建四个布局文件
fragment_chat.xml
fragment_addressbook.xml
fragment_discovery.xml
fragment_me.xml
其中我只是简单地放了四个TextView用来区分，这里只贴出其中一个布局代码（fragment_chat.xml）
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="32sp" android:layout_centerInParent="true" android:text="@string/bottom_menu_wechat" /> </RelativeLayout>
在src文件夹下新建一个包用来存放fragment相关的文件，本项目中包名定义为com.example.bottommenu_vp_imgv_tv.fragment，接着在该包下新建四个类继承Fragment;（我们会发现Fragment有两个类：android.app.Fragment和android.support.v4.app.Fragment，这里我用android.support.v4.app.Fragment，那为何不使用android.app.Fragment呢？由于android.app.Fragment 兼容的最低版本是android:minSdkVersion="11"，而android.support.v4.app.Fragment 可兼容的最低版本是android:minSdkVersion="4"，但无论你选用哪个，在之后所有使用与Fragment相关的内容都要相对应。）
ChatFragment.Java
AddressBookFragment.Java
DiscoveryFragment.Java
MeFragment.Java
这里只贴出其中一个代码文件的内容（ChatFragment.Java），其他只需更改相对应布局文件即可。
import com.example.bottommenu_vp_imgv_tv.R;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class ChatFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = View.inflate(getActivity(), R.layout.fragment_chat, null);
return view;
}
}
新建一个FragmentPagerAdapter适配器
FragmentAdapter.java
import java.util.ArrayList;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class FragmentAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> mFragments;
public FragmentAdapter(FragmentManager fm,ArrayList<Fragment> fragment) {
super(fm);
this.mFragments = fragment;
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public Fragment getItem(int arg0) {
return mFragments.get(arg0);
}
}
所有准备工作已经完成，接下来就是具体实现了，基本思路是：底部图片文字资源采用选择器去实现，当选中某个菜单项时，重置所有菜单项为未选中状态，接着选中指定的菜单项并让ViewPager显示该菜单项对应的Fragment即可。
MainActivity.java
import java.util.ArrayList;
import com.example.bottommenu_vp_imgv_tv.fragment.AddressBookFragment;
import com.example.bottommenu_vp_imgv_tv.fragment.ChatFragment;
import com.example.bottommenu_vp_imgv_tv.fragment.DiscoveryFragment;
import com.example.bottommenu_vp_imgv_tv.fragment.FragmentAdapter;
import com.example.bottommenu_vp_imgv_tv.fragment.MeFragment;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.TextView;
public class MainActivity extends FragmentActivity implements OnClickListener,
OnPageChangeListener {
private ArrayList<TextView> tv_menus;
private ArrayList<ImageView> imgv_menus;
private ViewPager mViewPager;
private ArrayList<Fragment> mFragments;
private FragmentAdapter mMainMenuAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
initEvent();
}
// 初始化控件
private void initView() {
tv_menus = new ArrayList<TextView>();
tv_menus.add((TextView) findViewById(R.id.tv_bottomMenu_chat));
tv_menus
.add((TextView) findViewById(R.id.tv_bottomMenu_addressbook));
tv_menus.add((TextView) findViewById(R.id.tv_bottomMenu_discovery));
tv_menus.add((TextView) findViewById(R.id.tv_bottomMenu_me));
imgv_menus = new ArrayList<ImageView>();
imgv_menus.add((ImageView) findViewById(R.id.imgv_bottomMenu_chat));
imgv_menus
.add((ImageView) findViewById(R.id.imgv_bottomMenu_addressbook));
imgv_menus
.add((ImageView) findViewById(R.id.imgv_bottomMenu_discovery));
imgv_menus.add((ImageView) findViewById(R.id.imgv_bottomMenu_me));
mViewPager = (ViewPager) findViewById(R.id.vp_main_menuContent);
}
// 初始化数据
private void initData() {
mFragments = new ArrayList<Fragment>();
mFragments.add(new ChatFragment());
mFragments.add(new AddressBookFragment());
mFragments.add(new DiscoveryFragment());
mFragments.add(new MeFragment());
mMainMenuAdapter = new FragmentAdapter(getSupportFragmentManager(),
mFragments);
setMenuSelector(0); // 默认选中第一个菜单项“微信”
}
// 初始化事件
private void initEvent() {
mViewPager.setAdapter(mMainMenuAdapter);
mViewPager.setOnPageChangeListener(this);
findViewById(R.id.ll_bottomMenu_chat).setOnClickListener(this);
findViewById(R.id.ll_bottomMenu_addressBook).setOnClickListener(this);
findViewById(R.id.ll_bottomMenu_discovery).setOnClickListener(this);
findViewById(R.id.ll_bottomMenu_me).setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ll_bottomMenu_chat:
setMenuSelector(0);
break;
case R.id.ll_bottomMenu_addressBook:
setMenuSelector(1);
break;
case R.id.ll_bottomMenu_discovery:
setMenuSelector(2);
break;
case R.id.ll_bottomMenu_me:
setMenuSelector(3);
break;
}
}
/**
* 选中指定的菜单项并显示对应的Fragment
*
* @param index
*/
private void setMenuSelector(int index) {
reSetSelected();
tv_menus.get(index).setSelected(true);
imgv_menus.get(index).setSelected(true);
mViewPager.setCurrentItem(index);
}
/**
* 重置底部菜单所有ImageView和TextView为未选中状态
*/
private void reSetSelected() {
for (int i = 0; i < tv_menus.size(); i++) {
tv_menus.get(i).setSelected(false);
imgv_menus.get(i).setSelected(false);
}
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageSelected(int arg0) {
setMenuSelector(arg0);
}
}
贴上项目源码：Android仿微信底部菜单栏效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Android编程实现在自定义对话框中获取EditText中数据的方法
这篇文章主要介绍了Android编程实现在自定义对话框中获取EditText中数据的方法,结合实例形式分析了Android对话框数据传递相关操作技巧,需要的朋友可以参考下2018-01-01
本篇文章主要介绍了浅谈Android轻量级的数据缓存框架RxCache，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
Android Location服务之LocationManager案例详解
这篇文章主要介绍了Android Location服务之LocationManager案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了Android如何实现动态滚动波形图(心电图)功能，帮助大家更好的理解和学习使用Android，感兴趣的朋友可以了解下2021-03-03
Kotlin中ListView与RecyclerView的应用讲解
这篇文章主要介绍了Kotlin中ListView与RecyclerView的应用讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
android6.0在设置->安全->屏幕固定开启后，然后再长按home键出现最近的几个Activity可以选择一个图钉按钮就开启了屏幕固定功能。这篇文章主要介绍了Android6.0 屏幕固定功能的相关资料,感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了Android基于IJKPlayer视频播放器简单封装设计，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了android TabLayout的指示器宽度问题,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了Android如何使用Bmob后端云实现失物招领功能，帮助大家更好的理解和学习使用Android，感兴趣的朋友可以了解下2021-03-03
这篇文章主要为大家详细介绍了android实现筛选菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
最新评论