自定义九宫格式的弹出menu

效果图：

二、布局activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bg"
    tools:context=".MainActivity"
      ><!-- tools:context=".MainActivity" -->
    <Button
        android:id="@+id/btn_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="show/hide Menu" />

   
     <RelativeLayout
        android:id="@+id/layout_menu"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_alignParentBottom="true" >

        <LinearLayout
            android:id="@+id/menu"
            android:layout_width="match_parent"
            android:layout_height="40dp"
            android:background="#dd000000"
            android:gravity="center" >

            <TextView
                android:id="@+id/tv_main"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="常用"
                android:textColor="#ffffffff" />

            <TextView
                android:id="@+id/tv_utils"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="工具"
                android:textColor="#ffffffff" />

            <TextView
                android:id="@+id/tv_set"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                android:text="设置"
                android:textColor="#ffffffff" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_anim"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/menu"
            android:background="#eeff8c00" >

            <ImageView
                android:id="@+id/iv_cursor"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:scaleType="matrix"
                android:src="@drawable/img_cursor" />
        </LinearLayout>

        <android.support.v4.view.ViewPager
            android:id="@+id/myPager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/layout_anim"
            android:flipInterval="30"
            android:persistentDrawingCache="animation" />
    </RelativeLayout>
    

</RelativeLayout>

二、mainactivity

package com.ct.menu;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.Button;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener{
    private TextView tv_main, tv_set, tv_utils;

    private ViewPager myPager;

    private ImageView iv_cursor;// 动画图片

    private List<View> listViews;//

    private int currentView;// 当前视图

    private int viewOffset;// 动画图片偏移量

    private int imgWidth;// 图片宽度

    private MyImgBtn imgBtn1, imgBtn2, imgBtn3, imgBtn4;

    RelativeLayout layout_meun;

    boolean menuShowed;
    
    boolean isOpen=false;

    private Button btn_menu;

    // ---------------------------------

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.init();

        Log.v("Create", "init is Finish");
    }

    public void onStart() {

        super.onStart();

        this.initImageView();

        Log.v("Start", "initImageView is Finish");

        this.initViewPager();

        Log.v("Start", "initViewPager is Finish");

        this.tv_main.setOnClickListener(new myOnClick(0));
        this.tv_utils.setOnClickListener(new myOnClick(1));
        this.tv_set.setOnClickListener(new myOnClick(2));

        this.btn_menu.setOnClickListener(this);

    }

    public void Destroy() {

        super.onDestroy();

    }
    
//    ----------------------
    
    /**
     * 监听菜单按键
     */
    public boolean onKeyDown(int keyCode,KeyEvent event){
        
        
        
        if(keyCode==KeyEvent.KEYCODE_MENU){
            
            if (isOpen) {//如果菜单是打开的，就关闭它
                
                this.layout_meun.setAnimation(new menuAnimation().hide());
                this.layout_meun.setVisibility(View.GONE);
                isOpen=false;
                
            }else{//如果菜单是关闭的 就打开它
                myPager.setCurrentItem(0);//打开时默认为选项卡一
                this.layout_meun.startAnimation(new menuAnimation().show());
                this.layout_meun.setVisibility(View.VISIBLE);
                isOpen=true;
            }
            
            
        }
        
        
        
        return true;
        
    }

    // --------------------------------------------------------------

    public void init() {
        this.tv_main = (TextView) this.findViewById(R.id.tv_main);
        this.tv_utils = (TextView) this.findViewById(R.id.tv_utils);
        this.tv_set = (TextView) this.findViewById(R.id.tv_set);
        this.layout_meun = (RelativeLayout) this.findViewById(R.id.layout_menu);
        this.btn_menu = (Button) this.findViewById(R.id.btn_menu);
        this.layout_meun.setVisibility(View.GONE);
        this.currentView = 0;
        this.viewOffset = 0;

    }

    // -------------------------

    /**
     * 初始化ViewPager
     */
    public void initViewPager() {

        this.myPager = (ViewPager) this.findViewById(R.id.myPager);

        this.listViews = new ArrayList<View>();

        // ------------------------

        // 添加每个选项卡的内容
        LayoutInflater inflater = this.getLayoutInflater();

        this.listViews.add(inflater.inflate(R.layout.view_main, null));
        this.listViews.add(inflater.inflate(R.layout.view_utils, null));
        this.listViews.add(inflater.inflate(R.layout.view_set, null));

        // ----------------------

        this.myPager.setAdapter(new myPagerAdapter(this.listViews));

        this.myPager.setOnPageChangeListener(new MyOnPageChangeListener());

        myPager.setCurrentItem(0);

    }

    // -------------------------------

    private void initImageView() {

        this.iv_cursor = (ImageView) this.findViewById(R.id.iv_cursor);

        this.imgWidth = BitmapFactory.decodeResource(getResources(),
                R.drawable.img_cursor).getWidth();// 获取图片宽度

        DisplayMetrics dm = new DisplayMetrics();

        getWindowManager().getDefaultDisplay().getMetrics(dm);

        int screenW = dm.widthPixels;// 获取分辨率宽度

        this.viewOffset = (screenW / 3 - this.imgWidth) / 2;// 计算偏移量

        Matrix matrix = new Matrix();

        // 每次平移的距离
        matrix.postTranslate(viewOffset, 0);

        this.iv_cursor.setImageMatrix(matrix);// 设置动画初始位置

    }

    // -----------------------------------------------------

    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.actvity_main, menu);
        return true;
    }

    // ----------------------------------

    /*
     * 
     * 对选项卡单击监听的实现方法
     */
    public class myOnClick implements View.OnClickListener {

        int index = 0;

        public myOnClick(int currentIndex) {

            index = currentIndex;
        }

        public void onClick(View v) {

            myPager.setCurrentItem(index);

        }

    }

    // -------------------------------

    /**
     * 
     * @author xiaoxiong ViewPager 每个页面的适配器
     * 
     */
    public class myPagerAdapter extends PagerAdapter {

        public List<View> myListViews;

        // -------------------

        public myPagerAdapter(List<View> myListViews) {

            this.myListViews = myListViews;

        }

        @Override
        public void destroyItem(View arg0, int arg1, Object arg2) {

            ((ViewPager) arg0).removeView(myListViews.get(arg1));

        }

        @Override
        public void finishUpdate(View arg0) {

        }

        @Override
        public int getCount() {

            return myListViews.size();

        }

        public Object instantiateItem(View arg0, int arg1) {

            if (arg1 < 3) {
                ((ViewPager) arg0).addView(myListViews.get(arg1 % 3), 0);

            }
            switch (arg1) {
            case 0:// 选项卡1

                GridView gridView = (GridView) arg0
                        .findViewById(R.id.myGridView);

                GridAdapter girdViewAdapter = new GridAdapter(
                        MainActivity.this);

                gridView.setAdapter(girdViewAdapter);

                /**
                 * 对 gridView中的选项单击监听
                 */
                gridView.setOnItemClickListener(new OnItemClickListener() {

                    @Override
                    public void onItemClick(AdapterView<?> arg0, View arg1,
                            int arg2, long arg3) {

                        switch (arg2) {
                        case 7:

                            MainActivity.this.finish();
                            break;

                        default:

                            Toast.makeText(MainActivity.this,
                                    "这个是GridView+ViewPager仿UC菜单栏",
                                    Toast.LENGTH_LONG).show();
                            break;
                        }

                    }
                });

                break;
            case 1:// 选项卡2
                break;
            case 2:// 选项卡3
                break;
            }

            return myListViews.get(arg1);

        }

        public boolean isViewFromObject(View arg0, Object arg1) {

            return arg0 == (arg1);

        }

        @Override
        public void restoreState(Parcelable arg0, ClassLoader arg1) {

        }

        @Override
        public Parcelable saveState() {

            return null;

        }

        @Override
        public void startUpdate(View arg0) {

        }

    }

    // -------------------------------------------------

    /*
     * 
     * ViewPager 页面改变的监听
     */
    public class MyOnPageChangeListener implements OnPageChangeListener {

        int one = viewOffset * 2 + imgWidth;// 页卡1 -> 页卡2 偏移量

        int two = one * 2;// 页卡1 -> 页卡3 偏移量

        @Override
        public void onPageSelected(int arg0) {

            Animation animation = null;

            switch (arg0) {

            case 0:

                if (currentView == 1) {

                    animation = new TranslateAnimation(one, 0, 0, 0);

                } else if (currentView == 2) {

                    animation = new TranslateAnimation(two, 0, 0, 0);

                }

                break;

            case 1:

                if (currentView == 0) {

                    animation = new TranslateAnimation(viewOffset, one, 0, 0);

                } else if (currentView == 2) {

                    animation = new TranslateAnimation(two, one, 0, 0);

                }

                break;

            case 2:

                if (currentView == 0) {

                    animation = new TranslateAnimation(viewOffset, two, 0, 0);

                } else if (currentView == 1) {

                    animation = new TranslateAnimation(one, two, 0, 0);

                }

                break;

            }

            currentView = arg0;

            animation.setFillAfter(true);// True:图片停在动画结束位置

            animation.setDuration(300);

            iv_cursor.startAnimation(animation);

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }

    }

    // --------------------------------------------

    /**
     * 菜单单击事件监听（控制显示和隐藏菜单）
     */
    public void onClick(View v) {

        if (v.getId() == R.id.btn_menu) {

            menuAnimation anim = new menuAnimation();

            if (this.menuShowed) {

                this.menuShowed = false;
                this.layout_meun.setAnimation(anim.hide());
                this.layout_meun.setVisibility(View.GONE);

            } else {
                myPager.setCurrentItem(0);//打开时默认为选项卡一
                this.menuShowed = true;
                this.layout_meun.startAnimation(anim.show());
                this.layout_meun.setVisibility(View.VISIBLE);
            }
        }

    }

    // ------------------------------------------------------

    /*
     * 隐藏和显示菜单动画
     */
    public class menuAnimation {

        Animation showMenu, hideMenu;

        public Animation show() {

            // showMenu=new TranslateAnimation(0, 0, 0, 0,
            // Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 1);
            showMenu = new ScaleAnimation(0, 1, 0, 1,
                    Animation.RELATIVE_TO_SELF, 0.5f,
                    Animation.RELATIVE_TO_SELF, 0);
            showMenu.setDuration(1000);
            return showMenu;
        }

        public Animation hide() {

            // hideMenu=new TranslateAnimation(0, 0, 0, 0,
            // Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 0);
            hideMenu = new ScaleAnimation(1, 0, 1, 0,
                    Animation.RELATIVE_TO_SELF, 0.5f,
                    Animation.RELATIVE_TO_SELF, 1);

            hideMenu.setDuration(1000);

            Log.v("menuAnimation", "hide");

            return hideMenu;

        }

    }

    
    
}

三、GridAdapter

package com.ct.menu;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class GridAdapter extends BaseAdapter{
    private Context mContext;
    private int[] resId = {R.drawable.s1,R.drawable.s2,R.drawable.s3,
            R.drawable.s4,R.drawable.s5,R.drawable.s6,R.drawable.s7,R.drawable.s8};
    private String[] stringId={"加入书签","书签/历史","刷新","夜间模式","账户","下载文件","全屏","退出"};
    private LayoutInflater mInflater;
    public GridAdapter(Context mContext){
        this.mContext = mContext;
        mInflater = LayoutInflater.from(mContext);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return resId.length;
    }

    @Override
    public Object getItem(int arg0) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getItemId(int arg0) {
        // TODO Auto-generated method stub
        return arg0;
    }

    @Override
    public View getView(int arg0, View arg1, ViewGroup arg2) {
        // TODO Auto-generated method stub
        if(arg1 == null){
            arg1 = mInflater.inflate(R.layout.myimabtn, null);
        }
        TextView tv = (TextView) arg1.findViewById(R.id.imgbtn_text);
        ImageView img = (ImageView) arg1.findViewById(R.id.imgbtn_img);
        tv.setText(stringId[arg0]);
        img.setImageResource(resId[arg0]);
        return arg1;
    }

}

四、view_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#77ff0000"
    android:orientation="vertical" >
    
    <GridView 
        android:id="@+id/myGridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="4"
        android:layout_margin="10dp"
        android:horizontalSpacing="20dp"
        android:gravity="center"
        android:verticalSpacing="20dp"

        ></GridView>

    

</LinearLayout>