Android programming UI design GridView and ImageView usage

An example of Android programming UI design of GridView and ImageView is given. To share for your reference, the details are as follows:

GridView: A view that shows items in two - dimensional scrolling grid. The items in the grid come from the  ListAdapter  associated with this view. In short, GridView is the icon display of 1 individual files that we normally see in our resource manager.

As mentioned above, Item of GridView is derived from ListAdapter, so GridView code is generally used in onCreate of Activity:

@Override
public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.grid_2);
  GridView g = (GridView) findViewById(R.id.myGrid);
  g.setAdapter(new ImageAdapter(this));
} 

ImageAdapter1 is extends BaseAdapter. BaseAdapter is implements ListAdapter SpinnerAdapter, but most of the time the custom Adapter is the parent of override ListAdapter in the Adapter interface method:

int getCount() gets the current Items number of Adapter
Object getItem(int position) obtains the Item for the corresponding position
long getItemId(int position) obtains the row id in List of the corresponding Item
View getView(int position, View convertView, ViewGroup parent) gets the View of data to be displayed on the specified position

These method functions are similar to swing and are based on MVC. First, call Adapter. getCount() gets how many data, then position++ getItem, getView gets view to display, so 1 by 1 display!

The following is an example of Photo Grid in the official sample. I have omitted some codes:

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 up the ImageView Wide 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.drawable.sample_thumb_7
  };
}

Note the code in getView to determine whether convertView is null for reuse, reducing object creation and memory footprint.

XML layout file content, originally just indicated 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"
  />

You can see that getView and ImageView are the focal points that affect the image display. It is also found that the number of columns is indeterminate, depending on the width of each ImageView and the width of the screen. Take a look at ImageView.

ImageView: Displays an arbitrary image, such as an 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 that it can be used in any layout manager, and provides various options as as scaling and tinting. ImageView is used to show Image, icon.

Here we focus on the attribute android:scaleType, i.e. ImageView. setScaleType(ImageView. ScaleType). android:scaleType is the control picture of how resized/moved lep on ImageView size. ImageView.ScaleType/android:scaleType value meaning difference:

CENTER /center is shown in the center of the original size of the image. When the length/width of the image exceeds the length/width of View, the center part of the image is intercepted for display
CENTER_CROP/centerCrop scale image size to center so that image length is equal to or greater than View length (width)
CENTER_INSIDE/centerInside centers the full content of the image and makes the image length/width equal to or less than the length/width of View by scaling down or by the original size
FIT_CENTER/fitCenter scale the image to the width of View and center it
FIT_END/fitEnd scale the image to the width of View and display it at the bottom of View
FIT_START/fitStart scale the image to the width of View to show at the top of View
FIT_XY/fitXY  the pictures don't  larger/smaller in proportion to the size of a View display
MATRIX/matrix is drawn using matrices

1. At the beginning, I did not understand the MATRIX matrix. After searching on the Internet, I found that the original MATRIX matrix could be dynamically zoomed-in to display the image.

// To obtain Bitmap The high and wide 
int bmpWidth=bmp.getWidth();
int bmpHeight=bmp.getHeight();
// Set the scale down 
double scale=0.8;
// Figure out what percentage you want to shrink this time 
scaleWidth=(float)(scaleWidth*scale);
scaleHeight=(float)(scaleHeight*scale);
// produce resize After the Bitmap object 
Matrix matrix=new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
Bitmap resizeBmp=Bitmap.createBitmap(bmp, 0, 0, bmpWidth, bmpHeight, matrix, true);

There are many examples of using ImageView. Take a look at FrameLayout last time:

<ImageView
  android:id="@+id/image"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:scaleType="center"
  android:src="@drawable/candle"
  />

Note that one thing I noticed here is that images in the Drawable folder are not capitalized.

I hope this article has been helpful in Android programming.