Xamarin - มุมมอง Andriod

ListViews

Listview เป็นอิลิเมนต์ส่วนติดต่อผู้ใช้ที่แสดงรายการของรายการที่เลื่อนได้

การเชื่อมโยงข้อมูลกับมุมมองรายการ

ในตัวอย่างนี้คุณจะสร้าง listView ที่แสดงวันในสัปดาห์ เริ่มต้นด้วยการให้เราสร้างไฟล์ XML ใหม่และตั้งชื่อlistViewTemplate.xml.

ใน listViewTemplate.xmlเราเพิ่มมุมมองข้อความใหม่ตามที่แสดงด้านล่าง

<?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"/>

จากนั้นไปที่ Main.axml และสร้างมุมมองรายการใหม่ภายใน Linear Layout

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

เปิด MainActivity.csและพิมพ์รหัสต่อไปนี้เพื่อผูกข้อมูลกับมุมมองรายการที่เราสร้างขึ้น ต้องเขียนโค้ดไว้ในไฟล์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[] เพียงแค่ถือรายการของเราเป็นอาร์เรย์

Array Adapter ส่งคืนรายการในคอลเลกชันของเราเป็นมุมมอง ตามค่าเริ่มต้น Array Adapter ใช้ textView เริ่มต้นเพื่อแสดงแต่ละรายการ ในโค้ดด้านบนเราได้สร้าง textview ของเราเองในListViewTemplate.xml และอ้างอิงโดยใช้ตัวสร้างที่แสดงด้านล่าง

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

สุดท้ายสร้างและเรียกใช้แอปพลิเคชันของคุณเพื่อดูผลลัพธ์

GridViews

gridView คือกลุ่มมุมมองที่อนุญาตให้แอปพลิเคชันจัดเค้าโครงเนื้อหาในรูปแบบสองมิติกริดที่เลื่อนได้

ในการเพิ่ม GridView ให้สร้างโปรเจ็กต์ใหม่และเรียกมัน gridViewApp. ไปที่Main.axml และเพิ่มเส้นตารางตามที่แสดงด้านล่าง

<?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" />

จากนั้นสร้างคลาสใหม่และตั้งชื่อ ImageAdpter.cs. คลาสนี้จะมีคลาสอะแด็ปเตอร์สำหรับไอเท็มทั้งหมดซึ่งจะแสดงในตาราง

ข้างใน ImageAdapterเพิ่มรหัสต่อไปนี้ -

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, 
   }; 
}

ในโค้ดด้านบนเราได้ผูกภาพรถของเราเข้ากับอะแดปเตอร์ภาพ ถัดไปเปิดMainActivity.cs และเพิ่มรหัสต่อไปนี้หลัง 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(); 
};

โค้ดด้านบนค้นหา gridView ใน main.axml และผูกเข้ากับไฟล์ imageAdapter ชั้นเรียน Gridview.ItemClick สร้างไฟล์ onClick เหตุการณ์ที่ส่งคืนตำแหน่งของรูปภาพที่เลือกเมื่อผู้ใช้คลิกที่รูปภาพ

ตอนนี้สร้างและเรียกใช้แอปพลิเคชันของคุณเพื่อดูผลลัพธ์