Android仿微信底部菜單欄效果

更新時(shí)間：2020年07月20日 11:17:16 作者：Homilier

這篇文章主要為大家詳細(xì)介紹了Android仿微信底部菜單欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

在市面上，大多數(shù)的APP都需要通過底部菜單欄來將程序的功能進(jìn)行分類整理，通常都是分為3-5個(gè)大模塊，從而正確有效地引導(dǎo)用戶去使用我們的APP。實(shí)現(xiàn)底部菜單欄的方法也有很多種。

1.仿微信底部菜單欄(ViewPager+ImagerView+TextView)

......（其他方式后續(xù)會(huì)補(bǔ)充）

效果預(yù)覽

首先來個(gè)開胃菜，看看實(shí)現(xiàn)效果：

先貼出項(xiàng)目所需的資源文件，這些可隨個(gè)人自由更改顏色和文字
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">發(fā)現(xiàn)</string> 
<string name="bottom_menu_addressbook">通訊錄</string> 
<string name="bottom_menu_wechat">微信</string>

由于底部四個(gè)菜單項(xiàng)的布局都是類似的，可以把相同的內(nèi)容提取出來，定義為style進(jìn)行使用。這樣不僅減少了代碼量，也便于日后的維護(hù)。
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資源圖片，分別對(duì)應(yīng)菜單欄圖片的選中與未選中狀態(tài)。接著在res->drawable文件夾（如沒有該文件夾則自己新建）中添加對(duì)應(yīng)的四個(gè)選擇器。

ic_menu_chat_selector.xml
ic_menu_addressbook_selector.xml
ic_menu_discovery_selector.xml
ic_menu_me_selector.xml

這里只貼出其中一個(gè)xml代碼文件的內(nèi)容（ic_menu_chat_selector.xml），其他只需更改相對(duì)應(yīng)圖片資源即可。

<?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中新建四個(gè)布局文件

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

其中我只是簡單地放了四個(gè)TextView用來區(qū)分，這里只貼出其中一個(gè)布局代碼（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文件夾下新建一個(gè)包用來存放fragment相關(guān)的文件，本項(xiàng)目中包名定義為com.example.bottommenu_vp_imgv_tv.fragment，接著在該包下新建四個(gè)類繼承Fragment;（我們會(huì)發(fā)現(xiàn)Fragment有兩個(gè)類：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"，但無論你選用哪個(gè)，在之后所有使用與Fragment相關(guān)的內(nèi)容都要相對(duì)應(yīng)。）

ChatFragment.Java
AddressBookFragment.Java
DiscoveryFragment.Java
MeFragment.Java

這里只貼出其中一個(gè)代碼文件的內(nèi)容（ChatFragment.Java），其他只需更改相對(duì)應(yīng)布局文件即可。

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; 
 } 
}

新建一個(gè)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); 
 } 
 
}

所有準(zhǔn)備工作已經(jīng)完成，接下來就是具體實(shí)現(xiàn)了，基本思路是：底部圖片文字資源采用選擇器去實(shí)現(xiàn)，當(dāng)選中某個(gè)菜單項(xiàng)時(shí)，重置所有菜單項(xiàng)為未選中狀態(tài)，接著選中指定的菜單項(xiàng)并讓ViewPager顯示該菜單項(xiàng)對(duì)應(yīng)的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); 
 } 
 
 // 初始化數(shù)據(jù) 
 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); // 默認(rèn)選中第一個(gè)菜單項(xiàng)“微信” 
 } 
 
 // 初始化事件 
 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; 
 
  } 
 } 
 
 /** 
  * 選中指定的菜單項(xiàng)并顯示對(duì)應(yīng)的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為未選中狀態(tài) 
  */ 
 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); 
 } 
}

貼上項(xiàng)目源碼：Android仿微信底部菜單欄效果

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: