آموزش Andriod Views در برنامه نویسی زامارین

3 سال پیش

آموزش Andriod Views در برنامه نویسی زامارین

در این درس از آموزش های برنامه نویسی سایت سورس باران، با آموزش Andriod Views در برنامه نویسی زامارین در خدمت شما هستیم.

ListViews

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 بروید و لیست جدیدی را در داخل 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 به سادگی موارد ما را به عنوان یک آرایه نگه می دارد.

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

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

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

ListView App

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

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

GridView

منبع.

لیست جلسات قبل آموزش برنامه نویسی زامارین

نویسنده مطلب erfan molaei

آموزش Andriod Views در برنامه نویسی زامارین

آموزش Andriod Views در برنامه نویسی زامارین

ListViews

اتصال داده ها به فهرست ها

GridViews

لیست جلسات قبل آموزش برنامه نویسی زامارین

دیدگاه شما

بدون دیدگاه

آموزش Andriod Views در برنامه نویسی زامارین

ListViews

اتصال داده ها به فهرست ها

GridViews

لیست جلسات قبل آموزش برنامه نویسی زامارین

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه