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仿微信底部菜单栏效果

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