Xamarin - Android 檢視

ListView

ListView 是一種使用者介面元素，用於顯示可滾動的專案列表。

將資料繫結到 ListView

在這個例子中，您將建立一個顯示一週中日期的 ListView。首先，讓我們建立一個新的 XML 檔案並將其命名為 **listViewTemplate.xml**。

在 **listViewTemplate.xml** 中，我們新增一個新的 TextView，如下所示。

<?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**，並在線性佈局內建立一個新的 ListView。

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

開啟 **MainActivity.cs**，並鍵入以下程式碼將資料繫結到我們建立的 ListView。程式碼必須寫入 **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[]** 簡單地將我們的專案作為陣列儲存。

陣列介面卡將我們集合中的專案作為檢視返回。預設情況下，陣列介面卡使用預設的 TextView 來顯示每個專案。在上面的程式碼中，我們在 **ListViewTemplate.xml** 中建立了自己的 TextView，並使用下面顯示的建構函式引用它。

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

最後，構建並執行您的應用程式以檢視輸出。

GridView

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(); 
};

以上程式碼在 **main.axml** 中查詢 GridView 並將其繫結到 **imageAdapter** 類。**Gridview.ItemClick** 建立了一個 **onClick** 事件，當用戶點選影像時，該事件會返回所選影像的位置。

現在，構建並執行您的應用程式以檢視輸出。

列印頁面