Android底部菜单的实现

http://www.cnblogs.com/pear-lemon/p/4845503.html

前言：以前制作菜单使用TabHost，但是android 3.0以上就被废弃了,google已经不建议使这个类了。ActionBar也是菜单，不过在头部，算是导航了

===本文就介绍怎么制作底部菜单===

 

1、底部菜单就是一张图片加一个文本，点击的时候改变颜色，先自定义个类MenuButton

public class MenuButton extends RelativeLayout{        private ImageView ivMenu;//菜单图片    private TextView tvMenu;//菜单文本    private int norColor;//文本未选中颜色    private int fosColor;//文本选中颜色    private int norImage;//未选中图片    private int fosImage;//选中图片        @SuppressLint("InflateParams")    public MenuButton(Context context, AttributeSet attrs) {        super(context, attrs);        addView(LayoutInflater.from(context).inflate(R.layout.layout_menu_button, null));        ivMenu = (ImageView) findViewById(R.id.iv_menu_button);        tvMenu = (TextView) findViewById(R.id.tv_menu_button);    }    public void setValues(String text, int norColor, int fosColor, int norImage, int fosImage){        this.norColor = norColor;        this.fosColor = fosColor;        this.norImage = norImage;        this.fosImage = fosImage;        tvMenu.setText(text);        setChecked(false);    }        public void setChecked(boolean isChecked){        if(isChecked){            ivMenu.setImageResource(fosImage);            tvMenu.setTextColor(getResources().getColor(fosColor));        }else{            ivMenu.setImageResource(norImage);            tvMenu.setTextColor(getResources().getColor(norColor));         }    }    }

布局文件如下:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent" >    <ImageView        android:id="@+id/iv_menu_button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:contentDescription="@null"        android:layout_centerHorizontal="true" />    <TextView        android:id="@+id/tv_menu_button"        android:layout_below="@id/iv_menu_button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true" /></RelativeLayout>

 

2、定义好的MenuButton放在首页底部，同时加一个ViewPager

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <LinearLayout        android:id="@+id/lay_menu"        android:layout_width="match_parent"        android:layout_height="48dp"        android:background="@color/menu_bg"        android:layout_alignParentBottom="true"        android:orientation="horizontal" >        <com.lining.menutest.view.MenuButton            android:id="@+id/mb_phone"            style="@style/MenuButton" />        <com.lining.menutest.view.MenuButton            android:id="@+id/mb_msg"            style="@style/MenuButton" />        <com.lining.menutest.view.MenuButton            android:id="@+id/mb_user"            style="@style/MenuButton" />    </LinearLayout>    <android.support.v4.view.ViewPager        android:id="@+id/vp_main"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_above="@id/lay_menu" /></RelativeLayout>

 

3、主要的初始化方法如下

private void initViews() {    mbPhone = (MenuButton) findViewById(R.id.mb_phone);    mbMsg = (MenuButton) findViewById(R.id.mb_msg);    mbUser = (MenuButton) findViewById(R.id.mb_user);    mbPhone.setValues("联系人", R.color.gray_text, R.color.blue_text,        R.drawable.menu_phone_normal, R.drawable.menu_phone_selected);    mbMsg.setValues("短信", R.color.gray_text, R.color.blue_text,        R.drawable.menu_msg_normal, R.drawable.menu_msg_selected);    mbUser.setValues("用户", R.color.gray_text, R.color.blue_text,        R.drawable.menu_user_normal, R.drawable.menu_user_selected);    mbPhone.setOnClickListener(this);    mbMsg.setOnClickListener(this);    mbUser.setOnClickListener(this);        vpMain = (ViewPager) findViewById(R.id.vp_main);//ViewPager    List<Fragment> fragmentList = new ArrayList<Fragment>();    fragmentList.add(new PhoneFragment());    fragmentList.add(new MsgFragment());    fragmentList.add(new UserFragment());    //Activity需要继承自FragmentActivity    vpMain.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), fragmentList));    vpMain.addOnPageChangeListener(new OnPageChangeListener() {        @Override        public void onPageScrollStateChanged(int arg0) {        }        @Override        public void onPageScrolled(int arg0, float arg1, int arg2) {        }        @Override        public void onPageSelected(int arg0) {        switch (arg0) {        case 0:            setPhoneChecked();            break;        case 1:            setMsgChecked();            break;        case 2:            setUserChecked();            break;        }        }    });    mbPhone.setChecked(true);//设置显示第一个}

public class MyPagerAdapter extends FragmentPagerAdapter{    List<Fragment> fragmentList;        public MyPagerAdapter(FragmentManager fragmentManager, List<Fragment> fragmentList){        super(fragmentManager);        this.fragmentList = fragmentList;    }        @Override    public int getCount() {        return fragmentList.size();    }    @Override    public Fragment getItem(int position) {        return fragmentList.get(position);    }}

 

4、写好了，看一看效果

就是这么简单：http://files.cnblogs.com/files/pear-lemon/MenuTest.zip