Học lập trình Xamarin – Android View trong Xamarin

Các ListView

Listview là thành phần giao diện người dùng hiển thị danh sách các mục có thể cuộn.

Liên kết dữ liệu đến các listview

Trong ví dụ này, bạn sẽ tạo một listView hiển thị các ngày trong tuần. Để bắt đầu, chúng ta hãy tạo một tệp XML mới và đặt tên là listViewTemplate.xml.

Trong listViewTemplate.xml, chúng ta thêm một textview mới như được hiển thị bên dưới.

<?xml version = "1.0" encoding = "utf-8" ?> 
<TextView xmlns:android = "http://schemas.android.com/apk/res/android" 
android:id = "@+id/textItem"  
android:textSize ="20sp" 
android:layout_width = "fill_parent"  
android:layout_height = "wrap_content"/>

Tiếp theo, đi đến Main.axml và tạo một listview mới bên trong Linear Layout (Bố cục tuyến tính).

<ListView 
   android:minWidth="25px" 
   android:minHeight="25px" 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:id="@+id/listView1" />

Mở MainActivity.cs và nhập code sau đây để liên kết dữ liệu với listview mà chúng ta đã tạo. Code phải được viết bên trong phương thức OnCreate () .

SetContentView(Resource.Layout.Main); 
var listView = FindViewById<ListView>(Resource.Id.listView1); 
var data = new string[] { 
   "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" 
}; 
listView.Adapter = new ArrayAdapter(this, Resource.Layout.ListViewTemplate, data);

Var data = new string [] chỉ đơn giản giữ các mục của chúng ta dưới dạng một mảng.

Array Adapter trả về các mục trong bộ sưu tập của chúng ta dưới dạng một view. Theo mặc định, Array Adapter sử dụng textView mặc định để hiển thị từng mục. Trong đoạn code trên, chúng ta đã tạo ra textview của riêng mình trong ListViewTemplate.xml và tham chiếu nó bằng cách sử dụng hàm tạo được hiển thị bên dưới.

ArrayAdapter(this, Resource.Layout.ListViewTemplate, data); 

Cuối cùng, biên dịch và chạy ứng dụng của bạn để xem đầu ra.

Ứng dụng ListView

Các GridView (chế độ xem lưới)

GridView là một nhóm khung nhìn cho phép các ứng dụng bố trí nội dung theo cách hai chiều, lưới có thể cuộn.

Để thêm một GridView, tạo một dự án mới và gọi nó là gridViewApp. Tới Main.axml và thêm một mạng lưới như hình dưới đây.

<?xml version = "1.0" encoding="utf-8"?> 
<GridView xmlns:android = "http://schemas.android.com/apk/res/android" 
   android:id = "@+id/gridview" 
   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" />

Tiếp theo, tạo một lớp mới và đặt tên là ImageAdpter.cs . Lớp này sẽ chứa các lớp adapter cho tất cả các mục sẽ được hiển thị trong lưới.

Bên trong ImageAdapter, thêm code sau –

public class ImageAdapter : BaseAdapter { 
   Context context; 
   public ImageAdapter(Context ch) {  
      context = ch; 
   } 
      
   public override int Count { 
      get { 
         return cars.Length; 
      } 
   } 
      
   public override long GetItemId(int position) { 
   return 0; 
   } 
      
   public override Java.Lang.Object GetItem(int position) { 
      return null; 
   } 
      
   public override View GetView(int position, 
      View convertView, ViewGroup parent) { 
      ImageView imageView; 
      if (convertView == null) {   
         imageView = new ImageView(context); 
         imageView.LayoutParameters = new GridView.LayoutParams(100, 100); 
         imageView.SetScaleType(ImageView.ScaleType.CenterCrop); 
         imageView.SetPadding(8, 8, 8, 8); 
      } else { 
         imageView = (ImageView)convertView; 
      } 
             
      imageView.SetImageResource(cars[position]); 
      return imageView; 
   } 
   
   int[] cars = { 
      Resource.Drawable.img1, Resource.Drawable.img2, 
      Resource.Drawable.img3, Resource.Drawable.img4, 
      Resource.Drawable.img5, Resource.Drawable.img6, 
   }; 
}

Trong đoạn code trên, chúng ta chỉ đơn giản là gắn hình ảnh chiếc xe của mình vào các image adapter. Tiếp theo, mở MainActivity.cs và thêm đoạn code sau sau setContentView () .

var gridview = FindViewById<GridView>(Resource.Id.gridview); 
gridview.Adapter = new ImageAdapter(this); 
gridview.ItemClick += delegate(object sender, 
   AdapterView.ItemClickEventArgs args) { 
      Toast.MakeText(this, 
         args.Position.ToString(), ToastLength.Short).Show(); 
};

Đoạn code trên tìm thấy GridView trong main.axml và liên kết nó với lớp imageAdapteGridview.ItemClick tạo sự kiện onClick trả về vị trí của hình ảnh được chọn khi người dùng nhấp vào hình ảnh.

Bây giờ, biên dịch và chạy ứng dụng của bạn để xem đầu ra.

Chế độ hiển thị theo ô

 

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *