قبل از شروع به طراحی UI باید کمی با واحدهای اندازه گیری در اندروید آشنا شویم. بدانید و آگاه باشید که استفاده از واحد Pixel برای تعیین اندازه در اندروید کار بسیار اشتباهی است. طراح همیشه باید Density یا تراکم صفحهی نمایش را در نظر بگیرد. تراکم صفحهی نمایش به معنای تعداد پیکسل موجود در یک اینچ میباشد. اندازهی 100 پیکسل در دستگاههای مختلف با (dpi(Dot Per Inchهای متفاوت به یک اندازه نیست.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/MyButton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/Hello" /> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:background="#fff" android:id="@+id/NameListView" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); SetContentView(Resource.Layout.Main); List<string> namesList = new List<string> { "Mohammad","Fatemeh","Ali","Hasan","Husein","Mohsen","Mahdi", }; var namesAdapter = new ArrayAdapter<string> (this, Android.Resource.Layout.SimpleListItem1, namesList); var listview = FindViewById<ListView>(Resource.Id.NameListView); listview.Adapter = namesAdapter; }
ListView کنترل بسیار منعطفی میباشد. برخی ویژگیها آن را در زیر میتوانید مشاهده بفرمایید:
- android:dividerHeight // ارتفاع جداکنندهی سطرها
- android:divider // رنگ جداکنندهی سطرها
- android:layoutAnimation // انیمیشن برای layoutها
- android:background // رنگ ضمینه را مشخص میکند. البته میتوانید یک style را به ان نسبت دهید
خوب؛ حالا بیایید یک ListView را با ظاهر و Adapter سفارشی بسازیم.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="14dp"> <TextView android:text="" android:gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/idTextView" /> <TextView android:text="" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/nameTextView" android:layout_marginLeft="14dp" /> </LinearLayout>
namespace DotSystem.ir.App1.Model { public class Person { public int Id { get; set; } public string PersonName { get; set; } }
namespace DotSystem.ir.App1.Adapters { public class PersonAdapter : BaseAdapter<Model.Person> { public override Person this[int position] { get { throw new NotImplementedException(); } } public override int Count { get { throw new NotImplementedException(); } } public override long GetItemId(int position) { throw new NotImplementedException(); } public override View GetView(int position, View convertView, ViewGroup parent) { throw new NotImplementedException(); } } }
در اینجا ما به چند فیلد داخل کلاس احتیاج داریم.
- لیست اطلاعات مورد نظر.
- Activity جاری که Adapter را استفاده میکند.
namespace DotSystem.ir.App1.Adapters { public class PersonAdapter : BaseAdapter<Person> { protected Activity _activity = null; protected List<Person> _list = null; public PersonAdapter(Activity activity, List<Person> list) { _activity = activity; _list = list; } public override Person this[int position] { get { return _list[position]; } } public override int Count { get { return _list.Count; } } public override long GetItemId(int position) { return _list[position].Id; } public override View GetView(int position, View convertView, ViewGroup parent) { throw new NotImplementedException(); } } }
public override View GetView(int position, View convertView, ViewGroup parent) { if (convertView == null) convertView = _activity.LayoutInflater .Inflate(Resource.Layout.PersonListViewItemLayout, parent, false); var idTextView = convertView.FindViewById<TextView>(Resource.Id.idTextView); var nameTextView = convertView.FindViewById<TextView>(Resource.Id.NameListView); var persion = _list[position]; idTextView.Text = persion.Id.ToString(); nameTextView.Text = persion.PersonName; return convertView; }
protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); SetContentView(Resource.Layout.Main); List<Model.Person> personList = new List<Model.Person> { new Model.Person() {Id = 1, PersonName = "Mohammad", }, new Model.Person() {Id = 2, PersonName = "Ali", }, new Model.Person() {Id = 3, PersonName = "Fatemeh", }, new Model.Person() {Id = 4, PersonName = "hasan", }, new Model.Person() {Id = 5, PersonName = "Husein", }, new Model.Person() {Id = 6, PersonName = "Mohsen", }, new Model.Person() {Id = 14, PersonName = "Mahdi", }, }; var personAdapter = new Adapters.PersonAdapter(this, personList); var listview = FindViewById<ListView>(Resource.Id.NameListView); listview.Adapter = personAdapter; }