Android中的GridView详解

最新推荐文章于 2024-04-24 14:46:15 发布

VIP文章小飞鹤

最新推荐文章于 2024-04-24 14:46:15 发布

阅读量6.5k

点赞数 4

分类专栏： Android开发详解文章标签： android gridview

本文链接：https://blog.csdn.net/he90227/article/details/38356127

版权

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" 
    android:horizontalSpacing="5px"  
    android:numColumns="auto_fit" 
    android:columnWidth="100px" 
    android:stretchMode="columnWidth" 
    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 Activity-GridView使用学习

左图是使用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

Android Activity-GridView使用学习

1.GridView实例展示一

本文主要实现如下功能：登陆界面经过通信线程鉴权后返回各种权限，权限对应各种功能模块，打算将各种功能模块以GridView方式显示给用户，GridView中放置各种功能图标，如果权限不足则置灰。

界面参考如下图片（软件来自电信内部掌上办公平台）：

登陆界面在这里不再赘述，本文主要关心以面向对象的方式来构建GridView，以及自定义ListAdapter的使用来个性化GridView中Item的显示方式。

首先，本Activity是一个fullparent的GridView，其XML代码没什么技术含量，拷贝如下：

[xhtml]view plaincopy 
   
 <?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:

[c-sharp]view plaincopy 
   
 <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父类的设计如下：

[java]view plaincopy 
   
 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;  
     }  
 }  

初步实现一个功能按钮，我这边是一个叫“释放号码”的功能，代码如下：

[java]view plaincopy 
   
 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();                  
             }  
         };  
     }     
 }  

在实现一个功能按钮，用做比较，名叫“经营报表”的功能按钮，代码如下：

[c-sharp]view plaincopy 
   
 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，代码如下：

[java]view plaincopy 
   
 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的代码，如下：

[java]view plaincopy 
   
 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);  
   
     }  

最低0.47元/天解锁文章

小飞鹤

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Android中的GridView详解

1.GridView实例anzs本文主要实现如下功能：登陆界面经过通信线程鉴权后返回各种权限，权限对应各种功能模块，打算将各种功能模块以GridView方式显示给用户，GridView中放置各种功能图标，如果权限不足则置灰。界面参考如下图片（软件来自电信内部掌上办公平台）：登陆界面在这里不再赘述，本文主要关心以面向对象的方式来构建GridVi
复制链接

扫一扫