The GridView basic Android control

In the process of using the phone, we will see some pictures with the text of some cases, today we will introduce the Android control of the GridView

The GridView component is used to arrange views in a grid, similar to a matrix, which can be used when there are many elements (text, pictures, or other elements) on the screen that need to be displayed.

Apart, let us first:

Today, we are going to implement such a GridView that displays the picture and displays the text

Let's start by analyzing What resources we need to implement a GridView like this.

Speaking of resources, we certainly need such a lot of pictures Ah ~

Then, let's analyze What we need to do on the layout file .

　　First, we need a layout of each item that we customize

That's it, let's see, there's a ImageView and a TextView, and we need to create a layout file like this.

Then, we need to define a GridView in the main layout file .

Next, let's analyze what we should do in the activity .

We still follow the routine .

　　First, we need to find the GridView control and prepare the data (that is, the bunch of pictures), and then we write an adapter for it

We then inherit a baseadapteR on our custom adapter, which means we have created a basic adapter

Then we go in the adapter to get a layout filler , in order to get the layout of our item

We then find the control in the item in the adapter and assign the value

Finally, we'll go back to this layout .

Next, we follow our analysis of the idea to do a specific implementation :

　　First, let's look at the layout of the item we wrote:

<?XML version= "1.0" encoding= "Utf-8"?><LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"android:orientation= "vertical"android:gravity= "Center">    <ImageViewAndroid:id= "@+id/iv_gridview_item"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"Android:adjustviewbounds= "true"Android:maxheight= "100DP"Android:maxwidth= "100DP"android:src= "@mipmap/ic_launcher"/>    <TextViewAndroid:id= "@+id/tv_gridview_item"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:layout_gravity= "Center"Android:text= "Match word"/></LinearLayout>

With the above file, we created the item layout. Here we can see very clearly what we have done with these two controls

Then, let's look at the layout file of our main interface :

<?XML version= "1.0" encoding= "Utf-8"?><Relativelayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:tools= "Http://schemas.android.com/tools"Android:id= "@+id/activity_grid_view__main"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:paddingbottom= "@dimen/activity_vertical_margin"Android:paddingleft= "@dimen/activity_horizontal_margin"Android:paddingright= "@dimen/activity_horizontal_margin"Android:paddingtop= "@dimen/activity_vertical_margin"Tools:context= "Application.smile.demo.GridView_MainActivity">    <GridViewAndroid:id= "@+id/gridview"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:numcolumns= "3"Android:columnwidth= "10DP"        /></Relativelayout>

From the layout file above, we see that we have divided the GridView into 3 columns, and each column has a width of 10DP

Then, let's look at our main part, the implementation in activity :

　　We find the control we need through Findviewbyid , the GridView, and prepare two arrays ( An array of images of type int, A string-type array of literals , and sets the adapter for it

  Private int [] images = {r.mipmap.image_29,r.mipmap.image_30,r.mipmap.image_31,r.mipmap.image_32,            r.mipmap.image_33 , r.mipmap.image_34,r.mipmap.image_35,            r.mipmap.image_36,r.mipmap.image_37,r.mipmap.image_38, r.mipmap.image_39,            r.mipmap.image_40,r.mipmap.image_41,r.mipmap.image_42,r.mipmap.image_43,};     Private string[] Text = {"US map One", "US Map II", "The United States", "the United States Figure Four", "the United States map of the Five", "the United States figure six", "Figure seven", "United States figure Eight", "Figure nine", "United States Figure 10",            "Beauty 11", "Beauty 12", "Figure 13 "," fig. 14 "," 15 ",};

  GridView GridView = (GridView) Findviewbyid (R.id.gridview);        Gridview.setadapter (new myadapter (This, images,text));

We then come and go to create a custom adapter to inherit the Baseadapterand implement the methods in it.

　　Because our adapter is static, we need to pass the array and the context.

 private   Layoutinflater Layoutinflater;  private  int         [] images;         private   string[] text;  public  myadapter (Context context,int  [] images,string[] text) { this . I            Mages = images;             this . Text = text;        Layoutinflater  = Layoutinflater.from (context); }

Also, we return the length of our array in the GetCount () method (whichever array you choose here, anyway, is the same length ~)

@Override          Public int GetCount () {            return  images.length;        }

We then return the elements of our array in the GetItem (parametric) method

@Override          Public Object getItem (int  position) {            return  images[position];        }

Next, we return the ID of each element of our array in the getitemid (parametric) method , which is the subscript

@Override          Public long getitemid (int  position) {            return  position;        }

Next, we go to the most important GetView (parametric) method to do what we have done in the above ideas.

We start by using the layout filler to get the layout of each of our item

　　　　　　Then, get the control

　　　　　　Next, set the value (the value of ImageView is the array of images of the int type that we defined above, and the value of TextView is the array of the string type that we defined above)

　　　　　　finally , we return to our view(that is, the view obtained through the layout filler)

@Override          Public View GetView (int  position, view Convertview, ViewGroup parent) {            = layoutinflater.inflate ( R.layout.item_grideview_layout,null);             = (ImageView) V.findviewbyid (r.id.iv_gridview_item);             = (TextView) V.findviewbyid (r.id.tv_gridview_item);            Iv.setimageresource (Images[position]);            Tv.settext (Text[position]);             return v;        }

In this way, our small case is complete , the following hand-over source :

 Public classGridview_mainactivityextendsappcompatactivity {Private int[] Images ={r.mipmap.image_29,r.mipmap.image_30,r.mipmap.image_31,r.mipmap.image_32, r.mipmap.image_33,r.mipmap.image _34,r.mipmap.image_35, r.mipmap.image_36,r.mipmap.image_37,r.mipmap.image_38,r.mipmap.image_39, R.MI    Pmap.image_40,r.mipmap.image_41,r.mipmap.image_42,r.mipmap.image_43,}; Privatestring[] Text = {"US map One", "us", "us", "us", "us", "figure six", "Figure seven", "Figure Eight", "Figure nine", "Figure 10",            "Figure 11", "12", "Figure 13", "Figure 14", "Figure 15",}; @Overrideprotected voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);        Setcontentview (R.layout.activity_grid_view__main); GridView GridView=(GridView) Findviewbyid (R.id.gridview); Gridview.setadapter (NewMyadapter ( This, Images,text)); }    Private Static classMyadapterextendsbaseadapter{PrivateLayoutinflater Layoutinflater; Private int[] images; Privatestring[] text;  PublicMyadapter (Context context,int[] images,string[] text) {             This. Images =images;  This. Text =text; Layoutinflater=Layoutinflater.from (context); } @Override Public intGetCount () {returnimages.length; } @Override PublicObject GetItem (intposition) {            returnImages[position]; } @Override Public LongGetitemid (intposition) {            returnposition; } @Override PublicView GetView (intposition, View Convertview, ViewGroup parent) {View v= Layoutinflater.inflate (R.layout.item_grideview_layout,NULL); ImageView IV=(ImageView) V.findviewbyid (R.id.iv_gridview_item); TextView TV=(TextView) V.findviewbyid (R.id.tv_gridview_item);            Iv.setimageresource (Images[position]);            Tv.settext (Text[position]); returnv; }    }}

Let the program write to life, the code into the soul

　　　　　　　　　　　　　　　　　　　　-------Smile, ZJ

The GridView basic Android control