[Android智慧型手機設計_ListView元件]

woff

完成圖



1.主layout main.xml建立 TextView ListView

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
2. xmlns:tools="http://schemas.android.com/tools"
   
3. android:layout_width="match_parent"
   
4. android:layout_height="match_parent"
   
5. android:paddingBottom="@dimen/activity_vertical_margin"
   
6. android:paddingLeft="@dimen/activity_horizontal_margin"
   
7. android:paddingRight="@dimen/activity_horizontal_margin"
   
8. android:paddingTop="@dimen/activity_vertical_margin"
   
9. tools:context=".MainActivity" >
   
10. <TextView
    
11. android:id="@+id/textView1"
    
12. android:layout_width="wrap_content"
    
13. android:layout_height="wrap_content"
    
14. android:text="@string/hello_world" />
    
15. 
    
16. <ListView
    
17. android:id="@+id/listView1"
    
18. android:layout_width="match_parent"
    
19. android:layout_height="wrap_content"
    
20. android:layout_alignLeft="@+id/textView1"
    
21. android:layout_below="@+id/textView1" >
    
22. </ListView>
    
23. </RelativeLayout>

複製代碼

2.建立listview.xml 上面有LinearLayout  ImageView TextView

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3. android:id="@+id/LinearLayout2"
   
4. android:layout_width="100dp"
   
5. android:layout_height="100dp"
   
6. android:orientation="horizontal">
   
7. <ImageView
   
8. android:id="@+id/imageView1"
   
9. android:layout_width="wrap_content"
   
10. android:layout_height="wrap_content"
    
11. />
    
12. <TextView
    
13. android:id="@+id/textView1"
    
14. android:layout_width="wrap_content"
    
15. android:layout_height="wrap_content"
    
16. />
    
17. </LinearLayout>
    

複製代碼

3.主程式 MainActivity.java

1. 
   
2. package com.example.lv;
   
3. 
   
4. 
   
5. //匯入類別庫
   
6. import android.os.Bundle;
   
7. import android.app.Activity;
   
8. import android.content.Context;
   
9. import android.view.LayoutInflater;
   
10. import android.view.Menu;
    
11. import android.view.View;
    
12. import android.view.ViewGroup;
    
13. import android.widget.AdapterView;
    
14. import android.widget.BaseAdapter;
    
15. import android.widget.ImageView;
    
16. import android.widget.LinearLayout;
    
17. import android.widget.ListView;
    
18. import android.widget.TextView;
    
19. import android.widget.Toast;
    
20. import android.widget.AdapterView.OnItemClickListener;
    
21. 
    
22. public class MainActivity extends Activity {
    
23. //宣告資料型態
    
24. ListView listView;
    
25. 
    
26. 
    
27. //建立 ImageTextAdapter 繼承於BaseAdapter
    
28. class ImageTextAdapter extends BaseAdapter{
    
29. //layout擴充器
    
30. LayoutInflater layoutInflater;
    
31. 
    
32. //建立圖片陣列 images ，圖片必須先匯入圖片檔案
    
33. Integer images[]={R.drawable.baby0,R.drawable.baby1,R.drawable.baby2,R.drawable.baby3,R.drawable.baby4
    
34. ,R.drawable.baby5,R.drawable.baby6,R.drawable.baby7,R.drawable.baby8,R.drawable.baby9,R.drawable.baby10
    
35. ,R.drawable.baby11,R.drawable.baby12,R.drawable.baby13,R.drawable.baby14,R.drawable.baby15,R.drawable.baby16
    
36. ,R.drawable.baby17,R.drawable.baby18,R.drawable.baby19,R.drawable.baby20};
    
37. 
    
38. 
    
39. //建立 ViewHolder 讓LinearLayout 裡的 ImageView TextView 做一次讀入記憶體
    
40. private class ViewHolder {
    
41. ImageView imageView;
    
42. TextView textView;
    
43. }
    
44. //建構元
    
45. public ImageTextAdapter(Context context) {
    
46. layoutInflater =
    
47. (LayoutInflater)context.getSystemService(LAYOUT_INFLATER_SERVICE);
    
48. }
    
49. @Override
    
50. //獲取圖片張數
    
51. public int getCount() {
    
52. // TODO 自動產生的方法 Stub
    
53. return images.length;
    
54. }
    
55. 
    
56. @Override
    
57. public Object getItem(int position) {
    
58. // TODO 自動產生的方法 Stub
    
59. return position;
    
60. }
    
61. 
    
62. @Override
    
63. public long getItemId(int position) {
    
64. // TODO 自動產生的方法 Stub
    
65. return position;
    
66. }
    
67. 
    
68. @Override
    
69. public View getView(int position, View convertView, ViewGroup parent) {
    
70. 
    
71. //如果convertView為空，讀取預設檔案到viewHolder並套用到listview.xml，不然用現有檔案
    
72. ViewHolder viewHolder;
    
73. if (convertView == null) {
    
74. convertView = layoutInflater.inflate(R.layout.listview, null);
    
75. viewHolder = new ViewHolder();
    
76. viewHolder.textView = (TextView) convertView.findViewById(R.id.textView1);
    
77. viewHolder.imageView = (ImageView) convertView.findViewById(R.id.imageView1);
    
78. convertView.setTag(viewHolder);
    
79. } else {
    
80. viewHolder = (ViewHolder) convertView.getTag();
    
81. }
    
82. viewHolder.imageView.setImageResource(images[position]);
    
83. viewHolder.textView.setText("出生 " + (position + 1)+" 天");
    
84. return convertView;
    
85. }        
    
86. }
    
87. @Override
    
88. protected void onCreate(Bundle savedInstanceState) {
    
89. super.onCreate(savedInstanceState);
    
90. setContentView(R.layout.activity_main);
    
91. listView = (ListView)findViewById(R.id.listView1);
    
92. //設定Adapter到listview
    
93. listView.setAdapter(new ImageTextAdapter(this));
    
94. 監聽listview的改變
    
95. listView.setOnItemClickListener(new OnItemClickListener() {
    
96. @Override
    
97. public void onItemClick(AdapterView<?> parent, View view,
    
98. int position, long id) {
    
99. //獲取LinearLayout上的TextView的文字訊息
    
100. TextView textView = (TextView)((LinearLayout)view).getChildAt(1);
     
101. //秀出TextView的文字訊息到Toast
     
102. Toast.makeText(getApplicationContext(), textView.getText(),
     
103. Toast.LENGTH_SHORT).show();        
     
104. }
     
105. });
     
106. }
     
107. }

複製代碼

完成圖片