Horizontal and vertical gridveiw for Android

After studying the android gridview, the default gridview only supports vertical scrolling, but does not support horizontal scrolling. Sometimes we want to achieve the table effect, both horizontal and vertical have a scroll bar, can be implemented using the following method ).

1) Main. xml -- layout File

<? XML version = "1.0" encoding = "UTF-8"?>
<Horizontalscrollview xmlns: Android = "http://schemas.android.com/apk/res/android"

Android: layout_width = "fill_parent"
Android: layout_height = "fill_parent"
Android: alwaysdrawnwithcache = "true"
Android: Orientation = "vertical"
Android: scrollbaralwaysdrawhorizontaltrack = "true"
Android: scrollbaralwaysdrawverticaltrack = "true"
Android: scrollbars = "Horizontal | vertical"
>

<Framelayout
Android: layout_width = "wrap_content"
Android: layout_height = "fill_parent">

<Gridview
Android: Id = "@ + ID/data_gridview"
Android: layout_width = "1395dip" <! -- The table requires 45 columns, with each column 31dip, so the total width is 1395dip -->
Android: layout_height = "fill_parent"
Android: layout_gravity = "center"
Android: Background = "# ff0000"
Android: columnwidth = "31dip" <! -- Width of each column -->
Android: gravity = "center"
Android: numcolumns = "45" <! -- Note that the specified gridview has 45 columns and the width of each column is 31 dip -->
Android: scrollbaralwaysdrawhorizontaltrack = "true"
Android: scrollbaralwaysdrawverticaltrack = "true"
Android: scrollbars = "Horizontal | vertical"
Android: horizontalspacing = "1dip" <! -- Here And the 1dip below are used to display the grid border line of the table and perform imaging table results -->
Android: verticalspacing = "1dip"/>
</Framelayout>

</Horizontalscrollview>

2) Layout file corresponding to each gridcell --

Imagecell. xml

<? XML version = "1.0" encoding = "UTF-8"?>
<Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android"
Android: layout_width = "match_parent"
Android: layout_height = "match_parent">

<Imageview Android: Id = "@ + ID/cellimage"
Android: layout_width = "wrap_content"
Android: layout_height = "wrap_content"
Android: layout_centerinparent = "true">
</Imageview>

</Relativelayout>

 

3) activity code-the view reuse mechanism is implemented to improve the performance.

Package com. xxxx. UI

Import XXXX. xxxx

Public class gridviewtestactivity extends activity {

Private int disp_rows = 20; // number of rows displayed
Private Final Static int column_cnt = 45; // The number of columns to be displayed, which corresponds to the layout file.

Private gridview datagridview;

Public void oncreate (bundle savedinstancestate ){
Super. oncreate (savedinstancestate );

Datagridview = (gridview) findviewbyid (R. Id. data_gridview );
Datagridview. setnumcolumns (column_cnt); // a total of 45 Columns

Datagridview. setadapter (New celladapter (getapplicationcontext ()));
Datagridview. setonitemclicklistener (New onitemclicklistener (){
@ Override
Public void onitemclick (adapterview <?> Parent, view V, int position, long ID ){
Toast. maketext (gridviewtestactivity. This, "" + position, Toast. length_short). Show ();
}
});

} // End oncreate

Class celladapter extends baseadapter {
Private context mcontext;
Private layoutinflater minflater;

Public celladapter (context c ){
Mcontext = C;
Minflater = layoutinflater. from (c );
}

Public int getcount (){
Return (disp_rows * column_cnt); // number of rows X number of columns indicates the total number of grids to be displayed
}

Public object getitem (INT position ){
Return NULL; // do nothing now
}

Public long getitemid (INT position ){
Return 0;
}

// Create a new imageview for each item referenced by the adapter
// Imageview is placed in a custom grid layout file, which can be expanded. That is, the content displayed in the grid can be expanded by yourself.
@ Override
Public View getview (INT position, view convertview, viewgroup parent ){
Int ROW = getrow (position); // obtain the rows and columns of the table corresponding to the grid.
Int column = getcolumn (position );

Imageview;
If (convertview = NULL ){
Convertview = minflater. Inflate (R. layout. imagecell, null );

// You can also use textview or imageview as a grid display instead of the custom imagecell layout. The custom layout is demonstrated here for extension purposes.

// Imageview = new imageview (mcontext); // directly use imageview

} // Reuse view to improve performance else {

// Imageview = (imageview) convertview; // when you directly use imageview

}

Imageview = (imageview) convertview. findviewbyid (R. Id. cellimage); // If imageview is used directly, this line is not
Imageview. setbackgroundcolor (color. Black );
Imageview. setimageresource (R. drawable. cellimage );
Imageview. refreshdrawablestate ();

Return convertview;
}

Private Final int getrow (INT position ){
Return (position/column_cnt );
}
Private Final int getcolumn (INT position ){
Return (position % column_cnt );
}
}
}

 

The preceding figure shows that the two-dimensional table can be achieved by using the gridview, which has good performance and has a scroll bar in both the vertical and horizontal directions.

Advantage: good performance. You can use custom layout as the display of each grid. You can also expand the getview method of celladapter to display text in some grids according to convertview instanceof imageview or textview, some cells display images in order to display images and text at the same time.

Disadvantage: the size of each grid must be the same. It is difficult to adjust the display effect when both the image and text are displayed. Of course, you can try it with patience. In theory, you can display the text and text simultaneously, it also supports the display of different cells (that is, some cells are displayed in large quantities and some cells are displayed in small quantities, and the size of cells is dynamically displayed based on the content displayed in the cells ), please let me know and learn.