Android仿微信底部菜单栏效果

前言

在市面上，大多数的APP都需要通过底部菜单栏来将程序的功能进行分类整理，通常都是分为3-5个大模块，从而正确有效地引导用户去使用我们的APP。实现底部菜单栏的方法也有很多种。

1.仿微信底部菜单栏(ViewPager+ImagerView+TextView)

......（其他方式后续会补充）

效果预览

首先来个开胃菜，看看实现效果：

先贴出项目所需的资源文件，这些可随个人自由更改颜色和文字
colors.xml

#9b9b9b 
#31c016 

strings.xml

我 
发现 
通讯录 
微信 

由于底部四个菜单项的布局都是类似的，可以把相同的内容提取出来，定义为style进行使用。这样不仅减少了代码量，也便于日后的维护。
styles.xml

 
 wrap_content 
 wrap_content 
 5dp 
 5dp 
 
 
 
 wrap_content 
 wrap_content 
 5dp 
 12sp 
 @drawable/ic_menu_textcolors_selector 
 
 
 
 0dp 
 match_parent 
 1 
 center 
 vertical 
 

在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），其他只需更改相对应图片资源即可。

在res->layout中新建四个布局文件

fragment_chat.xml
fragment_addressbook.xml
fragment_discovery.xml
fragment_me.xml

其中我只是简单地放了四个TextView用来区分，这里只贴出其中一个布局代码（fragment_chat.xml）

在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 mFragments; 
 public FragmentAdapter(FragmentManager fm,ArrayList 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 tv_menus; 
 private ArrayList imgv_menus; 
 private ViewPager mViewPager; 
 
 private ArrayList 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(); 
  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(); 
  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(); 
  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; 
 
  } 
 } 
 
  
 private void setMenuSelector(int index) { 
  reSetSelected(); 
  tv_menus.get(index).setSelected(true); 
  imgv_menus.get(index).setSelected(true); 
  mViewPager.setCurrentItem(index); 
 } 
 
  
 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仿微信底部菜单栏效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。