Android中使用GridView实现底部标签页效果

底部标签页效果如下：

---

在布局文件中，定义如下：

  <GridView
        android:id="@+id/grid"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:numColumns="5" />

---

全局中定义几个变量：

    private GridView grid;
    private View[] vs=new View[5];
    private ImageView[] imgs = new ImageView[5];
    private TextView[] tvs = new TextView[5];
    private String[] str = {"案例","模型","进度","资料","我的"};
    private int[] resOff={R.drawable.icon_anli_off,R.drawable.icon_moxing_off,R.drawable.icon_jindu_off,R.drawable.icon_ziliao_off,R.drawable.icon_my_off};
    private int[] resOn={R.drawable.icon_anli_on,R.drawable.icon_moxing_on,R.drawable.icon_jindu_on,R.drawable.icon_ziliao_on,R.drawable.icon_my_on};

---

下面在OnCreate函数中：

       for (int i = 0; i < vs.length; i++) {
            vs[i] = getLayoutInflater().inflate(R.layout.act_grid_item,null);
            imgs[i] = (ImageView) vs[i].findViewById(R.id.item_img);
            tvs[i]=(TextView) vs[i].findViewById(R.id.item_tv);
            imgs[i].setImageResource(resOff[i]);
            tvs[i].setText(str[i]);
        }
        imgs[0].setImageResource(resOn[0]);
        tvs[0].setTextColor(Color.parseColor("#0099cc"));

        grid = (GridView) findViewById(R.id.grid);
        grid.setAdapter(new MyAdapter());

---

GridView中每一个Item点击后，被点击的条目高亮蓝色显示，其它条目灰色显示，实现代码如下：

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    for (int i = 0; i < 2; i++) {
            if(i==position){
                imgs[i].setImageResource(resOn[i]);
                tvs[i].setTextColor(Color.parseColor("#0099cc"));
            }else{
                imgs[i].setImageResource(resOff[i]);
                tvs[i].setTextColor(Color.parseColor("#000000"));
            }
        }
}

---

再看看Adapter的具体应用：

    class MyAdapter extends BaseAdapter{

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return vs.length;
        }

        @Override
        public Object getItem(int position) {
            // TODO Auto-generated method stub
            return vs[position];
        }

        @Override
        public long getItemId(int position) {
            // TODO Auto-generated method stub
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            return vs[position];
        }

    }

---

值得注意的是，平时我们往GridView的Adapter中传入的要么是int数组或者是String数组或者是Bean列表，本篇文章的例子发现，传入的还可以是一个View数组

---

act_grid_item.xml布局文件如下：

<?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:gravity="center"
    android:orientation="vertical"
    android:background="#ffffff"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/item_img"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/icon_anli_off" />

    <TextView
        android:id="@+id/item_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="案例"
        android:textColor="#000"
        android:textSize="16sp" />

</LinearLayout>

---

---

FR:徐海涛（Hunk Xu) QQ群：386476712