效果图：
二、布局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>