|
完成圖
1.準備圖形檔案放在專案的res/drawable目錄內
2.在layout檔案內新增GridView元件
3.繼承BaseAdapter類別並改寫getCount()、getItem()、getItemId()、getView()方法,系統會自動呼叫這些方法
4.呼叫setAdapter(adapter)套用BaseAdapter設定
5.實作OnItemClickListener.onItemClick()處理使用者點選GridView上圖片的事件
[Android智慧型手機設計_GridView元件]
1.main.xml
建立TextView ImageView GridView
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:id="@+id/RelativeLayout1"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- 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=".MainActivity" >
- <ImageView
- android:id="@+id/imageView1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignParentBottom="true"
- android:layout_centerHorizontal="true"
- android:layout_marginBottom="20dp"
- android:src="@drawable/baby2" />
- <GridView
- android:id="@+id/gridView1"
- android:layout_width="match_parent"
- android:layout_height="140dp"
- android:layout_below="@+id/textView1"
- android:layout_centerHorizontal="true"
- android:layout_marginTop="18dp"
- android:columnWidth="200dp"
- android:gravity="center"
- android:horizontalSpacing="5dp"
- android:numColumns="2"
- android:verticalSpacing="5dp" >
- </GridView>
- <TextView
- android:id="@+id/textView1"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_alignLeft="@+id/imageView1"
- android:layout_marginLeft="42dp"
- android:text="@string/hello_world"
- android:textColor="#FF0000"
- android:textSize="20sp" />
- </RelativeLayout>
複製代碼
2.主程式 MainActivity.java
- package com.example.ann;
- //匯入類別庫
- import android.os.Bundle;
- import android.app.Activity;
- import android.content.Context;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.*;
- import android.widget.AdapterView.OnItemClickListener;
- public class MainActivity extends Activity {
- //宣告資料型態
- GridView GV;
- ImageView IV;
- //建立圖片陣列,必須先將圖匯入到圖片目錄
- Integer images[]={R.drawable.baby0,R.drawable.baby1,R.drawable.baby2,R.drawable.baby3,R.drawable.baby4
- ,R.drawable.baby5,R.drawable.baby6,R.drawable.baby7,R.drawable.baby8};
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- findViews();
- }
- public void findViews(){
- GV=(GridView)findViewById(R.id.gridView1);
- IV=(ImageView)findViewById(R.id.imageView1);
- //設定GridView Adapter到這主程式
- GV.setAdapter(new ImageAdapter(this));
- //監聽滑鼠點選GridView時的改變
- GV.setOnItemClickListener(new OnItemClickListener(){
- @Override
- public void onItemClick(AdapterView<?> parent, View v, int position,
- long id) {
- //秀出訊息
- String msg= "第 " + position+" 張";
- Toast.makeText(MainActivity.this,msg, Toast.LENGTH_SHORT).show();
- //秀出圖檔到ImageView
- IV.setImageResource(images[position]);
- }});
- }
- //自訂ImageAdapter繼承BaseAdapter
- public class ImageAdapter extends BaseAdapter{
- Context context;
- //建構元
- public ImageAdapter(Context c){
- this.context=c;
- }
- @Override
- //回傳有幾張圖片
- public int getCount() {
- // TODO Auto-generated method stub
- return images.length;
- }
- @Override
- public Object getItem(int position) {
- // TODO Auto-generated method stub
- return position;
- }
- @Override
- public long getItemId(int position) {
- // TODO Auto-generated method stub
- return position;
- }
- @Override
- public View getView(int position, View convertView, ViewGroup parent) {
- ImageView imageView;
- 如果convertView為空,就放入預設圖片檔案填入,不然就用現有圖片
- if(convertView==null){
- imageView=new ImageView(context);
- imageView.setLayoutParams(new GridView.LayoutParams(125,125));
- imageView.setScaleType(ImageView.ScaleType.FIT_XY);
- }
- else{
- imageView=(ImageView)convertView;
- }
- //設定點選而改變的圖片到imageView
- imageView.setImageResource(images[position]);
- //回傳imageView
- return imageView;
- }
- }
- }
複製代碼
|
|