GridView的学习
我们将通过两个例子学习GridView。Grid和Table有一点点类似。我们将在例子中逐步描绘如何编写一个Grid的Activity
例子一:继承ArrayAdapter作为自定义adapter
1、编写Android XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="@+id/selection4"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<GridView android:id="@+id/grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:verticalSpacing="35px" <!-- grid元素之间的竖直间隔 -->
android:horizontalSpacing="5px" <!--grid元素之间的水平间隔 -->
android:numColumns="auto_fit" <!--表示有多少列,如果设置为auto_fit,将根据columnWidth和Spacing来自动计算 -->
android:columnWidth="100px" <!-- 一般建议采用有像素密度无关的dip或者dp来表示-->
android:stretchMode="columnWidth" <!--如何填满空余的位置,模拟器采用WVGA800*480,每排4列,有4*100+5*3=415,还余65px的空间,如果是 columnWidth,则这剩余的65将分摊给4列,每列增加16/17px。如果采用SpacingWidth,则分摊给3个间隔空隙 -->
android:gravity="center" />
</LinearLayout>
2、编写代码。和其他selected widget,我们之前学习的ListView和Spinner的方式,通过setAdapter()来提供数据和子View显示风格,通过触发 setOnItemSelectedListener()注册选择listner。在这里处理选择之外,我们增加一个Click的触发,可以比较一下此两 的差异。此次我们不再使用Android自带的格式,而设置我们自己的UI风格。
public class Chapter7Test4 extends Activity implements OnItemSelectedListener,OnItemClickListener{
private TextView selection = null;
private String[] items={"lorem", "ipsum", "dolor", "sit", "amet", "hello", "me", "elit", "morbi", "vel", "ligula", "vitae", "arcu", "aliquet", "mollis", "etiam", "vel", "erat", "placerat", "ante","hi", "sodales", "test", "augue", "purus"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chapter_7_test4);
selection = (TextView)findViewById(R.id.selection4);
GridView grid= (GridView)findViewById(R.id.grid);
//步骤1:设置ArrayAdapter,可以采用android自带的格式,也可以自定义,这里我们将自己定义。
grid.setAdapter( new FunnyLookingAdapter(this, android.R.layout.simple_list_item_1,items));
//grid.setAdapter(new ArrayAdapter (this,android.R.layout.simple_list_item_1,items));
//步骤2:设置元素被选择以及被点击的回调触发处理
grid.setOnItemSelectedListener(this);
grid.setOnItemClickListener(this);
}
//步骤3:编写CallBack触发函数
@Override /* 这是OnItemSelectedListener接口*/
public void onItemSelected(AdapterView arg0, View arg1, int arg2, long arg3) {
selection.setText(items[arg2]);
}
@Override /* 这是OnItemSelectedListener接口*/
public void onNothingSelected(AdapterView arg0) {
selection.setText("");
}
@Override /* 这是OnItemClickListener接口*/
public void onItemClick(AdapterView arg0, View arg1, int arg2, long arg3) {
selection.setText("Clicked: " + items[arg2]);
}
//步骤4:编写自定义的adapter,继承ArrayAdapter
private class FunnyLookingAdapter extends ArrayAdapter {
private Context context;
private String[] theItems;
//步骤4.1:编写adapter的构造函数
FunnyLookingAdapter( Context context, int resource, String[] items){
super(context,resource,items);
this.context = context;
theItems = items;
}
//步骤4.2:重写getView(),对每个单元的内容以及UI格式进行描述
/*如果我们不使用TextView,则我们必须通过getView()对每一个gridview单元进行描述。这些单元可以是Button,ImageView,在这里我们使用Button和TextView分别作测试 重写override getView(int, View, ViewGroup),返回任何我们所希望的view。*/
public View getView (int position, View convertView, ViewGroup parent){
TextView label = (TextView)convertView;
//我们测试发现,除第一个convertView外,其余的都是NULL,因此如果没有view,我们需要创建
if(convertView == null){
convertView = new TextView(context);
label = (TextView)convertView;
}
label.setText(position + ": " + theItems[position]);
return convertView;
}
}// End of class FunnyLookingAdapter
}
左图是使用android自带的粗体格式,即被注释掉的setAdapter,图二为例子源代码示例,图右将 FunnyLookingAdapter中的getView()用Button代替TextView,这是发现有一个有趣的现象,Button是检测 Click动作,而我们在类中通过setItemClickListener中设置了对GridView中的item检测Click的动作,这两个是重叠 的,而将优先监听Button的Click,即我们定制的GridView中将得不到触发,这需特别注意。
例子二:继承BaseAdapter作为自定义adapter
这是来自Totorial的例子。在这里GridView里面的元素是ImageView。Android XML的文件很简单:
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" >
我们在来看看Java code。
1)我们将图片,copy至res/drawable-hdpi/中。
2)设置GridView的adapter,并设置点击触发函数,点击后采用Toast显示点击的序号。
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chapter_7_test5);
GridView gridview = (GridView)findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));
gridview.setOnItemClickListener(new OnItemClickListener(){
public void onItemClick(AdapterView parent, View v, int position, long id){
Toast.makeText(this, ""+position, Toast.LENGTH_SHORT).show();
}
});
}
3)设置我们自子的ImageAdapter,继承BasAdapter。
public class ImageAdapter extends BaseAdapter{
private Context context = null;
// references to our images
private Integer[] mThumbIds = {R.drawable.sample_2, R.drawable.sample_3,R.drawable.sample_4, R.drawable.sample_5,R.drawable.sample_6,...// 这里是文件的对应的Id,不在具体列出};
//步骤1: 构造函数
public ImageAdapter(Context context){
this.context = context;
}
//步骤2:BaseAdapter需要重构四个方法getCount(),getItem(),getItemId(int position),getView()
//步骤2.1:getCount() 表示How many items are in the data set represented by this Adapter.
public int getCount() {
return mThumbIds.length;
}
//步骤2.2:getItem()根据需要position获得布放在GridView的对象。在这个例子中,我们不需要处理里面的对象,可以设为null
public Object getItem(int position) {
return null;
}
//步骤2.3:getItemId()获得row id(Get the row id associated with the specified position in the list),由于我们也不需要,简单的设为0
public long getItemId(int position) {
return 0;
}
//步骤2.4:获得GridView里面的View,Get a View that displays the data at the specified position in the data set. 和第一个例子一样,传递的第二个函数可能为null,必须进行处理。
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = null;
if(convertView == null){
imageView = new ImageView(context);
// 设置View的height和width:这样保证无论image原来的尺寸,每个图像将重新适合这个指定的尺寸。
imageView.setLayoutParams(new GridView.LayoutParams(85,85));
/* ImageView.ScaleType.CENTER 但不执行缩放比例
* ImageView.ScaleType.CENTER_CROP 按比例统一缩放图片(保持图片的尺寸比例)便于图片的两维(宽度和高度)等于或大于相应的视图维度
* ImageView.ScaleType.CENTER_INSIDE 按比例统一缩放图片(保持图片的尺寸比例)便于图片的两维(宽度和高度)等于或小于相应的视图维度 */
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8,8,8,8);
}else{
imageView = (ImageView)convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
}
我们设置了几种scaleType,下面左图是ImageView.ScaleType.CENTER_CROP,中图是ImageView.ScaleType.CENTER_INSIDE,右图是ImageView.ScaleType.CENTER
1.GridView实例展示一
本文主要实现如下功能:登陆界面经过通信线程鉴权后返回各种权限,权限对应各种功能模块,打算将各种功能模块以GridView方式显示给用户,GridView中放置各种功能图标,如果权限不足则置灰。
界面参考如下图片(软件来自电信内部掌上办公平台):
登陆界面在这里不再赘述,本文主要关心以面向对象的方式来构建GridView,以及自定义ListAdapter的使用来个性化GridView中Item的显示方式。
首先,本Activity是一个fullparent的GridView,其XML代码没什么技术含量,拷贝如下:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/main_table_layout" android:layout_height="fill_parent"
- android:orientation="vertical" android:layout_width="fill_parent"
- android:background="@drawable/background">
- <GridView xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/grid_view"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:numColumns="auto_fit"
- android:horizontalSpacing="20dp"
- android:verticalSpacing="0dp"
- android:columnWidth="50dp"
- android:stretchMode="columnWidth"
- android:gravity="center"></GridView>
- </LinearLayout>
- <!-- android:numColumns="auto_fit" ,GridView的列数设置为自动 -->
- <!-- android:columnWidth="90dp",每列的宽度,也就是Item的宽度 -->
- <!-- android:stretchMode="columnWidth",缩放与列宽大小同步 -->
- <!-- android:verticalSpacing="10dp",两行之间的边距,如:行一(NO.0~NO.2)与行二(NO.3~NO.5)间距为10dp -->
- <!-- android:horizontalSpacing="10dp",两列之间的边距。 -->
接下来要设计GridView中的元素,也就是本例中的功能按钮,每个按钮的图标不同,显示的名字也不同,最重要的是其onClick事件也不同。很多朋友处理这类问题的时候会编写大量的if和switch语句,我一贯的宗旨是尽量少用甚至不用switch分支,以面向对象的方式提高代码的可复用、可扩展、可读等性能。
闲话少说,开始设计GridView中的Item样式,编写元素布局文件menu_item.xml:
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent" android:layout_height="fill_parent">
- <ImageView android:layout_width="wrap_content" android:id="@+id/item_image"
- android:layout_height="wrap_content" android:layout_centerHorizontal="true"/>
- <TextView android:layout_width="wrap_content"
- android:layout_height="wrap_content" android:layout_below="@id/item_image"
- android:id="@+id/item_text" android:layout_centerHorizontal="true"
- android:textColor="#000000" android:textStyle="bold"/>
- </RelativeLayout>
可以看到,很简单的一个View组合,上面是一个居中摆放的ImageView,下面是一个居中摆放的TextView,这就是功能按钮的通用布局,至于每个按钮的具体设计,这边还不用考虑。
下面进行面向对象的分析,构造Function抽象父类,将所有的功能按钮都看成是一个Function的一个子类,不同的功能按钮继承Function,在各自的构造函数中对该功能的图标,文字进行定义,与此同时实现该功能的点击事件处理。
Function父类的设计如下:
- public abstract class Function {
- protected int functionImageRscId;
- protected int functionTextRscId;
- protected Context context = null;
- public Function(Context context) {
- // TODO Auto-generated constructor stub
- this.context = context; // 获取上下文
- }
- public abstract OnClickListener getOnClickListener();
- // 抽象函数,强制子类去继承它,并实现各自的功能
- public int getFunctionImageRscId() {
- return functionImageRscId;
- }
- public int getFunctionTextRscId() {
- return functionTextRscId;
- }
- }
初步实现一个功能按钮,我这边是一个叫“释放号码”的功能,代码如下:
- public class FreeNumberFunction extends Function {
- public FreeNumberFunction(Context context) {
- super(context);
- // TODO Auto-generated constructor stub
- this.functionImageRscId=R.drawable.free_number_function_a;//本功能的图标资源
- this.functionTextRscId=R.string.free_number_function;//功能名字的字符串资源
- }
- public OnClickListener getOnClickListener() {
- // TODO Auto-generated method stub
- return new OnClickListener() { //测试的响应事件
- public void onClick(View v) {
- new AlertDialog.Builder(context)
- .setTitle("释放号码")
- .setMessage("打开释放号码的界面")
- .show();
- }
- };
- }
- }
在实现一个功能按钮,用做比较,名叫“经营报表”的功能按钮,代码如下:
- public class ReportFunction extends Function {
- public ReportFunction(Context context) {
- super(context);
- this.functionImageRscId=R.drawable.report_function_a;
- this.functionTextRscId=R.string.report_function;
- }
- @Override
- public OnClickListener getOnClickListener() {
- // TODO Auto-generated method stub
- return new OnClickListener() {
- public void onClick(View v) {
- new AlertDialog.Builder(context)
- .setTitle("经营分析")
- .setMessage("MessageTest")
- .show();
- }
- };
- }
- }
这样就基本以面向对象的方式,设计好功能按钮的框架了,以后如果项目需要新的功能添加,则仅需添加一个类,继承Function父类,做好相关的png和功能名资源,设置好onClick事件就OK了,避免了大量的switch语句去响应GridView的那个什么onSelectItem事件,还要在里面提取各种序列,应用程序改变功能按钮显示的顺序都变得很麻烦。
有了这样的结构,下面一部就是让GridView认识咱们的Function,这里需要用到自定义Adapter适配器,GridView需要一个ListAdapter来解析子元素,系统提供一个自带的SimpleListAdapter,很是不好用,仅可以传输有限的数据和统一化的显示方法,这里需要让GridView认识Function就必须自己写适配器,适配器继承一个叫BaseAdaper的类即可,适配器名为FunctionsAdapter,代码如下:
- public class FunctionsAdapter extends BaseAdapter {
- private Context context = null;// 上下文
- private ArrayList<Function> list = null;// 数据源
- private ImageView functionImage = null;
- private TextView functionText = null;
- // 适配器构造函数
- public FunctionsAdapter(Context c, ArrayList<Function> list) {
- this.context = c;//c是上下文,在UI编程中,一般这个参数都是必要的
- this.list = list;//list中是一个Function数组,存放了所有要显示的Function
- }
- // 下面三个是实现抽象函数,可以无视
- public int getCount() {
- return list.size();
- }
- public Object getItem(int position) {
- return list.get(position);
- }
- public long getItemId(int position) {
- return position;
- }
- // 根据参数,个性化自己的View
- public View getView(int position, View convertView, ViewGroup parent) {
- convertView = LayoutInflater.from(context).inflate(R.layout.menu_item,
- null);// 通过上下文获取一开始定义的menu_item布局,以这个布局文件为样式造出一个自定义View
- functionImage = (ImageView) convertView.findViewById(R.id.item_image);//获取布局文件里的ImageView
- functionText = (TextView) convertView.findViewById(R.id.item_text);//获取布局文件里的TextView
- functionImage.setImageResource(list.get(position)
- .getFunctionImageRscId());//对功能按钮的图标进行赋值
- functionText.setText(list.get(position).getFunctionTextRscId());//对功能按钮的名字进行赋值
- convertView.setOnClickListener(list.get(position).getOnClickListener());
- //响应不同Function的onClick事件,个人认为这行代码最精妙,仅仅一行代码省去了多少switch和case
- return convertView;//最终返回一个View,这一个View就是一整个功能按钮,而且是个性化的功能按钮
- }
- }
编写自定义适配器没有想象中恐怖,继承BaseAdapter后,Eclipse会自动要求你实现这么几个函数,首先是构造函数,这个你只要传个上下文context和数据源过来就行,context就是上下文,这个在UI编程中一直要传递,Activity类的this对象就行了,数据源我们这里是一个Function类型的数组,包含了所有要在界面上显示的Function,当然你在构造的时候都必须用Function的子类来构造。除了构造函数以外,getCount、getItem、getItemId这三个函数也要你重写,看我的代码就知道纯粹是划水性质的,不再赘述,最重要的是一个getView的函数,这个函数将返回一个View给GridView作为Item使用,相当于迭代生成所有的GridView中要显示的元素,注释写的很详细了,大家看着应该能明白个中含义。
最终在Activity中生成整个GridView的代码,如下:
- public class MainTable extends Activity {
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- // TODO Auto-generated method stub
- super.onCreate(savedInstanceState);
- this.requestWindowFeature(Window.FEATURE_NO_TITLE);//无title
- this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_NOSENSOR);// 禁止竖屏
- setContentView(R.layout.main_table);
- super.onCreate(savedInstanceState);
- GridView gridview = (GridView) findViewById(R.id.grid_view);
- ArrayList<Function> meumList=new ArrayList<Function>();
- meumList.add(new FreeNumberFunction(this));
- meumList.add(new ReportFunction(this));
- FunctionsAdapter fa=new FunctionsAdapter(this,meumList);
- gridview.setAdapter(fa);
- }