前言
在市面上，大多數的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仿微信底部菜單欄效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
