با حمایت ما%۵
تخفیف بگیرد

logo-samandehi

برنامه نويسي اندرويد 7- پروژه « تبدیل واحد » - ساخت UI

مقدمه:

تا بحال به فراگرفتن ملزومات جاوا و شیء گرایی مشغول بودیم، از آنجایی که برنامه نویسی Android بسیار وابسته به مباحث پیش بود، هم اکنون می توانیم بگوییم برای شروع برنامه اندروید آمادگی داریم ( البته اگر تمرین کافی داشته باشیم ).

در این قسمت و قسمت بعد یک پروژه بسیار کوچک اما کاربردی را خواهیم ساخت و با استفاده از یک پروژه واقعی و عملی خواهیم آموخت که چگونه:

♦ برای فرمها UI های مناسب و مجزا بسیازیم

♦ چگونه فرمهای مختلف را به یکدیگر متصل کنیم

♦ چگونه از click listener ها استفاده کنیم و همینطور مقادیر edit box ها را بخوانیم

♦ چگونه از string به number و بالعکس جهت انجام محاسبات و بکارگیری UI استفاده کنیم.

♦ چگونه یک برنامه stable و تمیز از نظر کد داشته باشیم

♦ کمی بیشتر در مورد manifest ها بدانیم

فعلاً در این قسمت از آموزش بر ساخت User Interface - UI * متمرکز هستیم. 

 

تصویر متحرک پروژه نهایی:

 

 

 

 

 

 

 

آموزش:

» یک پروژه جدید را ایجاد و در آن ادامه خواهیم دارد به این منظور با توجه به آموزشهای گذشته پروژه ای به نام UnitConverter ایجاد نمایید و نام package آنرا com.uncocoder.course.project.unitconverter قرار دهید. همچنین از ورژن 2.1 اندروید یا همان API Version 7 استفاده کنید.

همانطور که می بینید در بدو پیدایش پروژه یک کلاس به نام UnitConverterActivity و یک فایل به نام main.xml ( که در res\layout ) است پدید آمده. از آنجاییکه می خواهیم خودکفا باشیم و به کارهایی اتوماتیک کمتر توجه کنیم، این دو فایل را حذف می کنیم و خودمان یک نمونه می سازیم:

» از package اصلی برنامه فایل ( کلاس ) UnitConverterActivity را حذف کنید ( بله با استفاده از Del روی کیبورد )

» از دایرکتوری res\layout فایل main.xml را حذف کنید.

» از فایل manifest خطوط ما بین را ( به علاوه خود این خطوط ) حذف کنید. بنابراین در این شرایط در تگ application فقط دو سطر خواهید داشت.

حالا می خواهیم منوی اصلی برنامه را طراحی کنیم. برای سادگی کار شما ابتدا نحوه مکتوب کردن خصوصیات UI را با استفاده از XML خواهیم آموخت. سپس برای اینکه نشان دهیم یک UI با چه خصوصیاتی باید ساخته شود، فقط کد XML آنرا خواهیم نوشت و از روی آن شما خواهید توانست به دلخواه خود UI را دی XML بسازید یا از Visual UI Editor برای ساخت آن استفاده کنید.

کلیت یک فایل XML و ارتباط آن با Android UI :

با توجه به کد زیر:


  1.    
  2.         AttributeName1=AttributeValue1
  3.         AttributeName2=AttributeValue2 />;
  4.  
  5.     
  6.         AttributeName3=AttributeValue3
  7.         AttributeName4=AttributeValue4 >
  8.             Content
  9.     

 

عبارت بعد از نماد > ، Tag نام دارد. مقادیر ما بین باز شدن تگ تا بسته شدن آن با نماد < ، Attribute نام دارند که به همراه مقادیرشان نوشته می شوند. ممکن است یک Tag دارای Content باشد، در اینصورت Attribute های آنرا با استفاده از نماد < به پایان می رسانیم و سپس Content آنرا می نویسیم و بعد از نماد /> برای بستن کل Tag استفاده می کنیم. همانطور که در TagName2 می بینید. در صورتیکه Content مورد نیاز نباشد می توانیم مستقیماً با استفاده از نماد /> پس از ذکر Attribute ها، Tag را ببنیدم. در صورتیکه در مورد ساختار XML به اطلاعات بیشتری نیاز دارید از لینک * مطالعه بفرمائید.

خوب حالا به ساختار یک فایل XML ـی که برای Android UI نوشته شده توجه کنید.


  1.     android:layout_width="fill_parent"
  2.     android:layout_height="fill_parent"
  3.     android:orientation="vertical" >
  4.  
  5.     
  6.         android:id="@+id/btn_about"
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"
  9.         android:layout_alignParentBottom="true"
  10.         android:layout_centerHorizontal="true"
  11.         android:layout_marginBottom="20dip"
  12.         android:text="About"
  13.         android:width="150dip" />
  14.  

 

خط 1: بسیار مهم و کلیشه ایست و تعریف XML را تعیین می کند.

خط 2: یک کلاس RelativeLayout مورد درخواست است که در برگیرنده سایر کنترلها خواهد بود، در این خط با استفاده از xmlns یک namespace تعریف شده که آنهم کلیشه ای اما بسیار مهم است و نبود آن باعث اجرا نشدن UI شما می شود.

خط 3: Attribute های مرتبط با کلاس RelativeLayout مقداردهی می شود، تعداد آنها می تواند بسیار زیاد باشد و هر کدام که نوشته نشوند، مقدار پیش فرض را خواهند گرفت. نام Attribute خط 3 ، layout_width است که در android namespace قرار گرفته است، از این پس آنرا فقط layout_width صدا خواهیم کرد.

خط 7: به عنوان Content مربوط به RelativeLayout سایر کنترل های UI قرار می گیرند که خود می توانند ( بسته به ماهیتشان ) در برگیرنده کنترلهای دیگری باشند. بطور مثال Button نمی تواند کنترل دیگری را در برگیرد اما LinearLayout می تواند.

خط 17: Tag مربوط به RelativeLayout را می بندیم تا Structure صحیح XML حفظ شود.

به همین ترتیب یک XML Structure می تواند ارائه دهنده یک UI باشد. برای روشن شدن بیشتر مطلب آنرا به یک Outline تشبیه خواهم کرد. به کد زیر توجه کنید، این کد همان کدی است که برای فرم form_distance طراحی شده است، تصویر آنرا هم در پایین خواهید دید.

 

» بر روی res\layout راست کلیک کرده و انتخاب کنید New->Other

» Android XML Layout File را انتخاب کنید

» LinearLayout را انتخاب کرده و در قسمت نام بنویسید: form_distance

» با گزینه های Next و Finish به کار خاتمه داده و در اینحالت باید فایلی به نام form_distance در res\layout داشته باشید، همینطور پنجره ای برای ویرایش UI باز خواهد شد.

» در پنجره طراحی UI باز شده از پایین پنل form_distance.xml را انتخاب کنید و محتوای آنرا با محتوای زیر عوض کنید.

 

با فرآیند فوق خواهیم گفت ساخت یک UI به نام form_distance. و از این پس آنرا به اختصار اینگونه بیان خواهیم کرد.

 

کد مربوط به form_distance.xml :


  1.     android:layout_width="fill_parent"
  2.     android:layout_height="fill_parent"
  3.     android:orientation="vertical" >
  4.  
  5.     
  6.         android:id="@+id/btn_return"
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"
  9.         android:layout_alignParentBottom="true"
  10.         android:layout_centerHorizontal="true"
  11.         android:layout_marginBottom="20dip"
  12.         android:text="Return"
  13.         android:width="150dip" />
  14.  
  15.     
  16.         android:id="@+id/txt_title"
  17.         android:layout_width="fill_parent"
  18.         android:layout_height="wrap_content"
  19.         android:layout_marginTop="10dip"
  20.         android:gravity="center_horizontal"
  21.         android:text="Distance Converter"
  22.         android:textColor="#ffff00"
  23.         android:textSize="20dip" />
  24.  
  25.     
  26.         android:layout_width="fill_parent"
  27.         android:layout_height="wrap_content"
  28.         android:layout_below="@+id/txt_title"
  29.         android:layout_marginTop="10dip"
  30.         android:orientation="vertical" >
  31.  
  32.         
  33.             android:id="@+id/panel_meter"
  34.             android:layout_width="fill_parent"
  35.             android:layout_height="wrap_content"
  36.             android:paddingBottom="2dip"
  37.             android:paddingLeft="10dip"
  38.             android:paddingRight="10dip"
  39.             android:paddingTop="2dip" >
  40.  
  41.             
  42.                 android:layout_width="0dip"
  43.                 android:layout_height="wrap_content"
  44.                 android:layout_weight="0.3"
  45.                 android:text="Meter"
  46.                 android:textColor="#ffffff"
  47.                 android:textSize="18dip" />
  48.  
  49.             
  50.                 android:id="@+id/edt_meter"
  51.                 android:layout_width="0dip"
  52.                 android:layout_height="wrap_content"
  53.                 android:layout_weight="0.7"
  54.                 android:inputType="numberDecimal" />
  55.         
  56.  
  57.         
  58.             android:id="@+id/panel_centimeter"
  59.             android:layout_width="fill_parent"
  60.             android:layout_height="wrap_content"
  61.             android:paddingBottom="2dip"
  62.             android:paddingLeft="10dip"
  63.             android:paddingRight="10dip"
  64.             android:paddingTop="2dip" >
  65.  
  66.             
  67.                 android:layout_width="0dip"
  68.                 android:layout_height="wrap_content"
  69.                 android:layout_weight="0.3"
  70.                 android:text="Centimeter"
  71.                 android:textColor="#ffffff"
  72.                 android:textSize="18dip" />
  73.  
  74.             
  75.                 android:id="@+id/edt_centimeter"
  76.                 android:layout_width="0dip"
  77.                 android:layout_height="wrap_content"
  78.                 android:layout_weight="0.7"
  79.                 android:inputType="numberDecimal" />
  80.         
  81.  
  82.         
  83.             android:id="@+id/panel_inch"
  84.             android:layout_width="fill_parent"
  85.             android:layout_height="wrap_content"
  86.             android:paddingBottom="2dip"
  87.             android:paddingLeft="10dip"
  88.             android:paddingRight="10dip"
  89.             android:paddingTop="2dip" >
  90.  
  91.             
  92.                 android:layout_width="0dip"
  93.                 android:layout_height="wrap_content"
  94.                 android:layout_weight="0.3"
  95.                 android:text="Inch"
  96.                 android:textColor="#ffffff"
  97.                 android:textSize="18dip" />
  98.  
  99.             
  100.                 android:id="@+id/edt_inch"
  101.                 android:layout_width="0dip"
  102.                 android:layout_height="wrap_content"
  103.                 android:layout_weight="0.7"
  104.                 android:inputType="numberDecimal" />
  105.         
  106.  
  107.         
  108.             android:layout_width="fill_parent"
  109.             android:layout_height="wrap_content"
  110.             android:layout_marginTop="15dip"
  111.             android:paddingBottom="2dip"
  112.             android:paddingLeft="10dip"
  113.             android:paddingRight="10dip"
  114.             android:paddingTop="2dip" >
  115.  
  116.             
  117.                 android:id="@+id/btn_reset"
  118.                 android:layout_width="0dip"
  119.                 android:layout_height="wrap_content"
  120.                 android:layout_weight="0.5"
  121.                 android:text="Reset" />
  122.  
  123.             
  124.                 android:id="@+id/btn_convert"
  125.                 android:layout_width="0dip"
  126.                 android:layout_height="wrap_content"
  127.                 android:layout_weight="0.5"
  128.                 android:text="Convert" />
  129.         
  130.     
  131.  

به خودتان فرصتی دهید و کد بالا را با این تصویر و ساختار تطبیق دهید.

 

 

پس اگر خوب توانسته باشید، کد بالا را با Outline بالا تطبیق دهید الان باید به راحتی ارتباط XML , Android UI را درک کرده باشید. از این پس نباید در تعریف یک UI با استفاده از XML مشکلی وجود داشته باشد و فقط مهم این است که بدانید چه کنترلی چه کار می کند و چه خاصیتهایی چه اثری بر آن کنترل می گذارند. برای فهمیدن این دو مورد به تدریج پیش خواهیم رفت اما مقدمات آنرا در همین قسمت می گوییم.

 

چند قائده کلامی:

♦ هر وقت می گوییم یک Control فلان تعریف کنید یعنی یک Tag در XML با نام فلان تعریف کنید.

♦ هر وقت می گوییم property بهمانم از Control فلانم را با مقدار x ، ست کنید، یعنی در Tag فلانم یک Attribute بسازید و مقدار x رو بهش بدید.

♦ وقتی می گوییم که Control فلانم Child کنترل بهمانم هست، یعنی فلانم در Content بهمانم قرار گرفته است.

♦ وقتی می گوییم که Control فلانم Parent کنترل بهمانم هست، یعنی بهمانم در Content فلانم قرار گرفته است.

 

کنترل های پر کاربرد:

 

 

قوائد و خصوصیات مهم:

♦ هر Attribute در یک Tag با یک مقدار مشابه آن در Property Window محیط طراحی UI منطبق است. با سوئیچ کردن بین حالت XML و Graphical Layout می توانید پنجره Property Window را از سمت چپ صفحه باز کنید و با انتخاب یک Control از محیط طراحی مقادیر آن را مشاهده کنید.

♦ با RightClick کردن روی هر Control و با انتخاب گزینه Edit ID می توانید، Id کنترل ( همان که در findViewById نوشته می شد ) را تغییر دهید. این مقدار در XML با استفاده از android:id نمایش داده خواهد شد. همینطور در RelativeLayout های می توان با استفاده از /id+@ به آن دسترسی پیدا کرد.

♦ توجه داشته باشید که در یک فایل XML از Id های تکراری و مشترک استفاده نکنید.

♦ توجه داشته باشید که Id ها را با نام کوچک بنویسید و از حروف بزرگ استفاده نکنید. برای جدا کردن کلمات از _ استفاده کنید.

♦ در صورتیکه مقدار width برابر fill_parent باشد، عرض کنترل به اندازه parent آن خواهد بود و اگر برابر wrap_content باشد، به اندازه محتویات داخلش خواهد بود و اگر عددی به شکل 50dip باشد، به اندازه 50 واحد خواهد بود. توجه کنید به هیچ عنوان از هیچ عددی و نمادی غیر از مثلاً 20dip استفاده نکنید. 20 غلط است، 20px غلط است، 20% غلط است و تنها جایی که استفاده از عدد تنها مجاز است داخل weight است که توضیح خواهیم داد.

♦ قائده بالا برای height هم صادق است با این تفاوت که ارتفاع کنترل تعیین می شود.

♦ مقدار Text محتویات یک Button، TextView  و مشابه این کنترل ها را تعیین می کنید.

♦ مقدار Text Size یک کنترل بزرگی نوشته آن است.

♦ از مطرح کردن سایر خصوصیاتی که واضح هستند، خودداری می کنم و از شما دعوت می کنم با آزمایش کردن آنها خود را با UI آشنا کنید. اما خواص مهمتر:

♦ با استفاده از weight می توان ابعاد عرضی ( طولی ) چندین کنترل را در LinearLayout های افقی ( عمودی ) تعیین کنید. در این شرایط باید مقدار width و ( height ) برابر با 0dip باشد و با تعیین درصد های هر کنترل که در weight آن می نویسیم، تعیین می کنیم که کنترل ها چه نسبتی از تصویر را در برگیرند. توجه داشته باشید که این خاصیت فقط در کنترل های child کنترل LinearLayout قابل استفاده است.

♦ Margin ها فاصله ای بیرونی کنترل ها با هم است و Padding ها فاصله درونی محتویات کنترل تا حاشیه خود است.

♦ Gravity نحوه چینش محتویات یک کنترل است. بطور مثال اگر Gravity یک TextView از نوع Right باشید، راست چین نمایش داده خواهد شد.

♦ در شرایطی که از RelativeLayout استفاده کنید، قابلیتهایی دارید که در LinearLayout نداشتید و البته بالعکس. بطور مثال weight بسیار در LinearLayout ها به شما کمک می کند در حالیکه از آن در RelativeLayout ها نمی شود استفاده کرد. اما در RelativeLayout ها با استفاده از خصوصیات داخل گروه Misc کارهای بسیاری می توان انجام داد. برای درک این قابلیتها سورس XML بالا را در پروژه خود و در یک فایل XML به طریقی که توضیح داده شد، ایجاد کنید و آن را در Graphical Layout بررسی کنید.

♦ استفاده از Graphical Layout و XML Layout هر دو بسیار مفید است. هیچگاه خود را برای فقط استفاده کردن از یکی محدود نکنید.

♦ گاهی اوقات نیاز به مرتب شدن چیدمان فایل XML Layout است، در این حالت از کلید Ctrl + R در XML استفاده کنید.

♦ می توانید از Drag & Drop در محیط Outline استفاده کنید که بسیار مفید است.

♦ باز بودن Outline در یک سمت و Property در سمت دیگر به شما بسیار کمک خواهد کرد.

♦ قبل از ارجاع دادن ID یک کنترل به کنترل دیگر آنرا نام گذاری کنید.

♦ برای اسامی کنترل ها از عبارات txt_   btn_   edt_   panel_   list_   chk   و ... استفاده کنید بهتر است.

♦ گاهی اوقات ممکن است Eclipse و ADT فایل شما را درست پردازش نکنند، در این حالت Eclipse را Restart کنید.


تمرین:

سایر فرمهایی که در تصویر متحرک اول برنامه ساخته شده اند را خودتان بسازید و با نامهایی که مشخصاً به UI مرتبطند به شکل زیر نامگذاری کنید:


form_about.xml
form_time.xml
form_main.xml


توصیه ها:

- حتماً خودتان سایر UI ها را که به عنوان تمرین قرار داده شد بسازید.

- بسیار مهم است که به بیشتر خواص کنترل ها و انواع کنترل ها مسلط باشید، پس سعی کنید همه چیز را آزمایش کنید. البته در جلسات باقی این موضوع بیشتر هم توضیح داده خواهد شد.

- سعی کنید یک UI بسیار پیچیده روی یک کاغذ طراحی کنید و آنرا در Android بسازید.

 

مطالب مرتبط

آخرین شرکتهای طرف قرارداد

دارولند

طراحی فروشگاه اینترنتی

آف مکس

طراحی سایت تخفیف گروهی

نمایندگان بیمه ما

طراحی وب سایت و پورتال نمایندگان

پژند الکترونیک

طراحی وب سایت و پرتال

نمایندگی بوش

طراحی وب سایت شرکتی

ایران بزرگ

طراحی وب سایت، اتوماسیون اداری و خدمات شبکه پایگاه خبری ایران بزرگ

ستون فقرات تهران

طراحی پورتال تخصصی پزشکی ستون فقرات تهران

آخرین توییت ها

آخرین مقالات آموزشی

استفاده از تکنولوژی روز دنیا در شرکت فناوران راتا رایان