| page.title=Hello, GridView |
| parent.title=Hello, Views |
| parent.link=index.html |
| @jd:body |
| |
| <p>A {@link android.widget.GridView} displays items in a two-dimensional, scrolling grid. The items |
| are acquired from a {@link android.widget.ListAdapter}.</p> |
| |
| |
| <ol> |
| <li>Start a new project/Activity called HelloGridView.</li> |
| <li>Find some photos you'd like to use, or copy some from the SDK samples res/drawable/ |
| folder of your project.</li> |
| <li>Open the layout and make it like so: |
| <pre> |
| <?xml version="1.0" encoding="utf-8"?> |
| <GridView xmlns:android="http://schemas.android.com/apk/res/android" |
| android:id="@+id/gridview" |
| android:layout_width="fill_parent" |
| android:layout_height="fill_parent" |
| android:numColumns="auto_fit" |
| android:verticalSpacing="10dp" |
| android:horizontalSpacing="10dp" |
| android:columnWidth="90dp" |
| android:stretchMode="columnWidth" |
| android:gravity="center" |
| /> |
| </pre> |
| </li> |
| <li>Open the HelloGridView Java file. Insert the following for the <code>onCreate()</code> method: |
| <pre> |
| public void onCreate(Bundle savedInstanceState) { |
| super.onCreate(savedInstanceState); |
| setContentView(R.layout.main); |
| |
| GridView gridview = (GridView) findViewById(R.id.gridview); |
| gridview.setAdapter(new ImageAdapter(this)); |
| } |
| </pre> |
| <p>Here, we get a handle on our GridView, from the layout, and give it an Adapter. |
| We're actually going to create our own Adapter called ImageAdapter.</p> |
| </li> |
| <li>Create a new class (nested or otherwise), called ImageAdapter, which extends {@link android.widget.BaseAdapter}: |
| <pre> |
| 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 |
| }; |
| } |
| </pre> |
| <p>First we take care of some required methods inherited from BaseAdapter. |
| The constructor and <code>getCount()</code> are self-explanatory. Normally, <code>getItem()</code> |
| should return the actual object at the specified position in our Adapter, but for this Hello World, |
| we're not going to bother. Likewise, <code>getItemId()</code> should return the row id of |
| the item, but right now we don't care.</p> |
| <p>However, <code>getView()</code> is the method we care about. This one creates a new View for each image that we |
| put in our ImageAdapter. So we're going to create an ImageView each time. When this is called, we're |
| going to receive a View, which is likely a recycled View object (at least after the first call), so we |
| check for this—if it's null, we initialize the ImageView and setup all the properties we want. |
| The <code>LayoutParams()</code> initialization sets the height and width of the View—this ensures |
| that no matter the drawable size, each image is resized and cropped to fit in the ImageView (if necessary). |
| With <code>setScaleType()</code>, we say that images should be cropped toward the center (if necessary). |
| And finally, we set the padding within the ImageView. (Note that, if the images have various aspect-ratios, |
| as they do in this demo, then less padding will cause for more cropping of the image, if it does not match |
| the dimensions given to the ImageView.) At the end of <code>getView()</code> we set the image resource and |
| return the ImageView.</p> |
| <p>All that's left is our array or drawable resources at the bottom.</p> |
| </li> |
| <li>Run it.</li> |
| </ol> |
| <p>Your grid layout should look something like this:</p> |
| <img src="images/hello-gridview.png" width="150px" /> |
| |
| <p>Try experimenting with the behaviors of the GridView and ImageView by adjusting their properties. For example, |
| instead of setting the ImageView LayoutParams, you can try using |
| {@link android.widget.ImageView#setAdjustViewBounds(boolean)}. </p> |
| |
| <h3>References</h3> |
| <ul> |
| <li>{@link android.widget.GridView}</li> |
| <li>{@link android.widget.ImageView}</li> |
| <li>{@link android.widget.BaseAdapter}</li> |
| </ul> |
| |