Android UI基础之GrideView的使用

 

 

GridView （网格视图）是按照行列的方式来显示内容的， 一般用于显示图片等内容， 比如实现九宫图格，相册预览的界面等，使用GridView是比较方便的。

GridView的常用属性如下：

android：columnWidth ： 设置列的宽度

android：horizontalSapcing：两列之间的距离

android:numColumns: 设置列数

android:stretchMode ：缩放模式

android：verticalSpacing ：两行之间的间距

如下为实例，分别实现带只显示图片的，和实现图片与文字的

一： 只显示图片

效果如下：

 

在实现GridView的时候需要使用适配器，这里使用自定义适配器，

1：在MainActivity中，将图片资源存放在一个正型数组中（保存图片资源的索引），

2：自定义适配器继承自BaseAdapter 并重写期中的方法

getCount （） 获取选项的总数
getItem （）获取每一个选项的具体内容
getItemId （）获取选项的ID 返回所在的位置即可
getView （）该方法用来为每一个选项生成对应的视图 （ImageView）该方法会被多次调用

具体代码如下所示：

public class MainActivity extends AppCompatActivity {
  private GridView gridView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        gridView= (GridView)findViewById(R.id.gridView);
        gridView.setAdapter(new MyAdapter(this));
    }
    // 自定义适配器
 static class MyAdapter extends BaseAdapter{
  private  int [] images = {R.mipmap.a,
          R.mipmap.a,
          R.mipmap.b,
          R.mipmap.c,
          R.mipmap.d,
          R.mipmap.e,
          R.mipmap.f,
          R.mipmap.a,
          R.mipmap.b,
          R.mipmap.c,
          R.mipmap.d,
          R.mipmap.e,
          R.mipmap.f,
          R.mipmap.a};
     private Context context;
     private MyAdapter(Context context){
         this.context= context;
     }
     @Override
     public int getCount() {
         //  获取数组长度
         return images.length;
     }

     @Override
     //获取每一个选项
     public Object getItem(int position) {
         // 返回每一个数组的下标
         return images[position];
     }

     @Override
     public long getItemId(int position) {
         return position;
     }

     @Override
     public View getView(int position, View convertView, ViewGroup parent) {
         ImageView imageView = new ImageView(context);
         imageView.setImageResource(images[position]);
         return imageView;
     }
 }

}

二 ：显示图片和文字

效果如下：

 

实现过程如下：

在布局文件中声明GridView 

GridView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="4"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:columnWidth="60dp"
    android:gravity="center"
    android:stretchMode="columnWidth"
    android:id="@+id/gridView2" />

 

 三：在MainActivity 中将文字，与图片的索引分别放在一个字符串，正型数组中，

创建一个类继承BaseAdapter 并实现其中的方法，类似与上面，需要注意的是在getView （）方法中需要加载图片与文本，因此应该提前将布局文件定义好。在getView方法中将组件

”查找“到并且将资源分别设置到响应的组件之中。即可以显示。 （每一部分是由， ImageView与TextView组合而成的）。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView_use"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:id="@+id/text_use"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"/>
</LinearLayout>

 

具体代码如下：

public class Main2Activity extends AppCompatActivity {
    private GridView gridViewview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mian2);
        gridViewview = (GridView) findViewById(R.id.gridView2);
        gridViewview.setAdapter(new MyAdapters(this));
        // 监听事件
        gridViewview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
              // parent代表当前组件就是Gridview， view对应的是每一个选项的布局（根结点为准）
                System.out.println("+++>>>>>"+parent);//
                System.out.println("+++>>>>>"+view);// 对应每一个选项的布局
                System.out.println("+++>>>>>"+position);// 位置编号
                System.out.println("+++>>>>>" + id);// 位置编号
                TextView ts = (TextView) view.findViewById(R.id.text_use);

                Toast.makeText(Main2Activity.this,"当前选择的是"+ts.getText(),Toast.LENGTH_SHORT).show();
            }
        });
    }

    // 内部类优先考虑为静态，效率更高。
    static class MyAdapters extends BaseAdapter {
        private String[] names = {"北极黑", "北极绿", "北极青", "北极蓝", "北极紫", "北极红"};
        private int[] imgs = {R.mipmap.a,
                R.mipmap.b,
                R.mipmap.c,
                R.mipmap.d,
                R.mipmap.e,
                R.mipmap.f
        };
        private Context context;

        public MyAdapters(Context context) {
            this.context = context;
        }

        @Override
        public int getCount() {
            return names.length;
        }

        @Override
        public Object getItem(int position) {
            return names[position];
        }

        @Override
        public long getItemId(int position) {
            return position;
        }
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            LayoutInflater inflater = LayoutInflater.from(context);
            View view = inflater.inflate(R.layout.itemlayout, null);
            // 得到两个组件
            ImageView iv = (ImageView) view.findViewById(R.id.imageView_use);
            TextView tv = (TextView) view.findViewById(R.id.text_use);
            iv.setImageResource(imgs[position]);
            tv.setText(names[position]);
            return view;// 返回的相当于xml文件的布局
        }
    }
}