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文件的布局

}

}

}