Android仿微信底部菜单栏效果

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

前言

在市面上，大多数的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仿微信底部菜单栏效果全部内容，希望文章能够帮你解决Android仿微信底部菜单栏效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。