九宫格菜单布局

这里要介绍一下制作九宫格菜单的两种方法：

第一种就是直接使用布局文件。在ScrollView中嵌套Button即可，这种做法适用于按钮位置不变，功能固定的情况。

第二种使用的是GridView，通过设置数据源来动态生成布局，这种做法灵活性比较大，适用于功能不固定的情况，比如用户的权限不够的时候，设置某些按钮不可见等。

 

我将这两种做法整理到一个Demo中。下面是效果图：

 

下面先介绍第一种做法 （使用布局文件）的主要代码：

布局文件activity_common.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg_register" >
    
<!-- Title -->
    <RelativeLayout
        android:id="@+id/rl_title"
        android:layout_width="fill_parent"
        android:layout_height="45dip"
        android:layout_alignParentTop="true"
        android:background="@drawable/bg_title_bar"
        android:gravity="center_vertical" >

        <Button
            android:id="@+id/btn_back"
            android:layout_width="70dip"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="8dip"
            android:background="@drawable/title_btn_back_selector"
            android:text="@string/back"
            android:textColor="@color/title_button_color_gray" />
    </RelativeLayout>
    
<!-- Ads -->
    <TextView
        android:id="@+id/tv_add"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@drawable/add_icon" />
    
<!-- Five Direction Pad Buttons -->
    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tv_add"
        android:layout_below="@+id/rl_title" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/btn_workbench"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:background="@drawable/main_icon_bg_selector"
                    android:drawableTop="@drawable/main_icon_workbench"
                    android:paddingTop="5dip"
                    android:text="@string/main_btn_workbench"
                    android:textColor="@color/main_button_color" />

                <Button
                    android:id="@+id/btn_company"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:background="@drawable/main_icon_bg_selector"
                    android:drawableTop="@drawable/main_icon_company"
                    android:paddingTop="5dip"
                    android:text="@string/main_btn_company"
                    android:textColor="@color/main_button_color" />

                <Button
                    android:id="@+id/btn_zxl"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:background="@drawable/main_icon_bg_selector"
                    android:drawableTop="@drawable/main_icon_zxl"
                    android:paddingTop="5dip"
                    android:text="@string/main_btn_zxl"
                    android:textColor="@color/main_button_color" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/btn_manage"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:background="@drawable/main_icon_bg_selector"
                    android:drawableTop="@drawable/main_icon_manage"
                    android:paddingTop="5dip"
                    android:text="@string/main_btn_manage"
                    android:textColor="@color/main_button_color" />

                <Button
                    android:id="@+id/btn_record"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:background="@drawable/main_icon_bg_selector"
                    android:drawableTop="@drawable/main_icon_record"
                    android:paddingTop="5dip"
                    android:text="@string/main_btn_record"
                    android:textColor="@color/main_button_color" />

                <Button
                    android:id="@+id/btn_addlist"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:background="@drawable/main_icon_bg_selector"
                    android:drawableTop="@drawable/main_icon_addlist"
                    android:paddingTop="5dip"
                    android:text="@string/main_btn_addlist"
                    android:textColor="@color/main_button_color" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/btn_placard"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:background="@drawable/main_icon_bg_selector"
                    android:drawableTop="@drawable/main_icon_placard"
                    android:paddingTop="5dip"
                    android:text="@string/main_btn_placard"
                    android:textColor="@color/main_button_color" />

                <Button
                    android:id="@+id/btn_my_record"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:background="@drawable/main_icon_bg_selector"
                    android:drawableTop="@drawable/main_icon_myrecord"
                    android:paddingTop="5dip"
                    android:text="@string/main_btn_myrecord"
                    android:textColor="@color/main_button_color" />

                <Button
                    android:id="@+id/btn_set"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_margin="5dip"
                    android:layout_weight="1"
                    android:background="@drawable/main_icon_bg_selector"
                    android:drawableTop="@drawable/main_icon_set"
                    android:paddingTop="5dip"
                    android:text="@string/main_btn_set"
                    android:textColor="@color/main_button_color" />
            </LinearLayout>
        </LinearLayout>
    </ScrollView>

</RelativeLayout>

 

CommonActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

/**
 * This Five Direction Pad is made by the widget of ScrollView and Button 
 * 
 * 这种做法使用的是ScrollView嵌套Button来实现九宫格，相对于GridView的做法，灵活性较差
 * 
 * @author MichaelYe
 * @since 2012-9-4
 * */
public class CommonActivity extends Activity
{

	private ViewHolder viewHolder;
	class ViewHolder
	{
		private Button btnBack;
		private Button btnWorkbanch;
		private Button btnCompany;
		private Button btnZXL;
		private Button btnmanage;
		private Button btnArchive;
		private Button btnAddBook;
		private Button btnPlacard;
		private Button btnMyArchive;
		private Button btnSet;
	}
	
	@Override
	public void onCreate(Bundle savedInstanceState) 
	{
	    super.onCreate(savedInstanceState);
	    setContentView(R.layout.common_activity);
	    viewHolder = new ViewHolder();
	    iniComponent();
	}
	
	private void iniComponent()
	{
		viewHolder.btnBack = (Button)findViewById(R.id.btn_back);
		viewHolder.btnWorkbanch = (Button)findViewById(R.id.btn_workbench);
		viewHolder.btnCompany = (Button)findViewById(R.id.btn_company);
		viewHolder.btnZXL = (Button)findViewById(R.id.btn_zxl);
		viewHolder.btnmanage = (Button)findViewById(R.id.btn_manage);
		viewHolder.btnArchive = (Button)findViewById(R.id.btn_record);
		viewHolder.btnAddBook = (Button)findViewById(R.id.btn_addlist);
		viewHolder.btnPlacard = (Button)findViewById(R.id.btn_placard);
		viewHolder.btnMyArchive = (Button)findViewById(R.id.btn_my_record);
		viewHolder.btnSet = (Button)findViewById(R.id.btn_set);
		
		viewHolder.btnBack.setOnClickListener(clickListener);
		viewHolder.btnWorkbanch.setOnClickListener(clickListener);
		viewHolder.btnCompany.setOnClickListener(clickListener);
		viewHolder.btnZXL.setOnClickListener(clickListener);
		viewHolder.btnmanage.setOnClickListener(clickListener);
		viewHolder.btnArchive.setOnClickListener(clickListener);
		viewHolder.btnAddBook.setOnClickListener(clickListener);
		viewHolder.btnPlacard.setOnClickListener(clickListener);
		viewHolder.btnMyArchive.setOnClickListener(clickListener);
		viewHolder.btnSet.setOnClickListener(clickListener);
	}
	 
	private View.OnClickListener clickListener = new View.OnClickListener() 
	{
		
		public void onClick(View v) 
		{
			switch (v.getId()) 
			{
				case R.id.btn_back:
					finish();
					break;
				case R.id.btn_workbench:
					break;
				case R.id.btn_company:
					break;
				case R.id.btn_zxl:
					break;
				case R.id.btn_manage:
					break;
				case R.id.btn_record:
					break;
				case R.id.btn_addlist:
					break;
				case R.id.btn_placard:
					break;
				case R.id.btn_my_record:
					break;
				case R.id.btn_set:
					break;
			}
		}
	};
}

 

 

 

第二种做法

使用GridView的做法：

 

布局文件：

activity_main:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg_register" >

    <RelativeLayout
        android:id="@+id/rl_title"
        android:layout_width="fill_parent"
        android:layout_height="45dip"
        android:layout_alignParentTop="true"
        android:background="@drawable/bg_title_bar"
        android:gravity="center_vertical" >

        <Button
            android:id="@+id/btn_logout"
            android:layout_width="70dip"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="8dip"
            android:background="@drawable/title_btn_rect_selector"
            android:text="@string/more"
            android:textColor="@color/title_button_color_gray" />
    </RelativeLayout>

    <TextView
        android:id="@+id/tv_add"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@drawable/add_icon" />

    <GridView
        android:id="@+id/gv_gridview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tv_add"
        android:layout_below="@+id/rl_title"
        android:focusable="false"
        android:numColumns="3" />

</RelativeLayout>

 

MainActivity.java

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

import android.app.Activity;
import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;
import android.widget.TextView;

/**
 * This Five Direction Pad is made by the widget of GridView and Button
 * 
 * 这个就宫格菜单采用的是GridView和Button来实现的
 * 
 * @author MichaelYe
 * @since 2012-9-4
 * */
public class MainActivity extends Activity 
{

	private ViewHolder viewHolder;
	private final static String STR_WORKBANCH = "工作台";
	private final static String STR_COMPANY = "公司概况";
	private final static String STR_ZHIXINLI = "执行力";
	private final static String STR_MANAGE = "人才管理";
	private final static String STR_ARCHIVE = "员工档案";
	private final static String STR_ADDRESS_BOOK = "通讯录";
	private final static String STR_PLACARD = "公告";
	private final static String STR_MY_ARCHIVE = "我的档案";
	private final static String STR_SET = "设置";
	
	class ViewHolder
	{
		private Button btnLogout;
		private TextView tvAdd;
		private GridView gvGridView;
	}
	
    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        viewHolder = new ViewHolder();
        iniComponent();
        viewHolder.gvGridView.setSelector(R.drawable.main_icon_bg_selector);//设置GridView自身的Item点击效果
        viewHolder.gvGridView.setAdapter(new GridViewAdapter(stringList));
        viewHolder.gvGridView.setOnItemClickListener(new OnItemClickListener() {

			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {

				Log.e("++++++++++++++++:", ""+position);
				
			}
		});
    }
    
    private List<String> stringList;
    private void iniComponent()
    {
    	viewHolder.btnLogout = (Button)findViewById(R.id.btn_logout);
    	viewHolder.tvAdd = (TextView)findViewById(R.id.tv_add);
    	viewHolder.gvGridView = (GridView)findViewById(R.id.gv_gridview);
    	viewHolder.btnLogout.setOnClickListener(clickListener);
    	viewHolder.tvAdd.setOnClickListener(clickListener);
    	
    	stringList = new ArrayList<String>();
    	stringList.add("工作台");
    	stringList.add("公司概况");
    	stringList.add("执行力");
    	stringList.add("人才管理");
    	stringList.add("员工档案");
    	stringList.add("通讯录");
    	stringList.add("公告");
    	stringList.add("我的档案");
    	stringList.add("设置");
    }
    
    private class GridViewAdapter extends BaseAdapter
    {
    	List<String> stringList;
    	int textColor;
    	Drawable iconBg;
    	public GridViewAdapter(List<String> stringList)
    	{
    		this.stringList = stringList;
    		textColor = MainActivity.this.getResources().getColor(R.color.main_button_color);//文字颜色
        	iconBg = MainActivity.this.getResources().getDrawable(R.drawable.main_icon_bg_normal);//透明背景
    	}
    	
		public int getCount() {
			return this.stringList.size();
		}

		public Object getItem(int position) {
			return null;
		}

		public long getItemId(int position) {
			return position;
		}
		class ViewHolder
		{
			private Button btn;
		}
		
		public View getView(int position, View convertView, ViewGroup parent) {

			ViewHolder viewHolder;
			if(convertView == null)
			{
				//另外一种通过布局文件加载Item的做法
//				LayoutInflater myInflater = LayoutInflater.from(Act_Main.this);  
//	            convertView = myInflater.inflate(R.layout.gridview_item, null);
//				viewHolder = new ViewHolder();
//				viewHolder.btn = (Button)convertView.findViewById(R.id.button);
//				convertView.setTag(viewHolder);
				
				viewHolder = new ViewHolder();
				viewHolder.btn = new Button(MainActivity.this);
				viewHolder.btn.setClickable(false);
				viewHolder.btn.setFocusable(false);
				convertView = viewHolder.btn;
				convertView.setTag(viewHolder);
			}
			else
			{
				viewHolder = (ViewHolder)convertView.getTag();
			}
			String str = this.stringList.get(position);
			if(str.equals(STR_WORKBANCH))
			{
				viewHolder.btn.setCompoundDrawablesWithIntrinsicBounds(null,MainActivity.this.getResources().getDrawable(R.drawable.main_icon_workbench),null,null);
				viewHolder.btn.setBackgroundDrawable(iconBg);
				viewHolder.btn.setTextColor(textColor);
				viewHolder.btn.setText(STR_WORKBANCH);
			}
			if(str.equals(STR_COMPANY))
			{
				viewHolder.btn.setCompoundDrawablesWithIntrinsicBounds(null,MainActivity.this.getResources().getDrawable(R.drawable.main_icon_company),null,null);
				viewHolder.btn.setBackgroundDrawable(iconBg);
				viewHolder.btn.setTextColor(textColor);
				viewHolder.btn.setText(STR_COMPANY);
			}
			if(str.equals(STR_ZHIXINLI))
			{
				viewHolder.btn.setCompoundDrawablesWithIntrinsicBounds(null,MainActivity.this.getResources().getDrawable(R.drawable.main_icon_zxl),null,null);
				viewHolder.btn.setBackgroundDrawable(iconBg);
				viewHolder.btn.setTextColor(textColor);
				viewHolder.btn.setText(STR_ZHIXINLI);
			}
			if(str.equals(STR_MANAGE))
			{
				viewHolder.btn.setCompoundDrawablesWithIntrinsicBounds(null,MainActivity.this.getResources().getDrawable(R.drawable.main_icon_manage),null,null);
				viewHolder.btn.setBackgroundDrawable(iconBg);
				viewHolder.btn.setTextColor(textColor);
				viewHolder.btn.setText(STR_MANAGE);
			}
			if(str.equals(STR_ARCHIVE))
			{
				viewHolder.btn.setCompoundDrawablesWithIntrinsicBounds(null,MainActivity.this.getResources().getDrawable(R.drawable.main_icon_record),null,null);
				viewHolder.btn.setBackgroundDrawable(iconBg);
				viewHolder.btn.setTextColor(textColor);
				viewHolder.btn.setText(STR_ARCHIVE);
			}
			if(str.equals(STR_ADDRESS_BOOK))
			{
				viewHolder.btn.setCompoundDrawablesWithIntrinsicBounds(null,MainActivity.this.getResources().getDrawable(R.drawable.main_icon_addlist),null,null);
				viewHolder.btn.setBackgroundDrawable(iconBg);
				viewHolder.btn.setTextColor(textColor);
				viewHolder.btn.setText(STR_ADDRESS_BOOK);
			}
			if(str.equals(STR_PLACARD))
			{
				viewHolder.btn.setCompoundDrawablesWithIntrinsicBounds(null,MainActivity.this.getResources().getDrawable(R.drawable.main_icon_placard),null,null);
				viewHolder.btn.setBackgroundDrawable(iconBg);
				viewHolder.btn.setTextColor(textColor);
				viewHolder.btn.setText(STR_PLACARD);
			}
			if(str.equals(STR_MY_ARCHIVE))
			{
				viewHolder.btn.setCompoundDrawablesWithIntrinsicBounds(null,MainActivity.this.getResources().getDrawable(R.drawable.main_icon_myrecord),null,null);
				viewHolder.btn.setBackgroundDrawable(iconBg);
				viewHolder.btn.setTextColor(textColor);
				viewHolder.btn.setText(STR_MY_ARCHIVE);
			}
			if(str.equals(STR_SET))
			{
				viewHolder.btn.setCompoundDrawablesWithIntrinsicBounds(null,MainActivity.this.getResources().getDrawable(R.drawable.main_icon_set),null,null);
				viewHolder.btn.setBackgroundDrawable(iconBg);
				viewHolder.btn.setTextColor(textColor);
				viewHolder.btn.setText(STR_SET);
//				viewHolder.btn.setOnClickListener(new OnClickListener() {
//					
//					public void onClick(View v) {
//						// TODO Auto-generated method stub
//						Log.e("111111111111111", "");
//					}
//				});
			}
			
			return convertView;
		}
    	
    };
    
    private View.OnClickListener clickListener = new View.OnClickListener() 
    {
		
		public void onClick(View v) 
		{
			switch (v.getId()) 
			{
				case R.id.btn_logout:
					Intent intent = new Intent();
					intent.setClass(MainActivity.this, CommonActivity.class);
					startActivity(intent);
					break;
				case R.id.tv_add:
					break;
			}
		}
    };

}

 

具体使用哪种可以根据情况而定。

项目下载地址：

https://github.com/michaelye/DemoGridView

评论

1 楼 liuweihug 2014-04-29  

这里有个js版的。jquery弹出九宫格菜单--适应复杂界面 
http://www.suchso.com/projecteactual/jquery-pop-nine-gongge-menu.html