[Android] 10.3 grid view (GridView), androidgridview

[Android] 10.3 grid view (GridView), androidgridview

Category: C #, Android, VS2015;

Created on: 1. Introduction

The grid view (GridView) is a view with the scroll function added on the basis of GridLayout, that is: the GridView is used to display items that contain a large number of cells in a scrollable 2D grid space (each item is a view). For example, an image is displayed for each cell. When there are many images, you can also scroll up or down to view.

To use the GridView, you must first compile a view adapter (generally implemented using an adapter class inherited from BaseAdapter <T>) and then use it to fill each cell in sequence. For example, insert the image into each cell in sequence based on the first and second columns (or the first column.

Ii. Example 1-GridView basic usage

This example shows how to use the GridView to create a grid composed of thumbnails. When an item is selected, a Toast message prompt box is displayed. If there are many images, you can scroll up or down to view them.

1. Run

2. Design Steps

(1) Add the ch1001_GridViewDemo.axml File

Add the file in the Resources/layout folder.

<?xml version="1.0" encoding="utf-8"?><GridView xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/gridview1"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:columnWidth="90dp"    android:numColumns="auto_fit"    android:verticalSpacing="10dp"    android:horizontalSpacing="10dp"    android:stretchMode="columnWidth"    android:gravity="center" />

The created GridView will automatically fill the entire screen.

(2) Add the ch1001MyImageAdapter. cs File

Add the file in the SrcDemos folder.

Repeat it again. After entering the following code, click the triangle symbol on the right of the light bulb, and then click "implementation interface". Then, the corresponding method is automatically added, instead of logging in at 1.1. This is the case where you need to implement interfaces.

Class ch1001MyImageAdapte: BaseAdapter <int>

{

}

The complete code for this file is as follows:

using Android.Content;using Android.Views;using Android.Widget;namespace MyDemos.SrcDemos{    class ch1001MyImageAdapte : BaseAdapter<int>    {        Context context;        int[] thumbIds =         {            Resource.Drawable.ch05sample_2, Resource.Drawable.ch05sample_3,            Resource.Drawable.ch05sample_4, Resource.Drawable.ch05sample_5,            Resource.Drawable.ch05sample_6, Resource.Drawable.ch05sample_7,            Resource.Drawable.ch05sample_0, Resource.Drawable.ch05sample_1,            Resource.Drawable.ch05sample_2, Resource.Drawable.ch05sample_3,            Resource.Drawable.ch05sample_4, Resource.Drawable.ch05sample_5,            Resource.Drawable.ch05sample_6, Resource.Drawable.ch05sample_7,            Resource.Drawable.ch05sample_0, Resource.Drawable.ch05sample_1,            Resource.Drawable.ch05sample_2, Resource.Drawable.ch05sample_3,            Resource.Drawable.ch05sample_4, Resource.Drawable.ch05sample_5,            Resource.Drawable.ch05sample_6, Resource.Drawable.ch05sample_7        };        public ch1001MyImageAdapte(Context c)        {            context = c;        }        public override int this[int position]        {            get { return 0; }        }        public override int Count        {            get { return thumbIds.Length; }        }        public override long GetItemId(int position)        {            return 0;        }        public override View GetView(int position, View convertView, ViewGroup parent)        {            ImageView imageView;            if (convertView == null)            {                imageView = new ImageView(context);                imageView.LayoutParameters = new GridView.LayoutParams(200, 200);                imageView.SetScaleType(ImageView.ScaleType.CenterCrop);                imageView.SetPadding(8, 8, 8, 8);            }            else            {                imageView = (ImageView)convertView;            }            imageView.SetImageResource(thumbIds[position]);            return imageView;        }    }}

Code Description:

In general, GetItem (int) should return a real object at the specified position in the adapter. GetItemId (int) should return the real id of the component, but it is not used in this example, therefore, no value is returned.

SetLayoutParams (ViewGroup. LayoutParams) is used to set the height and width of the view. This ensures that the size and width of the view can be adjusted and reduced regardless of the size of the original image.

SetScaleType (ImageView. ScaleType) declares that the image will be cropped according to the center (if needed ).

SetPadding (int, int) defines how to fill the padding. (Note: If the image has a different aspect ratio, when the image does not match the size specified by ImageView, smaller padding will lead to more image cutting ).

If the View passed to GetView () is not empty, the ImageView is initialized by the reusable View.

At the end of the GetView () method, the input position parameter is used to select an image from the image view resource's mThumbIds array.

The rest is the thumbIds array that defines the drawable resource.

You can also use imageView. SetAdjustViewBounds (boolean) to automatically adapt to the image size. The usage is very simple. simply replace the SetLayoutParams () method with this statement.

(3) Add the ch1001GridViewDemo. cs File

Add the file in the SrcDemos folder.

Using Android. app; using Android. OS; using Android. widget; namespace MyDemos. srcDemos {[Activity (Label = "[Example 10-1] grid view basic usage")] public class ch1001GridViewDemo: Activity {protected override void OnCreate (Bundle savedInstanceState) {base. onCreate (savedInstanceState); SetContentView (Resource. layout. ch1001_GridViewDemo); var gridview = FindViewById <GridView> (Resource. id. gridview1); gridview. adapter = new ch1001MyImageAdapte (this); gridview. itemClick + = (s, e) => {Toast. makeText (this, e. position. toString (), ToastLength. short ). show ();};}}}

When you click an item in the grid, only the location index number of the selected grid is displayed in the Toast message box (calculated from scratch ). In practice, you can obtain full-size images using the location index number for other purposes.