Android 二级菜单最终版

上个图：

终于有个了断了，之前因为自己分析不到位，导致了之前的二级菜单有点问题，所以重新思考了下，改成现在这个样子，利用神奇的点9图片，实现这个效果。

总是来说，就是将被点击的背景图改变，那个小箭头其实就是被点击项的背景图，而下面是gridview，因为靠的比较近，看起来是连在一起的。看代码：

CusMenu.java

package com.example.twolevelmenu;

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

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.twolevelmenu.MenuBean.MenuChildBean;
import com.lidroid.xutils.BitmapUtils;
import com.lidroid.xutils.bitmap.BitmapDisplayConfig;
import com.lidroid.xutils.bitmap.callback.BitmapLoadCallBack;
import com.lidroid.xutils.bitmap.callback.BitmapLoadFrom;

public class CusMenu extends LinearLayout {

	/**
	 * 列数
	 */
	private int colum = 3;

	/**
	 * 加载数据的下标
	 */
	private int index;

	/**
	 * 记录点击的id
	 */
	private int id;

	private BitmapUtils bitmapUtils = null;

	/**
	 * 相关数据源和view
	 */
	private List<MenuBean> list;
	private List<MyGridView> gridviewList = new ArrayList<MyGridView>();
	private List<LinearLayout> linearLayoutList = new ArrayList<LinearLayout>();

	public CusMenu(Context context) {
		super(context);
	}

	public CusMenu(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		TypedArray a = context.obtainStyledAttributes(attrs,
				R.styleable.CusMenu);
		colum = a.getInt(R.styleable.CusMenu_colum, 3);
		a.recycle();
		//setBackgroundResource(R.drawable.order_list_04);
	}

	public void init(List<MenuBean> list) {
		if (list == null || list.size() == 0)
			return;
		this.setOrientation(LinearLayout.VERTICAL);
		this.setBackgroundColor(getResources().getColor(android.R.color.white));
		if(bitmapUtils == null){
			bitmapUtils = new BitmapUtils(getContext());
			bitmapUtils.configDefaultLoadingImage(R.drawable.ic_launcher);
			bitmapUtils.configDefaultLoadFailedImage(R.drawable.ic_launcher);
			bitmapUtils.configDefaultBitmapConfig(Bitmap.Config.RGB_565);
		}

		this.list = list;
		int row = 0;
		int size = this.list.size();
		// 计算行数
		if (size % colum == size) {// 和列数取余，等于本身说明不够一行
			row = 1;
		} else if (size % colum == 0) {// 等于0说明刚好除尽，直接除
			row = size / colum;
		} else {// 超过，+1行
			row = size / colum + 1;
		}

		for (int i = 1; i <= row; i++) {
			// 每一行的布局，包含colum个列布局
			LinearLayout rowLinearLayout = new LinearLayout(getContext());
			LinearLayout.LayoutParams rowLinearLayoutParams = new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT);
			rowLinearLayoutParams.setMargins(0, 20, 0, 0);
			rowLinearLayout.setLayoutParams(rowLinearLayoutParams);
			rowLinearLayout.setOrientation(LinearLayout.HORIZONTAL);
			rowLinearLayout.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
			rowLinearLayout.setBackgroundColor(getResources().getColor(android.R.color.white));
			if(i == 1){//第一行上方应该留出更多空间
				rowLinearLayout.setPadding(0, 30, 0, 0);
			}else{
				rowLinearLayout.setPadding(0, 20, 0, 0);
			}
			//rowLinearLayout.setPadding(0, 20, 0, 0);
			// 每一行布局下面隐藏一个gridview，显示子菜单
			MyGridView rowGridView = new MyGridView(getContext());
			rowGridView.setNumColumns(colum);
			rowGridView.setHorizontalSpacing(0);
			rowGridView.setVerticalSpacing(2);
			rowGridView.setVisibility(View.GONE);
			rowGridView.setId(i+1000);//1000为随便给的数，防止id重复
			//rowGridView.setPadding(0, 5, 0, 0);
			rowGridView.setSelector(new ColorDrawable(Color.TRANSPARENT));
			rowGridView.setBackgroundColor(Color.rgb(230, 230, 230));
			LinearLayout.LayoutParams rowGridViewParams = new LinearLayout.LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
			rowGridViewParams.setMargins(10, 0, 10, 0);
			rowGridView.setLayoutParams(rowGridViewParams);
			gridviewList.add(rowGridView);
			this.addView(rowLinearLayout);
			this.addView(rowGridView);

			for (int j = 1; j <= colum; j++) {
				// 每一列的布局,包含Imageview和Textview
				// 创建包含Imageview和Textview的Linearyout
				LinearLayout columLinearLayout = new LinearLayout(getContext());
				columLinearLayout.setOrientation(LinearLayout.VERTICAL);
				LinearLayout.LayoutParams columLinearLayoutParams = new LayoutParams(
						0, LayoutParams.WRAP_CONTENT, 1);
				columLinearLayoutParams.gravity = Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL;
				columLinearLayout.setLayoutParams(columLinearLayoutParams);
				columLinearLayout.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
				linearLayoutList.add(columLinearLayout);

				if (index < size) {

					columLinearLayout.setTag(R.id.index, index);
					columLinearLayout.setTag(rowGridView);
					columLinearLayout.setId(index);
					columLinearLayout.setOnClickListener(new OnClickListener() {

						@Override
						public void onClick(View v) {
							// TODO Auto-generated method stub
							final int index = (Integer) v.getTag(R.id.index);// 取得要加载的数据的下标
							MyGridView gridView = (MyGridView) v.getTag();//获取gridview
							final List<MenuBean.MenuChildBean> childList = CusMenu.this.list.get(index).childList;
							//如果子菜单为空或者子菜单的size是0，childIndex返回-1
							if(childList==null||childList.size() == 0){
								if (onChildGridViewItemClick != null) {
									onChildGridViewItemClick.onItemClick(
											index, -1);
								}
								gridView.setVisibility(View.GONE);
								id = v.getId();// 记录点击的父菜单
								return;
							}else{
								resetLinearLayoutBg();
								v.setBackgroundResource(R.drawable.newmain_colum_bg);
							}

							//子菜单的监听，回调
							gridView.setOnItemClickListener(new OnItemClickListener() {

								@Override
								public void onItemClick(AdapterView<?> parent,
										View view, int position, long id) {
									if (onChildGridViewItemClick != null && childList.get(position) != null) {
										onChildGridViewItemClick.onItemClick(
												index, position);
									}
								}
							});
							//子菜单还没显示
							if (gridView.getVisibility() == View.GONE) {
								gridView.setVisibility(View.VISIBLE);//显示子菜单
								for( MyGridView myGridView : gridviewList ){//遍历每行的gridview
									if(gridView.getId() != myGridView.getId()){//若不是此行的gridview，隐藏
										myGridView.setVisibility(View.GONE);
									}
								}
								if (gridView.getAdapter() == null) {
									gridView.setAdapter(new Adapter(childList));
								} else {
									((Adapter) gridView.getAdapter()).changeList(childList);
								}
							} else {
								if (id == v.getId()) {// 此处判断是否点击同一父菜单，是的话隐藏子菜单，否则更新子菜单
									gridView.setVisibility(View.GONE);
									v.setBackgroundResource(R.drawable.newmain_colum_bg_nor);
								} else {
									((Adapter) gridView.getAdapter()).changeList(childList);
								}
							}
							id = v.getId();// 记录点击的父菜单
						}
					});

					ImageView columImageView = new ImageView(getContext());
					columImageView.setScaleType(ScaleType.FIT_XY);
					final int width = (int) (ScreenInfo.screenWidth * 0.185);//0.185为图片占屏幕的比例
					LinearLayout.LayoutParams imgParams = new LayoutParams(
							width, width);
					imgParams.setMargins(0, 0, 0, 10);
					imgParams.gravity = Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL;
					columImageView.setLayoutParams(imgParams);
					MenuBean menuBean = CusMenu.this.list.get(index);
					//图片加载顺序 网络>本地>默认
					if(menuBean.logo_url!=null && menuBean.logo_url.length() > 0){//若有网络图片
						bitmapUtils.display(columImageView, menuBean.logo_url,new BitmapLoadCallBack<View>() {

							@Override
							public void onLoadCompleted(View container,
									String uri, Bitmap bitmap,
									BitmapDisplayConfig config,
									BitmapLoadFrom from) {
								// TODO Auto-generated method stub
								((ImageView)container).setImageBitmap(bitmap);//cutterBitmap(bitmap, width, width));
							}

							@Override
							public void onLoadFailed(View container,
									String uri, Drawable drawable) {
								// TODO Auto-generated method stub

							}
						});
					}else if(menuBean.logo_id != 0){//若有本地图片
						columImageView.setImageResource(menuBean.logo_id);
					}else{//默认图片
						columImageView.setImageResource(R.drawable.newmain_icon5);
					}

					TextView columTextView = new TextView(getContext());
					columTextView.setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL);
					columTextView.setText(this.list.get(index).desc);
					columTextView.setTextColor(getResources().getColor(android.R.color.black));
					// 添加到列布局
					columLinearLayout.addView(columImageView);
					columLinearLayout.addView(columTextView);
				} else {
					// 添加到行布局
					columLinearLayout.setVisibility(View.INVISIBLE);
				}
				rowLinearLayout.addView(columLinearLayout);
				index++;
			}
		}
	}

	class Adapter extends BaseAdapter {

		private List<MenuChildBean> list;

		public Adapter(List<MenuChildBean> childList) {
			this.list = childList;
			checkList();
		}

		public void changeList(List<MenuChildBean> list) {
			this.list = list;
			checkList();
			notifyDataSetChanged();
		}

		private void checkList(){
			int remainder = list.size()%colum;
			if(remainder == 0)return;
			for(int i = remainder; i < colum ; i ++){
				list.add(null);
			}
		}

		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			if(convertView == null){
				convertView = LayoutInflater.from(getContext()).inflate(R.layout.cusmenu_gridview_item, null);
			}
			TextView tv = ViewHolder.get(convertView, R.id.cusmenu_gridview_tv);
			tv.setTextColor(Color.rgb(70, 70, 70));
			tv.setVisibility(View.VISIBLE);
			tv.setTextSize(13);
			View line = ViewHolder.get(convertView, R.id.line);
			line.setVisibility(View.VISIBLE);
			if (list.get(position) != null) {
				tv.setText(list.get(position).desc);
			} else {
				tv.setVisibility(View.GONE);
				line.setVisibility(View.GONE);
			}
			if(position % colum == colum-1)line.setVisibility(View.GONE);
			return convertView;
		}

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

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

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

	public void hiddenChildMenu(){
		for( MyGridView myGridView : gridviewList ){//遍历每行的gridview
			myGridView.setVisibility(View.GONE);
		}
	}

	public void resetLinearLayoutBg(){
		for(LinearLayout linerLayout :linearLayoutList){
			linerLayout.setBackgroundResource(R.drawable.newmain_colum_bg_nor);
		}
	}

	private OnChildGridViewItemClick onChildGridViewItemClick;

	public void setOnChildGridViewItemClick(
			OnChildGridViewItemClick onChildGridViewItemClick) {
		this.onChildGridViewItemClick = onChildGridViewItemClick;
	}

	public interface OnChildGridViewItemClick {
		void onItemClick(int parentIndex, int childIndex);
	}
}

MenuActivity.java

package com.example.twolevelmenu;
import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Toast;

import com.example.twolevelmenu.R;

public class MenuActivity extends Activity{

	private List<MenuBean> list = new ArrayList<MenuBean>();
	private CusMenu cusMenu;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		ScreenInfo.initScreent(this);
		cusMenu=new CusMenu(this);
		//cusMenu.setImageName("a", ".png");
		setContentView(cusMenu);
		getDataTest();
	}

	private void getDataTest() {
		for (int i = 0; i < 5; i++) {
			MenuBean bean = new MenuBean();
			bean.desc = "插件" + i;
			bean.logo_id = R.drawable.newmain_icon5;
			bean.logo_url = "";
			List<MenuBean.MenuChildBean> childList = new ArrayList<MenuBean.MenuChildBean>();
			for(int j=0;j<=i;j++){
				MenuBean.MenuChildBean childBean = bean.new MenuChildBean();
				childBean.desc="子菜单"+j;
				childList.add(childBean);
			}
			bean.childList=childList;
			list.add(bean);
		}
		cusMenu.init(list);
		cusMenu.setOnChildGridViewItemClick(new CusMenu.OnChildGridViewItemClick() {

			@Override
			public void onItemClick(int parentIndex, int childIndex) {
				// TODO Auto-generated method stub
				Toast.makeText(getApplicationContext(), parentIndex+"--"+childIndex, Toast.LENGTH_SHORT).show();
			}
		});
	}

}

具体看demo，点此下载