The use of the GridView and ImageView of the Android programming UI design _android

This example describes the use of the GridView and ImageView of the Android programming UI design. Share to everyone for your reference, specific as follows:

gridview:a view that shows items in two-dimensional scrolling grid. The items in the grid come from the listadapter associatedand this view. To put it simply, theGridView is the icon display of files that we normally see in the explorer .

As mentioned above, the GridView item is derived from ListAdapter, so the GridView code is generally used in the oncreate of the activity:

@Override public
void OnCreate (Bundle savedinstancestate) {
  super.oncreate (savedinstancestate);
  Setcontentview (r.layout.grid_2);
  GridView G = (GridView) Findviewbyid (R.id.mygrid);
  G.setadapter (This) (new Imageadapter);
} 

And Imageadapter is generally extends baseadapter. Baseadapter is implements ListAdapter Spinneradapter, but many times the custom adapter are the override ListAdapter of the parent class adapter interface inside the method:

int GetCount () Gets the number of items currently adapter
Object getitem (int position) Gets the item of the corresponding position
Long Getitemid (int position) gets the row ID of the corresponding position item in the list
View GetView (int position, view Convertview, ViewGroup parent) Gets the view of data that is displayed in the specified position

These method functions are similar to Swing's, and are based on MVC. Presumably the principle process is this: The program needs to display the GridView, so to display the data one by one is through a for loop, first call Adapter.getcount () get how many data, and then position++ to GetItem, GetView get to show the view, this way to show out!

Here is the official sample inside the photo grid example, I omitted some of the code:

public class Imageadapter extends Baseadapter {public imageadapter (context c) {mcontext = C;
  public int GetCount () {return mthumbids.length;
  Public Object getitem (int position) {return position;
  public long getitemid (int position) {return position;
    Public View GetView (int position, View Convertview, ViewGroup parent) {ImageView ImageView;
      if (Convertview = = null) {ImageView = new ImageView (mcontext); Imageview.setlayoutparams (New Gridview.layoutparams (45, 45))//Set ImageView width high imageview.setadjustviewbounds (false)
      ;
      Imageview.setscaletype (ImageView.ScaleType.CENTER_CROP);
    Imageview.setpadding (8, 8, 8, 8);
    else {ImageView = (ImageView) Convertview;
    } imageview.setimageresource (Mthumbids[position]);
  return ImageView;
  Private context Mcontext; Private integer[] Mthumbids = {r.drawable.sample_thumb_0, r.drawable.sample_thumb_1, r.drawable.sample_thumb_ 2, R.drawAble.sample_thumb_3, R.drawable.sample_thumb_4, R.drawable.sample_thumb_5, R.drawable.sample_thumb_6, R.drawab
Le.sample_thumb_7};

 }

Notice the code inside the GetView to determine if Convertview is null to reuse, reduce the creation of objects, and reduce memory footprint .

The content of the XML layout file, which originally indicated the GridView:

<?xml version= "1.0" encoding= "Utf-8"?> <gridview xmlns:android=
"http://schemas.android.com/apk/res/" Android "
  android:id=" @+id/mygrid "
  android:layout_width=" fill_parent "
  android:layout_height=" Fill_ Parent "
  android:padding=" 10DP "
  android:verticalspacing=" 10DP "
  android:horizontalspacing=" 10DP "
  android:numcolumns= "Auto_fit"
  android:columnwidth= "60DP"
  android:stretchmode= "ColumnWidth"
  android:gravity= "center"
  />

Can see GetView, and ImageView is the focus, affect the display effect of the picture. It is also found that the number of columns is indeterminate, depending on the width of each imageview and the width of the screen. Next look at ImageView.

Imageview:displays An arbitrary image, such as a icon. The ImageView class can load images from various sources (such as resources or content providers), takes care of computing Its measurement from the ' image so ' it can be used into any layout manager, and provides various display options such as Scaling and tinting. ImageView is used to show the Image,icon .

Here we will focus on understanding the attribute Android:scaletype of ImageView, namely Imageview.setscaletype (Imageview.scaletype). Android:scaletype is the size that controls how the picture resized/movedto the ImageView. Meaning difference of Imageview.scaletype/android:scaletype value:

Center/center is centered by the original size of the picture, and the center portion of the picture is displayed when the picture is longer/wider than the view's length/width.
Center_crop/centercrop proportionally enlarge the size of the picture to be centered so that the picture is long (wide) equal to or greater than the view's length (width)
Center_inside/centerinside the contents of the picture to the full center, by scaling or the original size so that the picture length/width is equal to or less than the view's length/width
Fit_center/fitcenter enlarge/Shrink the picture to the width of view, centered
Fit_end/fitend expands/shrinks the picture to the width of the view, displayed in the lower part of the view
Fit_start/fitstart expands/shrinks the picture to the width of the view, displayed in the upper part of the view
FIT_XY/FITXY enlarge/Reduce picture to view size display
Matrix/matrix using matrices to draw

I didn't understand it at first. Matrix matrices, online search after found that the matrix can be dynamically reduced to enlarge the image of the picture to show, here do not expand in-depth understanding, just paste the relevant statements, reduce the picture:

Obtain bitmap of high and wide
int bmpwidth=bmp.getwidth ();
int bmpheight=bmp.getheight ();
Set narrowing ratio
double scale=0.8;
Calculate the proportion to be reduced
scalewidth= (float) (Scalewidth*scale);
scaleheight= (float) (Scaleheight*scale);
Matrix
matrix=new Matrix () of the bitmap object after producing resize;
Matrix.postscale (ScaleWidth, scaleheight);
Bitmap resizebmp=bitmap.createbitmap (BMP, 0, 0, bmpwidth, Bmpheight, Matrix, True);

A lot of examples of applying imageview, look at the last framelayout inside:

<imageview
  android:id= "@+id/image"
  android:layout_width= "fill_parent"
  android:layout_height= "Fill_parent"
  android:scaletype= "center"
  android:src= "@drawable/candle"
  />

Note here that I found that the name of the picture in the Drawable folder cannot be capitalized.

I hope this article will help you with the Android program.