鍍金池/ 教程/ Android/ 第十四章-GridView控件
第十八章-ViewPager+FragmentStatePagerAdapter實(shí)現(xiàn)仿微信Tab
第十五章-GridView實(shí)現(xiàn)動(dòng)態(tài)添加和刪除子項(xiàng)
第九章-進(jìn)度條ProgressBar
第十二章-經(jīng)典的ListView
第十四章-GridView控件
第八章-時(shí)間相關(guān)控件
第七章-下拉框Spinner控件
第二章-EditText探秘
第二十章-Android菜單之上下文菜單
第十一章-各種對話框Dialog集錦
第二十一章-Android菜單之子菜單
第六章-切換類TextSwitcher和ImageSwitcher
第十七章-ViewPager切換界面
第五章-開關(guān)按鈕ToggleButton和Switch
第二十二章-PopupWindow浮動(dòng)窗
第十六章-幻燈片ViewFlipper
第二十四章-RecyclerView動(dòng)態(tài)添加、刪除及點(diǎn)擊事件
第三章-交互之王Button控件
第二十三章-全新控件RecyclerView
第一章-好玩的TextView
第十三章-ListView擴(kuò)展(多選、全選、反選)
第四章-玩轉(zhuǎn)單選和多選按鈕
第十章-可以拖動(dòng)的ProgressBar-SeekBar
第十九章-Android菜單之選項(xiàng)菜單

第十四章-GridView控件

上面的章節(jié)中,研究了ListView的部分使用方法,本部分將對GridView的屬性和方法進(jìn)行講解,較ListView一般用于列表項(xiàng)的展示,GridView一般用于制作某些選項(xiàng)按鈕上,常見的九宮格就可以用GridView來實(shí)現(xiàn)。首先我們來看一下GridView有哪些常用屬性和相關(guān)方法:

http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/14-1.png" alt="這里寫圖片描述" />

下面通過一個(gè)簡單實(shí)例看一下如何使用GridView控件,主布局文件如下:

<?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">
    <GridView
        android:id="@+id/gv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:horizontalSpacing="5dp"
        android:numColumns="3"
        android:stretchMode="columnWidth"
        android:verticalSpacing="5dp" />
</RelativeLayout>

設(shè)置了numColumns屬性,顯示3列,設(shè)置了stretchMode屬性為columnWidth表示圖片的縮放與列寬的大小一致。 子項(xiàng)布局文件如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp" />
    <TextView
        android:id="@+id/tv"
        android:layout_width="100dp"
        android:textSize="20sp"
        android:gravity="center"
        android:layout_height="wrap_content" />
</LinearLayout>

子項(xiàng)布局文件中包括一個(gè)ImageView控件和一個(gè)TextView控件,采用線性布局,并設(shè)置orientation屬性為vertical。 為了方便操作,對Animal這一類進(jìn)行了封裝:

public class Animal {
    public Animal(String animal, int imgId) {
        this.animal = animal;
        this.imgId = imgId;
    }
    private String animal;
    private int imgId;
    public String getAnimal() {
        return animal;
    }
    public void setAnimal(String animal) {
        this.animal = animal;
    }
    public int getImgId() {
        return imgId;
    }
    public void setImgId(int imgId) {
        this.imgId = imgId;
    }
}

主要包含animal即動(dòng)物名和imgId即圖片ID這兩個(gè)屬性,設(shè)置了相應(yīng)的setter和getter方法。 適配器類繼承自BaseAdapter類,代碼如下:

public class GridAdapter extends BaseAdapter {
    private Context context;
    private List<Animal> datas;
    public GridAdapter(Context context,List<Animal> datas){
        this.context=context;
        this.datas=datas;
    }
    //返回子項(xiàng)的個(gè)數(shù)
    @Override
    public int getCount() {
        return datas.size();
    }
    //返回子項(xiàng)對應(yīng)的對象
    @Override
    public Object getItem(int position) {
        return datas.get(position);
    }
    //返回子項(xiàng)的下標(biāo)
    @Override
    public long getItemId(int position) {
        return position;
    }
    //返回子項(xiàng)視圖
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Animal animal= (Animal) getItem(position);
        View view;
        ViewHolder viewHolder;
        if(convertView==null){
            view = LayoutInflater.from(context).inflate(R.layout.item_layout,null);
            viewHolder=new ViewHolder();
   viewHolder.animalImage=(ImageView)view.findViewById(R.id.iv);
            viewHolder.animalName=(TextView)view.findViewById(R.id.tv);
            view.setTag(viewHolder);
        }else{
            view=convertView;
            viewHolder= (ViewHolder) view.getTag();
        }
        viewHolder.animalName.setText(animal.getAnimal());
        viewHolder.animalImage.setImageResource(animal.getImgId());
        return view;
    }
    //創(chuàng)建ViewHolder類
    class ViewHolder{
        ImageView animalImage;
        TextView animalName;
    }
}

細(xì)心的讀者可以看到,這里的適配器類除了名字和ListView的適配器類不同之外,其余都相同,GridView和ListView都是繼承自AbsListView,用法也有很多相似之處。學(xué)習(xí)要有舉一反三的能力,找出控件使用時(shí)的共性,可以提高學(xué)習(xí)速度并能加深理解。這里就不再重復(fù)解釋上面的代碼,不清楚的同學(xué)可以翻看前面的ListView部分。

MainActivity.java:

public class MainActivity extends AppCompatActivity {
    private GridView gridView;
    private GridAdapter gridAdapter;
    private List<Animal> datas = new ArrayList<Animal>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gridView=(GridView)findViewById(R.id.gv);
        initDatas();//初始化數(shù)據(jù)
        gridAdapter=new GridAdapter(this,datas);//實(shí)例化適配器
        gridView.setAdapter(gridAdapter);//設(shè)置適配器
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {//設(shè)置子項(xiàng)單擊監(jiān)聽
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                String name=datas.get(position).getAnimal();
                ImageView imageView=new ImageView(MainActivity.this);
                imageView.setScaleType(ImageView.ScaleType.CENTER);
                imageView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
              imageView.setImageResource(datas.get(position).getImgId());
                Dialog dialog=new AlertDialog.Builder(MainActivity.this)
                        .setIcon(android.R.drawable.ic_btn_speak_now)
                        .setTitle("您選擇的動(dòng)物是:"+name)
                        .setView(imageView)
                        .setNegativeButton("取消", new DialogInterface.OnClickListener() {
                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                            }
                        }).create();
                dialog.show();
            }
        });

    }

    private void initDatas() {
        Animal animal0 = new Animal("兔八哥", R.drawable.rabbit);
        Animal animal1 = new Animal("眼鏡蛇", R.drawable.snack);
        Animal animal2 = new Animal("小金魚", R.drawable.fish);
        Animal animal3 = new Animal("千里馬", R.drawable.horse);
        Animal animal4 = new Animal("米老鼠", R.drawable.mouse);
        Animal animal5 = new Animal("大國寶", R.drawable.panda);
        datas.add(animal0);
        datas.add(animal1);
        datas.add(animal2);
        datas.add(animal3);
        datas.add(animal4);
        datas.add(animal5);
    }
}

總結(jié)來講,實(shí)現(xiàn)GridView需要三個(gè)步驟:

  • 準(zhǔn)備數(shù)據(jù)源(initDatas())
  • 新建適配器(GridAdapter extends BaseAdapter)
  • 加載適配器(setAdapter())

這里我們還實(shí)現(xiàn)了GridView的子項(xiàng)點(diǎn)擊監(jiān)聽(setOnItemClickListener)點(diǎn)擊某個(gè)子項(xiàng)時(shí),彈出Dialog窗口,通過List的get方法獲取單擊子項(xiàng)對應(yīng)的Animal對象,然后再通過Animal類的getAnimal方法獲取對應(yīng)的動(dòng)物名。同理根據(jù)上面的方法獲得圖片資源對象,調(diào)用Dialog的setView方法,將資源圖片對象傳入,可以把對應(yīng)子項(xiàng)的圖片顯示在Dialog對話框中。 運(yùn)行實(shí)例如下:

http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/14-2.png" alt="這里寫圖片描述" /> http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/14-3.png" alt="這里寫圖片描述" />