در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

طراحی رابط کاربری اندروید با استفاده از Xamarin

با سلام به همه دوستان و همراهان Itpro. تا قبل از این بخش مباحث اندروید به بررسی ساختار اندروید و نرم افزار Xamarin و همچنین نحوه ساخت یک مکانیز ذخیره سازی برای اندروید بود. ما تا قبل از این بخش به طور رسمی وارد برنامه نویسی اندروید نشده ایم. اما در این بخش می خواهیم به ساختن رابط کاربری (UI) بپردازیم. توضیحاتی که در این بخش ارائه خواهد شد با همان پروژه ITProApp خواهد بود.

ساختن layout مربوط به ListView


وقتی که یک پروژه می سازیم به طور پیش فرض یک Layout و activity ساخته می شود. برای این که فایل های مورد نظر خودمان را بسازیم به جای حذف فایل های گفته شده آنها را تغییر نام داده و کد های اضافی را حذف می کنیم. بنابراین مراحل زیر را دنبال کنید:

  1. فایل main.axml را در مسیر Resources//Layout را انتخاب کنید.
  2. بر روی این فایل کلیک راست کرده و با استفاده از گزینه Rename نام آن را به ITProList.axml تغییر دهید.
  3. بر روی این فایل دابل کلیک کنید و آن را باز کنید.
  4. دکمه Hello World را حذف کنید.
  5. فایل MainActivity.cs را انتخاب کرده و نام آن آن را به ITProListActivity.cs تغییر دهید.
  6. این فایل را باز کنید. در داخل این فایل یک کلاس وجود دارد که نام آن را به ItproListActivity تغییر دهید.
  7. مقدار Layout ID ارجاع شده را در قسمت SetContentView() به Resources.Layout.ITProList تغییر دهید. کد های مربوط به برنامه Hello World را حذف کنید. کلاس شما باید به شکل زیر باشد.
  8. [Activity (Label = "ITProApp", MainLauncher = true)]
    public class ItproListActivity : Activity
    {
    protected override void OnCreate (Bundle bundle)
    {
    base.OnCreate (bundle);
    SetContentView (Resource.Layout.ITProList );
    }
    }
    

حال باید یک ویجت ListView از جعبه ابزار(Toolbox) به برنامه اضافه کنیم. جعبه ابزار برنامه ویجت های مورد نیاز شما را دارد. در جعبه ابزار قسمتی هم برای جستجو وجود دارد که در صورتی که تعداد ویجت ها زیاد است می توانید از این قسمت آنها را جستجو کنید. از داخل جعبه ابزار ListView را انتخاب کرده و آن را به داخل قسمت طراحی رابط کاربری بکشید. حال اگر این ویجت را در قسمت طراحی انتخاب کنید می توانید مشخصات آن را در پنجره ی Properties ببینید. همچنین در پنجره ی Properties می توانید مشخصات و ویژگی های هر ویجت را تغییر دهید. ListView را انتخاب کرده و نام ID آن را در پنجره ی properties به itproListView تغیر دهید. در قسمت layout- view group مقادیر width و height را به match_parent تغییر دهید. این کار باعث می شود که ListView همه صفحه را بگیرد. حال به بررسی قسمت طراحی رابط کاربری می پردازیم. این پنجره از دو قسمت Content و Source ساخته شده است. در قسمت Content همه عناصری را که طراحی کرده ایم می بینید و در قسمت Source محتویات فایل xml آن را مشاهده خواهید کرد. اگر شما بخواهید که با استفاده از کد xml رابط کاربری خود را طراحی کنید می توانید در قسمت Source این کار را انجام دهید. حال به ویجت ListView برمی گردیم. پلتفرم اندروید چند layout پیش فرض برای ListView ارایه کرده است. که این Layout ها به شرح زیر می باشند.

  • SimpleListItem1 شامل یک خط و یک فیلد caption است
  • SimpleListItem2 یک layout دو خطی است که فونت آن برای فیلد اول بزرگتر و روشن تر است.
  • TwoLineListItem یک layout دو خطی با فونت مساوی برای هر دو خط است ولی متن خط اول روشن تر است.
  • ActivityListItem یک layout یک خطی با یک عکس

برای این که کنترل بیشتری روی layout ها داشته باشیم می توانیم خودمان layout های سفارشی بسازیم. که ما در پروژه خود از این نوع کنترل ها خواهیم ساخت. برای ساخت layout جدید در پنجره ی Solution به مسیر Resources//Layout بروید بر روی پوشه Layout کلیک راست کرده و گزینه Add| New File را انتخاب کنید و در پنجره ی ظاهر شده از قسمت Android گزینه Android Layout را انتخاب نمایید و برای نامه آن ItproListItem را انتخاب می کنیم سپس پنجره را تایید کنید. راه های متفاوتی برای ساختنLayout مورد نظر وجود دارد ولی ما از RelativeLayout استفاده خواهیم کرد. Layoutی که قرار است ما بسازیم شبیه دیاگرام شکل زیر است.

طراحی رابط کاربری اندروید با استفاده از Xamarin

قسمت های تشکیل دهنده ی دیاگرام بالا به شرح زیر است:

• یک گروه ویو(View group) به نام RelativeLayout در بالاترین سطح استفاده شده است که همه کنترل ها را در بر بگیرد. این گروه ویو گزینه های مختلفی در اختیار ما می گذارد.

• یک ویجت ImageView برای نمایش عکس قرار داده شده است که در سمت چپ قرار داده شده است.

• دو عدد ویجت TextView که برای نمایش نام و آدرس قرار داده شده اند که در سمت راست ویجت image قرار دارند. برای این که این ویجت های text درست در جای خود سازماندهی شوند از یک ویجت LinearLayout استفاده کرده ایم و ویجت های text را در داخل آن قرار داده ایم.

طراحی صفحه به شکل دیاگرام بالا


در گام اول طراحی دیاگرام بالا باید یک گروه ویو به نام RelativeLayout به داخل صفحه بیاوریم. برای این کار بعد از این که فایل ItproListItem.axml را ساختیم آن را باز می کنیم و با کلیک بر روی صفحه داخلی این فایل گروه ویو ی LinearLayout را انتخاب کرده و سپس آن را حذف می کنیم. برای حذف کردن بر روی آن کلیک راست کرده و Delete را انتخاب می نماییم. بعد از حذف این گروه ویو از جعبه ابزار یک گروه ویو به نام RealativeLayout انتخاب کرده و به داخل صفحه طراحی بکشید. بعد از این که این گروه ویو را به داخل صفحه اضافه کردیم باید به تنظیم آن بپردازیم. برای تنظیم کردن آن به پنجره یproperties رفته و گزینه ی Padding را 5dp قرار دهید. این گزینه مشخص می کند که چه مقدار فاصله باید از حاشیه ها داشته باشیم. همچنین گزینه Layout Height را نیز به wrapcontent و گزینه ی Layout Width را به matchparent تنظیم کنید.

در گام بعدی باید که ویجت ImageView را به صفحه اضافه کنیم. برای این کار از داخل جعبه ابزار این کنترل را به درون صفحه بکشید.و در قسمت properties مقدار id آن را به id//itproImage+@ و مقادیر طول و عرض آن را به 65dp تنظیم کنید. برای تنظیم طول و عرض از قسمت Layout مقادیر minWidth و minHeight تنظیم می شود. در قسمت Layout-Relative Layout مقدار Layout_centerVertical را برابر true قرار دهید.

افزودن یک ویجت LinearLayout


یک گروه ویو LinearLayout را برای قرار دادن مقادیر نام و آدرس در صفحه قرار می دهیم. برای این کار، یک گروه ویو (LinearLayout (vertical را از داخل جعبه ابزار به داخل صفحه قرار می دهیم. برای اضافه کردن این ویجت به صفحه باید کمی دقت کنید که این ویجت را به سمت راست ویجت عکس ببرید تا زمانی که گوشه ی آن آبی شود سپس کلیک موس را رها کنید. بعد از اضافه کردن این ویجت در قسمت Layout-Relative Layout مقدار Layout_centerVertical را برابر true قرار دهید.

افزودن کلاس های TextView مربوط به نام و آدرس


برای این کار یک کنترل TextView به داخل گروه ویو LinearLayout بکشید و وقتی که آبی شد آن را رها کنید. به پنجره ی Properties رفته و مقدار textSize آن را 25sp و مقدار Text آن را به Name قرار دهید همچنین مقدار id را به id//nameText+@ تغییر می دهیم. ویجتی که اضافه کردیم برای نمایش نام بود حال به همین صورت یک ویجت TextView دیگر به داخل LinearLayout اضافه می کنیم ولی مقدار textSize آن را 15sp قرار می دهیم که اندازه متن آن کوچکتر باشد و مقدار Text آن را به Address تنظیم می کنیم و مقدار id آن را به id//addressText+@ تغییر می دهیم.

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


برای این کار راه های متفاوتی وجود دارد که همه ی این راه ها استفاده از Adapter ها می باشد. Adapter ها کلاس هایی هستند که از کلاس BaseAdapter مشتق می شوند و یا اینترفیس IListAdapter را پیاده سازی می کنند. برای لیست های ساده می توانید از <ArrayAdapter<T استفاده کنید.

instance اشتراکی برای IITProDataService


قبل از این که یک adapter بسازیم باید بدانیم که چگونه قرار است به به سرویس داده مان دسترسی داشته باشیم. زیرا که این سرویس داده منبع ما برای ذخیره داده های Itpro می باشد. برای این کار از الگوی طراحی singleton استفاده می کنیم. که شکل آن به این صورت است.

using System.IO;
    using Android.OS;

    public class ITProData
    {
        public static readonly IITProDataService Service = new
            ItproJsonService(Path.Combine(Environment.ExternalStorageDirectory.Path,"ITProApp"));
    }

توجه داشته باشید که ما در این برنامه از کلاس Android.OS.Environment استفاده کرده ایم. این کلاس به این منظور استفاده می شود که دایرکتوری مربوط به کارت حافظه موبایل شما را پیدا کنیم. دلیل استفاده از این دایرکتوری این است که اطلاعات ما از بین نمی رود و فقط وقتی برنامه را از روی دستگاه uninstall بکنیم این اطلاعات حذف خواهند شد. همچنین دیگر برنامه ها نیز به راحتی می توانند از این برنامه ها استفاده نمایند.

مجوزها Permissions


برنامه های اندرویدی باید یک سری مجوزها داشته باشند تا بتوانند اعمال خاصی را انجام دهند. یکی از این اعمال نوشتن در حافظه خارجی دستگاه است. شما باید این مجوز ها را در فایل AndroidManifest.xml به برنامه بدهید. مجوزها هنگام نصب برنامه به کاربر نشان داده می شوند. برای دادن این مجوزها به برنامه باید این گونه عمل کنیم که اگر از برنامه ویژوال استودیو برای برنامه نویسی استفاده می کنید بر روی نام پروژه کلیک راست کرده و از منوی ظاهر شده properties را انتخاب می کنیم و از قسمت Android manifest در قسمت required permissions مجوز های مورد نظر را تیک بزنید با این کار مجوز های مورد نظر به فایل AndroidManifest.xml اضافه خواهد شد. اما اگر برای برنامه نویسی از xamarin studio استفاده می کنید بر روی نام پروژه کلیک راست کرده و گزینه options را انتخاب کرده و در قسمت Android Application از قسمت Required permissions مجوز های مورد نظر خود را انتخاب کنید.

ساخت ITProListViewAdapter


برای ساخت این adapter سفارشی اینگونه عمل می کنیم:

یک کلاس به برنامه اضافه می کنیم و نام آن را ITProListViewAdapter قرار می دهیم و کلاس را public معرفی می کنیم و همچنین این کلاس باید از کلاس <BaseAdapter<ITProEntity ارث بری داشته باشد. با این کار adapter ما ساخته می شود. حال باید constructor را تعریف کنیم.

پیاده سازی Constructor


وقتی که یک نمونه از این کلاس ساخته می شود برای این که ملزومات اجرای این کلاس فراهم شود باید در زمان ساخته شدن نمونه از این کلاس این ملزومات را به کلاس داده برای این کاراز constructor کلاس استفاده می کنیم. ما برای اجرا به یک activity نیاز داریم که یک activity در داخل کلاس معرفی می کنیم و در داخل constructor آن را مقداردهی می کنیم. که کد آن به شکل زیر خواهد بود

private readonly Activity _context;

        public ITProListViewAdapter(Activity context)
        {
            _context = context;
        }

پیاده سازی سایر قسمت های کلاس adapter


قسمت هایی که در این کلاس وجود دارد و باید آن ها را پیاده سازی کنیم چند عدد تابع و property هستند. که به توضیح آنها می پردازیم:

  • Count با استفاده از این مشخصه می توان تعداد داده ها را پیدا کرد که پیاده سازی این مشخصه بر عهده برنامه نویس، یعنی شما می باشد. برای پیاده سازی این مشخصه باید تعداد entity های موجود را اعلام کنیم.
  • GetItemId: این تابع یک مقدار عددی که همان محل قرار گیری یک entity است را می گیرد و مقدار id آن را برمی گرداند.
  • پیاده سازی getter مربوط به اندیس: این کلاس می تواند اندیس محل قرار گیری یک entity را گرفته و خود آن entity را برگرداند. برای این کار باید قسمت get مربوط به مشخصه این کلاس را پیاده سازی نماییم. که پیاده سازی این قسمت به این شکل خواهد بود.

public override ITProEntity this[int position]
        {
            get { return ITProData.Service.ITPros[position]; }
        }

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

public class ITProListViewAdapter : BaseAdapter<ITProEntity>
    {
        private readonly Activity _context;

        public ITProListViewAdapter(Activity context)
        {
            _context = context;
        }

        public override int Count
        {
            get { return ITProData.Service.ITPros.Count; }
        }

        public override ITProEntity this[int position]
        {
            get { return ITProData.Service.ITPros[position]; }
        }

        public override long GetItemId(int position)
        {
            return ITProData.Service.ITPros[position].Id.Value;
        }
    }

پیاده سازی ()GetView


از داخل همه متدهایی که باید برای adapter پیاده سازی شوند، پیاده سازی همه آنها توضیح داده شد و فقط متد GetView باقی مانده است. این متد یک View را برمی گرداند که کلاس Adapter از آن به عنوان یک سطر استفاده می نماید برای نمایش entityهای موجود. ما برای ساخت این ویو از همان ویویی که فایل layout آن را ساخته ایم یعنی ItproListItem استفاده می کنیم و از آن یک ویو می سازیم. اگر بخواهیم به ازای هر entity که داریم یک ویو بسازیم کارایی برنامه پایین خواهد آمد. به همین منظور خود کلاس adapter در متد GetView دارای یک پارامتر ورودی است که convertView نام دارد و این همان ویویی است که بار اول مورد استفاده قرار گرفته شده است. ما در داخل متد GetView باید مقادیر ویجت هایی را که برروی ویو خود قرار داده ایم نیز مشخص می کنیم. به همین منظور باید با استفاده از تابع FindViewById تک تک ویجت ها را لود کرده و مقدار آن ها را مشخص کنیم. همچنین در برنامه ما ممکن است که فیلد آدرس دارای هیچ مقداری نباشد در این صورت نباید نشان داده شود. برای این کار ما خصوصیت visibility مربوط به این ویو را برابر با gone قرار می دهیم. لازم به ذکر است که مقادیری که ممکن است به خصوصیت visibility بدهیم شامل Gone, visibel, invisible می باشد که اگر ما مقدار visible را قرار دهیم ویو به صورت عادی دیده خواهد شد. اما در هر دو صورت invisible و Gone ویو نشان داده نمی شود. تفاوت این دو مقدار در این است که اگر یک ویو invisible باشد جایی را که برای آن در صفحه در نظر گرفته بودیم باقی می ماند ولی در صورتی که Gone ار انتخاب کرده باشیم اینگونه نیست. در نهایت متد GetView به شکل زیر در کلاس ITProListViewAdapter پیاده سازی می شود.

public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var view = convertView;
            if (view == null)
                view = _context.LayoutInflater.Inflate(Resource.Layout.ItproListItem, null);
            var entity = ITProData.Service.ITPros[position];
			view.FindViewById<TextView> (Resource.Id.nameText).Text=entity.Name;
            if(string.IsNullOrEmpty(entity.Address))
                view.FindViewById<TextView>(Resource.Id.addressText).Visibility=ViewStates.Gone;
            else
            view.FindViewById<TextView>(Resource.Id.addressText).Text = entity.Address;
            return view;
        }

این تابع به ازای هر enitity صدا زده می شود و مقادیر مربوط به آن را که با اندیس position شناخته می شود را پر می کند.

استفاده از ITProListViewAdapter برای نمایش اطلاعات


آخرین قدمی که برای استفاده از adapter در برنامه باید برداشته شود این است که از آن برای ListView استفاده شود. برای این کار در فایل ITProListActivity دو متغیر زیر را تعریف می کنیم.

ListView _poiListView;
POIListViewAdapter _adapter;

حال در متد OnCreate باید یک نمونه از ITProListViewAdapter بسازیم و آن را به Listview متصل کنیم برای این کار تابع OnCreate را به این شکل می نویسیم.

 protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);

           
            SetContentView(Resource.Layout.ITProList);
            _itproListView = FindViewById<ListView>(Resource.Id.itproListView);
            _adapter=new ITProListViewAdapter(this);
            _itproListView.Adapter = _adapter;
           
        }

تا اینجای کار ما توانستیم که برنامه ای برای نمایش اطلاعات از داخل فایل های ذخیره شده در کارت حافظه را نوشتیم. می توانید این برنامه را با استفاده از دستگاه های واقعی و یا شبیه ساز اجرا کنید. باید دقت داشته باشید که اگر برنامه را با شبیه ساز اجرا می کنید باید مقداری برای حجم کارت حافظه در نظر گرفته باشید. شما وقتی برنامه را اجرا می کنید به دلیل این که هنوز اطلاعاتی در داخل حافظه شما برای نمایش نیست هیچ آیتمی را در صفحه نخواهید دید :D در قسمت های آینده به شما خواهیم گفت که چگونه این اطلاعات را وارد کنید و نمایش دهید. Itpro باشید

نویسنده: مهدی عادلی فر

منبع: انجمن تخصصی فناوری اطلاعات ایران

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد.

#آموزش_اندروید #آموزش_گام_به_گام_اندروید #طراحی_ui_برای_اندروید #ویوها_در_اندروید #adapter_ها_در_اندروید
عنوان
1 معرفی سیستم عامل اندروید رایگان
2 معرفی سیستم عامل اندروید (بخش دوم) رایگان
3 معرفی سیستم عامل اندروید (بخش سوم) رایگان
4 معرفی Xamarin.Android برای نوشتن برنامه های اندروید به زبان #C رایگان
5 شروع کار برنامه نویسی اندروید با استفاده از Xamarin رایگان
6 ساخت مکانیزم ذخیره سازی اطلاعات در اندروید به زبان #C رایگان
7 طراحی رابط کاربری اندروید با استفاده از Xamarin رایگان
8 ساخت منو صفحه اصلی در اندروید رایگان
9 نمایش اطلاعات یک Entity در برنامه اندروید(Xamarin) رایگان
10 نوشتن Save و Delete برای برنامه اندروید در Xamarin رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....