Android底部菜單的實現

前言：之前製做菜單使用TabHost，可是android 3.0以上就被廢棄了,google已經不建議使這個類了。ActionBar也是菜單，不過在頭部，算是導航了

===本文就介紹怎麼製做底部菜單===

 

一、底部菜單就是一張圖片加一個文本，點擊的時候改變顏色，先自定義個類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>

 

二、定義好的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>

 

三、主要的初始化方法以下

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

}

 

四、寫好了，看一看效果

就是這麼簡單：http://files.cnblogs.com/files/pear-lemon/MenuTest.zip