• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Hello, GridView
2parent.title=Hello, Views
3parent.link=index.html
4@jd:body
5
6<p>A {@link android.widget.GridView} displays items in a two-dimensional, scrolling grid. The items
7are acquired from a {@link android.widget.ListAdapter}.</p>
8
9
10<ol>
11  <li>Start a new project/Activity called HelloGridView.</li>
12  <li>Find some photos you'd like to use, or copy some from the SDK samples res/drawable/
13    folder of your project.</li>
14  <li>Open the layout and make it like so:
15<pre>
16&lt;?xml version="1.0" encoding="utf-8"?>
17&lt;GridView xmlns:android="http://schemas.android.com/apk/res/android"
18    android:id="@+id/gridview"
19    android:layout_width="fill_parent"
20    android:layout_height="fill_parent"
21    android:numColumns="auto_fit"
22    android:verticalSpacing="10dp"
23    android:horizontalSpacing="10dp"
24    android:columnWidth="90dp"
25    android:stretchMode="columnWidth"
26    android:gravity="center"
27/>
28</pre>
29</li>
30  <li>Open the HelloGridView Java file. Insert the following for the <code>onCreate()</code> method:
31<pre>
32public void onCreate(Bundle savedInstanceState) {
33    super.onCreate(savedInstanceState);
34    setContentView(R.layout.main);
35
36    GridView gridview = (GridView) findViewById(R.id.gridview);
37    gridview.setAdapter(new ImageAdapter(this));
38}
39</pre>
40    <p>Here, we get a handle on our GridView, from the layout, and give it an Adapter.
41    We're actually going to create our own Adapter called ImageAdapter.</p>
42</li>
43<li>Create a new class (nested or otherwise), called ImageAdapter, which extends {@link android.widget.BaseAdapter}:
44<pre>
45public class ImageAdapter extends BaseAdapter {
46    private Context mContext;
47
48    public ImageAdapter(Context c) {
49        mContext = c;
50    }
51
52    public int getCount() {
53        return mThumbIds.length;
54    }
55
56    public Object getItem(int position) {
57        return null;
58    }
59
60    public long getItemId(int position) {
61        return 0;
62    }
63
64    // create a new ImageView for each item referenced by the Adapter
65    public View getView(int position, View convertView, ViewGroup parent) {
66        ImageView imageView;
67        if (convertView == null) {  // if it's not recycled, initialize some attributes
68            imageView = new ImageView(mContext);
69            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
70            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
71            imageView.setPadding(8, 8, 8, 8);
72        } else {
73            imageView = (ImageView) convertView;
74        }
75
76        imageView.setImageResource(mThumbIds[position]);
77        return imageView;
78    }
79
80    // references to our images
81    private Integer[] mThumbIds = {
82            R.drawable.sample_2, R.drawable.sample_3,
83            R.drawable.sample_4, R.drawable.sample_5,
84            R.drawable.sample_6, R.drawable.sample_7,
85            R.drawable.sample_0, R.drawable.sample_1,
86            R.drawable.sample_2, R.drawable.sample_3,
87            R.drawable.sample_4, R.drawable.sample_5,
88            R.drawable.sample_6, R.drawable.sample_7,
89            R.drawable.sample_0, R.drawable.sample_1,
90            R.drawable.sample_2, R.drawable.sample_3,
91            R.drawable.sample_4, R.drawable.sample_5,
92            R.drawable.sample_6, R.drawable.sample_7
93    };
94}
95</pre>
96    <p>First we take care of some required methods inherited from BaseAdapter.
97    The constructor and <code>getCount()</code> are self-explanatory. Normally, <code>getItem()</code>
98    should return the actual object at the specified position in our Adapter, but for this Hello World,
99    we're not going to bother. Likewise, <code>getItemId()</code> should return the row id of
100    the item, but right now we don't care.</p>
101    <p>However, <code>getView()</code> is the method we care about. This one creates a new View for each image that we
102    put in our ImageAdapter. So we're going to create an ImageView each time. When this is called, we're
103    going to receive a View, which is likely a recycled View object (at least after the first call), so we
104    check for this&mdash;if it's null, we initialize the ImageView and setup all the properties we want.
105    The <code>LayoutParams()</code> initialization sets the height and width of the View&mdash;this ensures
106    that no matter the drawable size, each image is resized and cropped to fit in the ImageView (if necessary).
107    With <code>setScaleType()</code>, we say that images should be cropped toward the center (if necessary).
108    And finally, we set the padding within the ImageView. (Note that, if the images have various aspect-ratios,
109    as they do in this demo, then less padding will cause for more cropping of the image, if it does not match
110    the dimensions given to the ImageView.) At the end of <code>getView()</code> we set the image resource and
111    return the ImageView.</p>
112    <p>All that's left is our array or drawable resources at the bottom.</p>
113</li>
114<li>Run it.</li>
115</ol>
116<p>Your grid layout should look something like this:</p>
117<img src="images/hello-gridview.png" width="150px" />
118
119<p>Try experimenting with the behaviors of the GridView and ImageView by adjusting their properties. For example,
120  instead of setting the ImageView LayoutParams, you can try using
121  {@link android.widget.ImageView#setAdjustViewBounds(boolean)}. </p>
122
123<h3>References</h3>
124<ul>
125	<li>{@link android.widget.GridView}</li>
126	<li>{@link android.widget.ImageView}</li>
127	<li>{@link android.widget.BaseAdapter}</li>
128</ul>
129
130