TShopping

 找回密碼
 註冊
搜索
查看: 1589|回復: 0

[教學] GridView元件的實作流程:

[複製鏈接]
發表於 2013-5-31 21:24:55 | 顯示全部樓層 |閱讀模式
 
Push to Facebook
完成圖
3.jpg
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

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/RelativeLayout1"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:orientation="vertical"
  7. android:paddingBottom="@dimen/activity_vertical_margin"
  8. android:paddingLeft="@dimen/activity_horizontal_margin"
  9. android:paddingRight="@dimen/activity_horizontal_margin"
  10. android:paddingTop="@dimen/activity_vertical_margin"
  11. tools:context=".MainActivity" >

  12. <ImageView
  13. android:id="@+id/imageView1"
  14. android:layout_width="wrap_content"
  15. android:layout_height="wrap_content"
  16. android:layout_alignParentBottom="true"
  17. android:layout_centerHorizontal="true"
  18. android:layout_marginBottom="20dp"
  19. android:src="@drawable/baby2" />

  20. <GridView
  21. android:id="@+id/gridView1"
  22. android:layout_width="match_parent"
  23. android:layout_height="140dp"
  24. android:layout_below="@+id/textView1"
  25. android:layout_centerHorizontal="true"
  26. android:layout_marginTop="18dp"
  27. android:columnWidth="200dp"
  28. android:gravity="center"
  29. android:horizontalSpacing="5dp"
  30. android:numColumns="2"
  31. android:verticalSpacing="5dp" >
  32. </GridView>

  33. <TextView
  34. android:id="@+id/textView1"
  35. android:layout_width="wrap_content"
  36. android:layout_height="wrap_content"
  37. android:layout_alignLeft="@+id/imageView1"
  38. android:layout_marginLeft="42dp"
  39. android:text="@string/hello_world"
  40. android:textColor="#FF0000"
  41. android:textSize="20sp" />

  42. </RelativeLayout>
複製代碼


2.主程式 MainActivity.java

  1. package com.example.ann;
  2. //匯入類別庫
  3. import android.os.Bundle;
  4. import android.app.Activity;
  5. import android.content.Context;
  6. import android.view.View;
  7. import android.view.ViewGroup;
  8. import android.widget.*;
  9. import android.widget.AdapterView.OnItemClickListener;

  10. public class MainActivity extends Activity {
  11. //宣告資料型態
  12. GridView GV;
  13. ImageView IV;
  14. //建立圖片陣列,必須先將圖匯入到圖片目錄
  15. Integer images[]={R.drawable.baby0,R.drawable.baby1,R.drawable.baby2,R.drawable.baby3,R.drawable.baby4
  16. ,R.drawable.baby5,R.drawable.baby6,R.drawable.baby7,R.drawable.baby8};
  17. @Override
  18. protected void onCreate(Bundle savedInstanceState) {
  19. super.onCreate(savedInstanceState);
  20. setContentView(R.layout.activity_main);
  21. findViews();
  22. }
  23. public void findViews(){
  24. GV=(GridView)findViewById(R.id.gridView1);
  25. IV=(ImageView)findViewById(R.id.imageView1);
  26. //設定GridView Adapter到這主程式
  27. GV.setAdapter(new ImageAdapter(this));
  28. //監聽滑鼠點選GridView時的改變
  29. GV.setOnItemClickListener(new OnItemClickListener(){

  30. @Override
  31. public void onItemClick(AdapterView<?> parent, View v, int position,
  32. long id) {
  33. //秀出訊息
  34. String msg= "第 " + position+" 張";
  35. Toast.makeText(MainActivity.this,msg, Toast.LENGTH_SHORT).show();

  36. //秀出圖檔到ImageView
  37. IV.setImageResource(images[position]);

  38. }});

  39. }

  40. //自訂ImageAdapter繼承BaseAdapter
  41. public class ImageAdapter extends BaseAdapter{
  42. Context context;


  43. //建構元
  44. public ImageAdapter(Context c){
  45. this.context=c;
  46. }
  47. @Override
  48. //回傳有幾張圖片
  49. public int getCount() {
  50. // TODO Auto-generated method stub
  51. return images.length;
  52. }

  53. @Override
  54. public Object getItem(int position) {
  55. // TODO Auto-generated method stub
  56. return position;
  57. }

  58. @Override
  59. public long getItemId(int position) {
  60. // TODO Auto-generated method stub
  61. return position;
  62. }

  63. @Override
  64. public View getView(int position, View convertView, ViewGroup parent) {
  65. ImageView imageView;
  66. 如果convertView為空,就放入預設圖片檔案填入,不然就用現有圖片
  67. if(convertView==null){
  68. imageView=new ImageView(context);
  69. imageView.setLayoutParams(new GridView.LayoutParams(125,125));
  70. imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  71. }
  72. else{
  73. imageView=(ImageView)convertView;
  74. }
  75. //設定點選而改變的圖片到imageView
  76. imageView.setImageResource(images[position]);
  77. //回傳imageView
  78. return imageView;
  79. }        
  80. }
  81. }
複製代碼






 

臉書網友討論
*滑块验证:
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2024-3-29 20:06 , Processed in 0.061865 second(s), 26 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表