Microsoft Word - grid_view_trong_android.docx

Bản ghi

1 Grid View trong Android GridView trong Android hiển thị các item trong mảng lưới hai chiều có thể scroll và các item này không cần thiết phải được định nghĩa trước, nhưng chúng tự động chèn vào Layout bởi sử dụng một ListAdapter GRID VIEW Một Adapter thực sự là cầu nối giữa các thành phần UI và nguồn dữ liệu mà điền dữ liệu vào trong thành phần UI. Adapter giữ dữ liệu và gửi dữ liệu tới Adapter View, từ đó view có thể lấy dữ liệu từ Adapter View đó và hiển thị dữ liệu trên các view khác nhau ở dạng Spinner, List View, Grid View,

2 The ListView and GridView are subclasses of AdapterView and they can be populated by binding them to an Adapter, which retrieves data from an external source and creates a View that represents each data entry. Các thuộc tính của GridView trong Android Bảng dưới liệt kê một số thuộc tính riêng cho GridView: Attribute Miêu tả android:id Đây là ID mà nhận diện duy nhất Layout android:columnwidth Xác định độ rộng cố định cho mỗi cột. Có thể là px, dp, sp, in, hoặc mm android:gravity Xác định gravity bên trong mỗi ô. Giá trị có thể là top, bottom, left, right, center, center_vertical, center_horizontal... android:horizontalspacing Xác định khoảng cách mặc định theo chiều ngang giữa các cột. Có thể là px, dp, sp, in, hoặc mm android:numcolumns Xác định có bao nhiêu cột để hiển thị. Có thể là một giá trị nguyên, như "100" hoặc auto_fit nghĩa là hiển thị bao nhiêu cột để có thể điền vào không gian có sẵn android:stretchmode Xác định cách các cột nên dãn ra để điền vào không gian còn trống. Nó phải là một trong các giá trị: none: Vô hiệu hóa việc mở rộng spacingwidth: Khoảng cách giữa mỗi cột được dãn ra columnwidth: Mỗi cột được kéo dãn ra như nhau spacingwidthuniform: Khoảng cách kéo dãn ra là đồng nhất android:verticalspacing Định nghĩa khoảng cách mặc định theo chiều dọc giữa các

3 Ví dụ hàng. Có thể là trong px, dp, sp, in, hoặc mm Ví dụ sau sẽ đưa bạn qua các bước đơn giản để minh họa cách bạn tạo ứng dụng Android bởi sử dụng GridView. Sau đây là các bước để sửa đổi ứng dụng Android đã tạo trong chương Ví dụ Hello World. Bước Miêu tả 1 Bạn sử dụng Android studio IDE để tạo ứng dụng Android với tên HelloWorlddưới một package là com.example.helloworld như đã giải thích trong chương Ví dụ Hello World. 2 Sửa đổi nội dung mặc định của res/layout/activity_main.xmlfile để bao nội dung GridView với các thuộc tính 3 Không cần thay đổi string.xml, Android Studio sẽ để ý các hằng mặc định này 4 Đặt một số hình ảnh trong res/drawable-hdpi.tôi đã đặt sample0.jpg, sample1.jpg, sample2.jpg, sample3.jpg, sample4.jpg, sample5.jpg, sample6.jpg và sample7.jpg 5 Tạo một lớp mới có tên ImageAdapter dưới một package là com.example.helloworld mà kế thừa BaseAdapter. Lớp này sẽ triển khai các tính năng của một Adapter 6 Chạy ứng dụng để chạy Android Emulator và kiểm tra kết quả các thay đổi đã được thực hiện trong ứng dụng Sau đây là nội dung của Main Activity file đã được sửa đổi:src/com.example.helloworld/mainactivity.java. package com.example.helloworld; import android.os.bundle; import android.app.activity; import android.view.menu; import android.widget.gridview; public class MainActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); GridView gridview = (GridView) findviewbyid(r.id.gridview); gridview.setadapter(new ImageAdapter(this)); public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.main, menu); return true; } }

4 Sau đây là nội dung của res/layout/activity_main.xml file <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android=" android:layout_width="fill_parent" android:layout_height="fill_parent" android:columnwidth="90dp" android:numcolumns="auto_fit" android:verticalspacing="10dp" android:horizontalspacing="10dp" android:stretchmode="columnwidth" android:gravity="center" /> Sau đây là nội dung của res/values/strings.xml để định nghĩa hai hằng <?xml version="1.0" encoding="utf-8"?> <resources> name="app_name">helloworld</string> <string name="action_settings">settings</string> </resources> <string Sau đây là nội dung của src/com.example.helloworld/imageadapter.java file package com.example.helloworld; import android.content.context; import android.view.view; import android.view.viewgroup; import android.widget.baseadapter; import android.widget.gridview; import android.widget.imageview; public class ImageAdapter extends BaseAdapter { private Context mcontext; // Constructor public ImageAdapter(Context c) { mcontext = c; } public int getcount() { return mthumbids.length; } public Object getitem(int position) { return null; } public long getitemid(int position) { return 0; } // create a new ImageView for each item referenced by the Adapter public View getview(int position, View convertview, ViewGroup parent) { ImageView imageview; if (convertview == null) { imageview = new ImageView(mContext); imageview.setlayoutparams(new GridView.LayoutParams(85, 85)); imageview.setscaletype(imageview.scaletype.center_crop); imageview.setpadding(8, 8, 8, 8); } else { imageview = (ImageView) convertview; } imageview.setimageresource(mthumbids[position]); return imageview; } // Keep all Images in array public Integer[] mthumbids = { R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7 }; } Chạy ứng dụng Hello World! vừa sửa đổi ở trên. Giả sử bạn đã tạo AVD trong khi cài đặt. Để chạy ứng dụng từ Android Studio, mở activity file và nhấn biểu tượng Run từ thanh công cụ.

5 Ví dụ về SubActivity trong Android Từ ví dụ trên, chúng ta kế thừa các tính năng và sẽ hiển thị grid image đã lựa chọn trong toàn màn hình. Để làm được điều này, chúng ta cần giới thiệu một Activity mới. Ghi nhớ

6 các bước chúng ta cần thực hiện cho một Activity, như chúng ta phải triển khai một lớp Activity, định nghĩa nó trong AndroidManifest.xml file, định nghĩa Layout liên quan và cuối cùng kết nối sub-activity đó với main activity. Sau đây là các bước để sửa đổi ví dụ trên: Bước Miêu tả 1 Bạn sử dụng Android Studio IDE để tạo một ứng dụng Android với tên làhelloworld dưới một package là com.example.helloworld như đã giải thích trong chương Ví dụ Hello World. 2 Tạo một lớp Activity mới có tên SingleViewActivity.java dưới một package làcom.example.helloworld 3 Tạo một layout file cho Activity mới này dưới thư mục res/layout//. Đặt tên nó là single_view.xml. 4 Định nghĩa Activity mới trongandroidmanifest.xml bởi sử dụng thẻ <activity.../>. Một ứng dụng có thể có một hoặc nhiều Activity mà không có bất cứ giới hạn nào 5 Chạy ứng dụng để chạy Android Emulator và kiểm tra kết quả các thay đổi đã thực hiện trong ứng dụng Sau đây là nội dung của Main Activity file đã được sửa đổi:src/com.example.helloworld/mainactivity.java.. package com.example.helloworld; import android.app.activity; import android.content.intent; import android.os.bundle; import android.view.menu; import android.view.view; import android.widget.adapterview; import android.widget.adapterview.onitemclicklistener; import android.widget.gridview; public class MainActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); GridView gridview = (GridView) findviewbyid(r.id.gridview); gridview.setadapter(new ImageAdapter(this)); gridview.setonitemclicklistener(new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View v, int position, long id){ // Send intent to SingleViewActivity Intent i = new Intent(getApplicationContext(), SingleViewActivity.class); // Pass image index i.putextra("id", position); startactivity(i); } }); public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.main, menu); return true; } }

7 Sau đây là nội dung của new activity filesrc/com.example.helloworld/singleviewactivity.java file package com.example.helloworld; import android.app.activity; import android.content.intent; import android.os.bundle; import android.widget.imageview; public class SingleViewActivity extends Activity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.single_view); // Get intent data Intent i = getintent(); // Selected image id int position = i.getextras().getint("id"); ImageAdapter imageadapter = new ImageAdapter(this); ImageView imageview = (ImageView) findviewbyid(r.id.singleview); imageview.setimageresource(imageadapter.mthumbids[position]); } } Sau đây là nội dung của res/layout/single_view.xml file <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/singleview" android:layout_width="fill_parent" android:layout_height="fill_parent"/> </LinearLayout> Sau đây là nội dung của AndroidManifest.xml để định nghĩa hai hằng <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="com.example.helloworld" android:versioncode="1" android:versionname="1.0" > <uses-sdk android:minsdkversion="8" android:targetsdkversion="22" /> <application android:allowbackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/apptheme" > <activity android:name="com.example.helloworld.mainactivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.main" /> <category android:name="android.intent.category.launcher" /> </intent-filter> </activity> <activity android:name=".singleviewactivity"></activity> </application> </manifest> Chạy ứng dụng Hello World! vừa sửa đổi ở trên. Giả sử bạn đã tạo AVD trong khi cài đặt. Để chạy ứng dụng từ Android Studio, mở activity file và nhấn biểu tượng Run từ thanh công cụ.

8 Bây giờ nếu bạn click chuột vào một trong các hình ảnh trên, thì nó sẽ chỉ hiển thị một hình ảnh đó. Ví dụ:

9