Android底部菜单的实现

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