Lesson 57. GridView and its Attributes

Lesson 57. GridView and its Attributes


In this lesson:

– we use GridView

GridView is another component that uses adapters. It outputs grid / matrix / table elements to be emphasized)

Let’s make a simple example. And let’s look at the interesting attributes of this component.

Let’s create a project:

Project name: P0571_GridView
Build Target: Android 2.3.3
Application name: GridView
Package name: ru.startandroid.develop.p0571gridview
Create Activity: MainActivity

In the screen main.xml put GridView:



    
    

Let’s create a res / drawable- * file in any folder rect.xml



    

It’s just a rectangle filled with blue. I will use it as a background. I have not covered this topic in lessons yet, you can read more about it here.

Let’s create our layout for the adapter – item.xml



    
    

LinearLayout with the drawable / rect background we created earlier. And TextView.

code MainActivity.java:

package ru.startandroid.develop.p0571gridview;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.GridView;

public class MainActivity extends Activity {
  
  String[] data = {"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k"};
  
  GridView gvMain;
  ArrayAdapter adapter;

  
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        adapter = new ArrayAdapter(this, R.layout.item, R.id.tvText, data);
        gvMain = (GridView) findViewById(R.id.gvMain);
        gvMain.setAdapter(adapter);
        adjustGridView();
    }


  private void adjustGridView() {
  }
}

There is little code. We define a GridView and create an adapter. As the layout for the adapter, we use the created item.xml, and tvText is the element into which the adapter will insert text. The adjustGridView method is still empty, we will encode the Grid settings in it.

Let’s see what GridView attributes are.

numColumns and columnWidth

numColumns – the number of columns in the grid. If left unchecked, the column will be the default one. Let’s start the program and make sure.

Let’s change this property – let’s say, for example, 3. Let’s do this in the empty while adjustGridView method

  private void adjustGridView() {
    gvMain.setNumColumns(3);
  }

Let’s save and run.

That’s right, three columns came out.

This property can also be set to AUTO_FIT. In this case, the value of the attribute field is checked columnWidth (Column width).

– if the column width is explicitly specified, then the number of columns is calculated based on the width available to GridView and the width of the columns.

– otherwise, the number of columns is considered equal to 2

Let’s check. Specify the number of columns = AUTO_FIT, And the width of the columns will not be set yet.

  private void adjustGridView() {
    gvMain.setNumColumns(GridView.AUTO_FIT);
  }

Run, we see two columns

Now let’s specify the width of the columns, let it be 50.

  private void adjustGridView() {
    gvMain.setNumColumns(GridView.AUTO_FIT);
    gvMain.setColumnWidth(50);
  }

Now the number of columns is calculated based on their width.

You can see that 6 columns have entered the screen. You can change the column width parameter and make sure that the number of columns changes.

horizontalSpacing, verticalSpacing

These are horizontal and vertical indentations between cells. Let it be 5.

  private void adjustGridView() {
    gvMain.setNumColumns(GridView.AUTO_FIT);
    gvMain.setColumnWidth(80);
    gvMain.setVerticalSpacing(5);
    gvMain.setHorizontalSpacing(5);
  }

Let’s start the program.

A distance appeared between the cells.

stretchMode

This parameter determines how free space will be used if available. Used when you specify a column width and set the number to AUTO_FIT mode. Let’s change our method, add a stretch parameter setting there.

  private void adjustGridView() {
    gvMain.setNumColumns(GridView.AUTO_FIT);
    gvMain.setColumnWidth(80);
    gvMain.setVerticalSpacing(5);
    gvMain.setHorizontalSpacing(5);
    gvMain.setStretchMode(GridView.NO_STRETCH);
  }

stretchMode can accept 4 value:

NO_STRETCH – free space is not used

The columns are left-aligned. All free space on the right.

STRETCH_COLUMN_WIDTH – Column free space is the default mode

Columns stretched wide. It may no longer match the one specified in setColumnWidth.

STRETCH_SPACING – Free space is evenly distributed between columns

Column width is unchanged. The intervals between them have been increased.

STRETCH_SPACING_UNIFORM – Free space is evenly distributed not only between columns but also from right and left

Column width is unchanged. The intervals between them and the sides have been increased.

Of course, all these parameters can be set not only programmatically, but also through attributes in layout files. You can use any other ArrayAdapter instead. You can screw the setOnItemClickListener handler and get the position or id of the clicked item. It’s like the usual lists.

There is also a good Google example on this topic:

http://developer.android.com/resources/tutorials/views/hello-gridview.html

In the next lesson:

– we use TimePickerDialog




Discuss in the forum [52 replies]

Leave a Comment