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; } } }