Android基本控件之GridView

我們在使用手機的過程中，會看到一些圖片配上文字的一些情況，今天我們就來介紹一下安卓控件的GridView

GridView組件用來以網格方式排列視圖，與矩陣類似，當屏幕上有很多元素（文字、圖片或其他元素）需要顯示時，可以使用該組件

二話不說，我們先上圖：

今天，我們就來實現這樣的一個即顯示圖片又顯示文字的一個GridView

我們首先來分析一下，我們如果想實現這樣的一個GridView都需要些什么資源吧

　　說到資源，我們肯定是需要這么一大堆的圖片呀~

然后，我們再來分析一下，我們需要在布局文件上做些什么

　　首先，我們需要一個我們自定義的每個item的布局

　　也就是這個，我們來看一下，這里面有一個ImageView和一個TextView，我們就需要創建這樣的一個布局文件

　　然后，我們來需要在主布局文件中去定義一個GridView

接下來，我們再分析一下，我們在Activity中應該如何去實現

　　我們還是按照套路來。

　　首先，我們需要找到GridView這個控件，並准備數據（也就是那一堆圖片），然后我們為它寫一個適配器

　　然后，我們在自定義的適配器上去繼承一個BaseAdapter，也就是我們創建了一個基本的適配器

　　然后，我們在適配器中去獲得一個布局填充器，為了得到我們的item的布局

　　然后，我們在適配器中找到item中的控件並賦值

　　最后，我們返回這個布局就可以了

 

接下來，我們按照我們的分析思路，來做一個具體的實現：

　　首先，我們來看我們寫的item的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android: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"/>
    <TextView
        android:id="@+id/tv_gridView_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="配字"/>
</LinearLayout>

通過上面的文件，我們就創建了item的布局。在這里，我們就可以很清晰的看到我們都對這兩個控件做了什么

然后，我們來看我們的主界面的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns: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">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="3"
        android:columnWidth="10dp"
        />
</RelativeLayout>

從上面的布局文件中，我們看到了 我們把這個GridView分成了3列，並且每列的寬度都是10dp

然后，我們來看我們最主要的部分，也就是Activity中的實現：

　　我們通過findViewById找到我們需要的控件，也就是GridView，而且准備兩個數組（一個是int類型的圖片數組、一個String類型的文字數組），並為其設置適配器

  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 = {"美圖一","美圖二","美圖三","美圖四","美圖五","美圖六","美圖七","美圖八","美圖九","美圖十",
            "美圖十一","美圖十二","美圖十三","美圖十四","美圖十五",};

  GridView gridView = (GridView) findViewById(R.id.gridView);
        gridView.setAdapter(new MyAdapter(this,images,text));

然后，我們來去創建自定義的適配器去繼承BaseAdapter，並實現其中的方法。

　　因為我們的這個適配器是靜態的，所以，我們需要將數組和上下文傳過來

private LayoutInflater layoutInflater;
        private int[] images;
        private String[] text;
        public MyAdapter(Context context,int[] images,String[] text){
            this.images = images;
            this.text = text;
            layoutInflater = LayoutInflater.from(context);
        }

　　並且，我們在getCount()方法中返回一個我們的數組的長度（這里選哪個數組都可以，反正都是一樣的長度~）

@Override
        public int getCount() {
            return images.length;
        }

　　然后，我們在getItem(有參數)方法中返回我們的數組的元素

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

　　接下來，我們在getItemId(有參數)方法中返回我們的數組的每個元素的ID，這里也就是下標

@Override
        public long getItemId(int position) {
            return position;
        }

　　接下來，我們就到了最重要的getView(有參數)方法中去做我們在上面思路里的實現了

　　　　我們首先，通過布局填充器去獲得我們的每個item的布局

　　　　　　然后，獲得控件

　　　　　　接下來，設置值（ImageView的值就是我們上面定義的那個int類型的裝圖片的數組，TextView的值就是我們上面定義的那個String類型的裝文字的數組）

　　　　　　最后，我們返回我們的這個View（就是通過布局填充器獲得的那個View）

 @Override
        public View getView(int position, 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]);
            return v;
        }

這樣，我們的這個小案例就完成了，下面交出源碼：

public class GridView_MainActivity extends AppCompatActivity {
    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 = {"美圖一","美圖二","美圖三","美圖四","美圖五","美圖六","美圖七","美圖八","美圖九","美圖十",
            "美圖十一","美圖十二","美圖十三","美圖十四","美圖十五",};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid_view__main);
        GridView gridView = (GridView) findViewById(R.id.gridView);
        gridView.setAdapter(new MyAdapter(this,images,text));
    }
    private static class MyAdapter extends BaseAdapter{
        private LayoutInflater layoutInflater;
        private int[] images;
        private String[] text;
        public MyAdapter(Context context,int[] images,String[] text){
            this.images = images;
            this.text = text;
            layoutInflater = LayoutInflater.from(context);
        }
        @Override
        public int getCount() {
            return images.length;
        }

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

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, 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]);
            return v;
        }
    }
}

 

讓程序寫入生命，將代碼融入靈魂

　　　　　　　　　　　　　　　　　　　　-------smile、zj