بررسی انواع ویو View ها در اندروید زامارین با مثال

انواع View ها در اندروید

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 جدید در داخل چیدمان خطی (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 را باز کرده و کد زیر را در آن تایپ کنیم تا داده ها را به 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 ، به سادگی آیتم های ما را به صورت آرایه نگه می دارد.

آداپتور آرایه (Array Adapter) ، آیتم های موجود در مجموعه ما را به عنوان یک view باز می گرداند. به طور پیش فرض ، آداپتور آرایه از یک textView پیش فرض برای نمایش دادن هر آیتم استفاده می کند. در کد فوق ، ما textview خودمان را در فایل ListViewTemplate.xml ایجاد کردیم و آن را با استفاده از سازنده نشان داده شده در زیر ، مورد ارجاع قرار دادیم.

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

در نهایت ، برنامه خود را برای مشاهده خروجی ساخته و run می کنیم.

GridView ها

gridView ، یک view گروهی است که به اپلیکیشن اجازه می دهد تا محتوا را در یک ساختار دو بعدی، به صورت یک grid قابل پیمایش ، ارائه دهد.

برای افزودن یک GridView ، یک پروژه جدید ایجاد کرده و آن را gridViewApp می نامیم. به فایل Main.axml می رویم و یک grid را به صورتی که در کد زیر آمده است ، اضافه می کنیم.

<?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 قرار می دهیم. این کلاس حاوی کلاس های آداپتور برای تمام آیتم ها است که در grid نشان داده خواهد شد.

در داخل 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 ایجاد می کند. هنگامی که کاربری بر روی یک تصویر کلیک می کند ، این رویداد موقعیت تصویر انتخاب شده را باز می گرداند.

اکنون ، اپلیکیشن خود را برای مشاهده خروجی ساخته و run می کنیم.