1page.title=Grid View 2page.tags=gridview 3@jd:body 4<div id="qv-wrapper"> 5<div id="qv"> 6<h2>In this document</h2> 7 <ol> 8 <li><a href="#example">Example</a></li> 9 </ol> 10 <h2>Key classes</h2> 11 <ol> 12 <li>{@link android.widget.GridView}</li> 13 <li>{@link android.widget.ImageView}</li> 14 <li>{@link android.widget.BaseAdapter}</li> 15 <li>{@link android.widget.AdapterView.OnItemClickListener}</li> 16 </ol> 17</div> 18</div> 19<p>{@link android.widget.GridView} is a {@link android.view.ViewGroup} that displays items in a 20two-dimensional, 21scrollable grid. The grid items are automatically inserted to the layout using a {@link 22android.widget.ListAdapter}.</p> 23 24<p>For an introduction to how you can dynamically insert views using an adapter, read 25<a href="{@docRoot}guide/topics/ui/declaring-layout.html#AdapterViews">Building Layouts with 26 an Adapter</a>.</p> 27 28<img src="{@docRoot}images/ui/gridview.png" alt="" /> 29 30 31<h2 id="example">Example</h2> 32 33<p>In this tutorial, you'll create a grid of image thumbnails. When an item is selected, a 34toast message will display the position of the image.</p> 35 36 37<ol> 38 <li>Start a new project named <em>HelloGridView</em>.</li> 39 <li>Find some photos you'd like to use, or <a 40href="{@docRoot}shareables/sample_images.zip">download these sample images</a>. Save the image files 41into the project's 42<code>res/drawable/</code> directory.</li> 43 <li>Open the <code>res/layout/main.xml</code> file and insert the following: 44<pre> 45<?xml version="1.0" encoding="utf-8"?> 46<GridView xmlns:android="http://schemas.android.com/apk/res/android" 47 android:id="@+id/gridview" 48 android:layout_width="match_parent" 49 android:layout_height="match_parent" 50 android:columnWidth="90dp" 51 android:numColumns="auto_fit" 52 android:verticalSpacing="10dp" 53 android:horizontalSpacing="10dp" 54 android:stretchMode="columnWidth" 55 android:gravity="center" 56/> 57</pre> 58 <p>This {@link android.widget.GridView} will fill the entire screen. The attributes are rather 59self explanatory. For more information about valid attributes, see the {@link 60android.widget.GridView} reference.</p> 61</li> 62 <li>Open <code>HelloGridView.java</code> and insert the following code for the 63{@link android.app.Activity#onCreate(Bundle) onCreate()} method: 64<pre> 65public void onCreate(Bundle savedInstanceState) { 66 super.onCreate(savedInstanceState); 67 setContentView(R.layout.main); 68 69 GridView gridview = (GridView) findViewById(R.id.gridview); 70 gridview.setAdapter(new ImageAdapter(this)); 71 72 gridview.setOnItemClickListener(new OnItemClickListener() { 73 public void onItemClick(AdapterView<?> parent, View v, int position, long id) { 74 Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show(); 75 } 76 }); 77} 78</pre> 79 <p>After the {@code main.xml} layout is set for the content view, the 80{@link android.widget.GridView} is captured from the layout with {@link 81android.app.Activity#findViewById(int)}. The {@link 82android.widget.GridView#setAdapter(T) setAdapter()} method then sets a custom adapter ({@code 83ImageAdapter}) as the source for all items to be displayed in the grid. The {@code ImageAdapter} is 84created in the next step.</p> 85<p>To do something when an item in the grid is clicked, the {@link 86android.widget.AdapterView#setOnItemClickListener(OnItemClickListener) setOnItemClickListener()} 87method is passed a new {@link android.widget.AdapterView.OnItemClickListener}. This anonymous 88instance defines the {@link 89android.widget.AdapterView.OnItemClickListener#onItemClick(AdapterView,View,int,long) 90onItemClick()} callback method to show a {@link android.widget.Toast} that displays the index 91position (zero-based) of the selected item (in a real world scenario, the position could be used to 92get the full sized 93image for some other task).</p> 94 95</li> 96<li>Create a new class called <code>ImageAdapter</code> that extends {@link 97android.widget.BaseAdapter}: 98<pre> 99public class ImageAdapter extends BaseAdapter { 100 private Context mContext; 101 102 public ImageAdapter(Context c) { 103 mContext = c; 104 } 105 106 public int getCount() { 107 return mThumbIds.length; 108 } 109 110 public Object getItem(int position) { 111 return null; 112 } 113 114 public long getItemId(int position) { 115 return 0; 116 } 117 118 // create a new ImageView for each item referenced by the Adapter 119 public View getView(int position, View convertView, ViewGroup parent) { 120 ImageView imageView; 121 if (convertView == null) { // if it's not recycled, initialize some attributes 122 imageView = new ImageView(mContext); 123 imageView.setLayoutParams(new GridView.LayoutParams(85, 85)); 124 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); 125 imageView.setPadding(8, 8, 8, 8); 126 } else { 127 imageView = (ImageView) convertView; 128 } 129 130 imageView.setImageResource(mThumbIds[position]); 131 return imageView; 132 } 133 134 // references to our images 135 private Integer[] mThumbIds = { 136 R.drawable.sample_2, R.drawable.sample_3, 137 R.drawable.sample_4, R.drawable.sample_5, 138 R.drawable.sample_6, R.drawable.sample_7, 139 R.drawable.sample_0, R.drawable.sample_1, 140 R.drawable.sample_2, R.drawable.sample_3, 141 R.drawable.sample_4, R.drawable.sample_5, 142 R.drawable.sample_6, R.drawable.sample_7, 143 R.drawable.sample_0, R.drawable.sample_1, 144 R.drawable.sample_2, R.drawable.sample_3, 145 R.drawable.sample_4, R.drawable.sample_5, 146 R.drawable.sample_6, R.drawable.sample_7 147 }; 148} 149</pre> 150<p>First, this implements some required methods inherited from {@link 151android.widget.BaseAdapter}. The constructor and {@link 152android.widget.Adapter#getCount()} are self-explanatory. Normally, {@link 153android.widget.Adapter#getItem(int)} should return the actual object at the specified position in 154the adapter, but it's ignored for this example. Likewise, {@link 155android.widget.Adapter#getItemId(int)} should return the row id of the item, but it's not 156needed here.</p> 157 158<p>The first method necessary is {@link android.widget.Adapter#getView(int,View,ViewGroup) 159getView()}. This method creates a new {@link android.view.View} for each image added to the {@code 160ImageAdapter}. When this is called, a {@link android.view.View} is passed in, which is normally a 161recycled object (at least after this has been called once), so there's a check to see if the 162object is null. If it <em>is</em> null, an {@link android.widget.ImageView} is instantiated and 163configured with desired properties for the image presentation:</p> 164<ul> 165 <li>{@link android.view.View#setLayoutParams(ViewGroup.LayoutParams)} sets 166the height and width for the View—this ensures that, no matter the size of the drawable, each 167image is resized and cropped to fit in these dimensions, as appropriate.</li> 168 <li>{@link android.widget.ImageView#setScaleType(ImageView.ScaleType)} declares that images should 169be cropped toward the center (if necessary).</li> 170 <li>{@link android.widget.ImageView#setPadding(int,int,int,int)} defines the padding for all 171sides. (Note that, if the images have different aspect-ratios, then less 172padding will cause more cropping of the image if it does not match 173the dimensions given to the ImageView.)</li> 174</ul> 175 176<p>If the {@link android.view.View} passed to {@link 177android.widget.Adapter#getView(int,View,ViewGroup) getView()} is <em>not</em> null, then the local 178{@link android.widget.ImageView} is initialized with the recycled {@link android.view.View} 179object.</p> 180 181<p>At the end of the {@link android.widget.Adapter#getView(int,View,ViewGroup) getView()} method, 182the {@code 183position} integer passed into the method is used to select an image from the {@code mThumbIds} 184array, which is set as the image resource for the {@link android.widget.ImageView}.</p> 185<p>All that's left is to define the {@code mThumbIds} array of drawable resources.</p> 186</li> 187<li>Run the application.</li> 188</ol> 189 190<p>Try experimenting with the behaviors of the {@link android.widget.GridView} and {@link 191android.widget.ImageView} elements by adjusting their properties. For example, instead of using 192{@link android.view.View#setLayoutParams(ViewGroup.LayoutParams)}, try using 193{@link android.widget.ImageView#setAdjustViewBounds(boolean)}. </p> 194 195 196
