GridView
is a ViewGroup
that
displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter
.
For an introduction to how you can dynamically insert views using an adapter, read Building Layouts with an Adapter.
GridView 是一个通过二维的具有滚动效果的网页格子来展示我们的每一个条目,这些网页格子可以通过使用ListAdapter来实现自动的将这些格子自动插入到布局之中。
为了进一步的了解如何使用动态通过适配器来插入数据,请阅读Building Layouts with an Adapter.这个在后期将会更。
Example
In this tutorial, you'll create a grid of image thumbnails. When an item is selected, a toast message will display the position of the image.
- Start a new project named HelloGridView.
- Find some photos you'd like to use, or download these sample images. Save the image files
into the project's
res/drawable/
directory. - Open the
res/layout/main.xml
file and insert the following:
在这篇的引导中,你就会创造出一个带有图片碎片的网格,当一个条目被选择之后,将会有一个土司消息被展示在这个图片的位置,首先创建一个命名为HellowGridView的工程,然后找一些自己喜欢的图片放在图片目录下,然后就是布局文件
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"
/>
这里有几个需要解释一下的属性,那就是numColumns这个属性,这个属性表示的是每一个行格子的数目,然后还有比一个属性就是stretchMode这个属性,这个属性表示的是格子的缩放效果,这里的设置是随着宽度进行自动的缩放。
Open HelloGridView.java
and
insert the following code for the onCreate()
method:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
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(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
}
});
}
After the main.xml
layout is set for the content view, the GridView
is
captured from the layout withfindViewById(int)
.
The setAdapter()
method
then sets a custom adapter (ImageAdapter
) as the source for all items to be displayed in the grid. The ImageAdapter
is
created in the next step.
To do something when an item in the grid is clicked, the setOnItemClickListener()
method
is passed a newAdapterView.OnItemClickListener
.
This anonymous instance defines the onItemClick()
callback
method to show a Toast
that displays the
index position (zero-based) of the selected item (in a real world scenario, the position could be used to get the full sized image for some other task).
Create
a new class called ImageAdapter
that
extends BaseAdapter
:
public class ImageAdapter extends BaseAdapter {
private Context mContext;
public ImageAdapter(Context c) {
mContext = c;
}
public int getCount() {
return mThumbIds.length;
}
public Object getItem(int position) {
return null;
}
public long getItemId(int position) {
return 0;
}
// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) { // if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8);
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
// 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, R.drawable.sample_7,
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7,
R.drawable.sample_0, R.drawable.sample_1,
R.drawable.sample_2, R.drawable.sample_3,
R.drawable.sample_4, R.drawable.sample_5,
R.drawable.sample_6, R.drawable.sample_7
};
}
First, this implements some required methods inherited from BaseAdapter
.
The constructor and getCount()
are
self-explanatory. Normally, getItem(int)
should
return the actual object at the specified position in the adapter, but it's ignored for this example. Likewise, getItemId(int)
should
return the row id of the item, but it's not needed here.
The first method necessary is getView()
.
This method creates a new View
for each image
added to theImageAdapter
. When this is called, a View
is
passed in, which is normally a recycled object (at least after this has been called once), so there's a check to see if the object is null. If it is null, an ImageView
is
instantiated and configured with desired properties for the image presentation:
setLayoutParams(ViewGroup.LayoutParams)
sets the height and width for the View—this ensures that, no matter the size of the drawable, each image is resized and cropped to fit in these dimensions, as appropriate.setScaleType(ImageView.ScaleType)
declares that images should be cropped toward the center (if necessary).setPadding(int, int, int, int)
defines the padding for all sides. (Note that, if the images have different aspect-ratios, then less padding will cause more cropping of the image if it does not match the dimensions given to the ImageView.)
If the View
passed to getView()
is not null,
then the local ImageView
is initialized
with the recycled View
object.
At the end of the getView()
method,
the position
integer passed into the method is used to select an image from the mThumbIds
array, which is set
as the image resource for the ImageView
.
All that's left is to define the mThumbIds
array of drawable resources.
第一个最重要的方法时getView(),这个方法创造出了一个View对每一个添加到图片适配器中的图片,当这个方法被调用的时候,就会有一个view产生,通常这是一个可以回收的实体,所以这里有一个检测,如果检测到了是空,那么就会有一个ImageView被初始化成型带着所需要的属性来展示一个图片。
下面是几个方法:
setLayoutParams(ViewGroup.LayoutParams)通过这个方法我们可以设置视图的高度和宽度,这个确保了无论图片是有多大,都可以重新定义其大小然后合适的将其展现出来。
setScaleType(ImageView.ScaleType)这个方法声明一个图片如果在必要的情况下会出现在中心。
setPadding(int,int,int,int)这个定义了各个方向上边界上的距离,(注意,如果这个图片有不同的宽高比,然后没有间距,如果没有适应各个方向的话)
如果View通过了getView()的这个方法之后,如果不是空的话,就会有一个本地的图片初始化给已经被回收的view实例,在这个方法的最后,我们会根据位置座标选择图片资源进行展示。