这里要介绍一下制作九宫格菜单的两种方法:
第一种就是直接使用布局文件。在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;
}
}
};
}
具体使用哪种可以根据情况而定。
项目下载地址: