1 page.title=Hello, GridView 2 parent.title=Hello, Views 3 parent.link=index.html 4 @jd:body 5 6 <p>A {@link android.widget.GridView} displays items in a two-dimensional, scrolling grid. The items 7 are 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 <?xml version="1.0" encoding="utf-8"?> 17 <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> 32 public 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> 45 public 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—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—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
