(برای مشاهده قسمت قبل کلیک کنید )
در قسمت قبل یاد گرفتیم که چطوی المنت های مورد نیاز خودمون رو در لیوت قرار بدیم.در این قسمت یاد می گیریم که چطوری با تعریف یا تغییر دادن خصوصیات این المنت ها ، اون ها را طبق میل خودمون سفارشی کنیم .برای مثال طول و عرض یا رنگ اون ها رو تغییر بدیم و …
خروجی فایل لیوت اپلیکیشن ما تاکنون مشابه تصویر زیر است  :

کد های زیر  خروجی بالا  را برای ما ایجاد کرده اند :

خطوط ۱۴ تا خط ۱۷ مربوط به تعریف یک المنت Edit Text بهمراه خصوصیات این المنت می باشند .
خطوط ۱۹ تا خط ۲۵ مربوط به تعریف یک المنت Button  بهمراه خصوصیات این المنت می باشند .
خطوط ۲۷ تا خط ۳۳ مربوط به تعریف یک المنت Text View بهمراه خصوصیات این المنت می باشند .

ساختار کلی تعریف یک المنت و خصوصیات آن در لیوت
– تمامی کدهای مربوط به تعریف یک المنت و خصوصیات اون ، در بین دو علامت <>  قرار می گیرند.ساختار تعریف یک المنت را در زیر مشاهده می کنید .

برای مثال کدهای زیر ، یک المنت Edit Text بهمراه خصوصیات اون رو  تعریف می کنند :

بنابرین کدهای زیر سه المنت (Edit Text و Button و Text View) رو  ایجاد می کنند که به جای سه نقطه خاصیت های هر کدوم از این المنت ها را قرار می دهیم:


آشنایی با ویژگی (خاصیت ، Property ) های عمومی المنت ها :

خاصیت های مشخص کننده طول و عرض

layout_width : این خاصیت عرض المنت یا لیوت ما رو مشخص می کند.
layout_height : این خاصیت طول المنت یا لیوت ما رو مشخص می کند.

این دو خاصیت به سه روش  مقدار دهی می شوند:
۱-دادن مقدار wrap_content : این مقدار (طول/عرض) المنت ما رو به اندازه ای که برای نگهداری محتوای درونی اش کافی باشد تعیین می کند.(معمولا این مقدار بعنوان مقدار پیش فرض برای طول و عرض هر المنت قرار داده شده است.)
۲-  fill_parent یا match_parent : انتخاب هر یک از اینها برای( طول/عرض) یک المنت به معنای این است که تمام فضای باقی مانده در (طول/عرض) عنصر والد را اِشغال کن.(البته میزان حاشیه داخلی که توسط خاصیت padding برای عنصر والد در نظر گرفته شده است محفوظ می باشد. در قسمت های آتی با این خاصیت آشنا می شیم.)
برای مثال اگر در المنت Button خاصیت android:layout_width آن را برابر match_parent قرار دهیم ، عرض آن به انداره تمام فضای باقیمانده در عرض المنت والدش تعیین می شود.(ازآنجایی که عنصر والد المنت Button در مثال ما RelatiiveLayout است و عرض این المنت برابر کل صفحه نمایش است پس عرض Button باید قانوناً برابر کل عرض صفحه نماش دستگاه بشود.(امتحان کنید)

می دونید چرا عرض لیوت(RelativeLayout) برابر کل صفححه نمایش است ؟درست حدس زدید چون خاصیت عرض اون برابر match_parent است.(برای طول لیوت هم همین مقدار به طور پیش فرض قرار داده شده است)

حالا اگه علاوه بر عرض ، طول Button رو برابر match_parent قرار بدیم، طول دکمه هر چی فضای خالی که در راستای طولی عنصر والدش باقی مونده هست رو اشغال میکنه.

اگه به تصویر بالا دقت کنید میبینیدمشاهده می کنید که Button تمام طول و عرض باقیمانده در لیوت را اشغال کرده است .
نکته ۱ : fill_parent و Match_parent هیچ تفاوتی با هم ندارند .با معرفی اندروید API 8 (2.2) دستور fill_parent منسوخ و دستور match_parent جایگزین آن معرفی شد ولی همچنان هر دو دستور کار می کنند.)
نکته ۲ : خاصیت های layout_width و Layout_height متعلق به لیوت ها به طورر پیش فرض دارای مقدار match_parent هستند.
نکته ۳ :برای  تمامی عناصر GUI (Button وText Field و …) و حتی لیوت ها باید خاصیت layout_width و Layout_height قرار داده شده باشد.در غیر این صورت با پیام خطا مواجه می شوید.

۳-دادن مقدار عددی بر حسب یکی از موارد زیر : (در مورد مقادیر اندازه گیری در اندروید در یک جلسه جدا بحث خواهیم کرد)
px : واحد پیکسل و وابسته است به تعداد پیکسل های صفحه نمایش می باشد.
in : واحد اینچ و وابسته به اندازه فیزیکی دستگاه می باشد.
dpi : چگالی صفجه نمایش و وابسته به (نسب تعداد پیکسل های صفحه نمایش به اندازه فیزیکی صفحه نمایش می باشد)
dp :یک واحد انتزاعی مبتی بر چگالی صفحه نمایش (dpi) می باشد.بطور خلاصه این مقدار برای یک صفحه نمایش با چگالی ۱۶۰ (dpi=160)برابر یک است.بنابرین اگر چگالی صفحه نمایش ما ۳۶۰ باشد این مقدار ۲ می شود و الی آخر. بهترین روش برای مقدار دهی دستی المنت ها همین روش می یاشد.
موارد بیشتری نیز هستند همان طور که ذکر شد یک جلسه بصورت جداگانه در مورد واحد های اندازه گیری صحبت خواهیم کرد.

خاصیت text
به کمک این خاصیت می توانیم متن پیش فرض نمایشی رو المنت مورد نظرمون رو مشخص کنیم .برای مثال این خاصیت برای یک Button یا Text Viewمتن روی اون رو مشخص می کنه.

خاصیت hint
این خاصیت متن پیش فرضی رو جهت راهنمایی کاربر در یک المنت (Edit Text) مشخص میکنه به طوری که وقتی که کاربر جهت وارد کردن متن خودش اون رو لمس کرد  نوشته راهنما حذف میشه.بطور مثال ، جلوتر برای المنت Edit Text متعلق به اپلیکیشن “محاسبه گر سن” از این خاصیت استفاده خواهیم کردتا کاربر متوجه بشه که باید سال تولدش رو در این کادر وارد کنه.

خاصیت textColor
به کمک این خاصیت رنگ متن روی المنت رو مشخص می کنیم.برای مثال با قرار دادن کد پایین در المنت Buton رنگ متن نمایشی روی اون رو به قرمز تغییر داده ایم.

خاصیت id
توسط این خاصیت برای المنت مورد نظرمان یک id تعریف می کنیم.(id در حقیقت یک شناسه منحصربفرد هست که به المنت هامون میدیم (مثل کد ملی خودمون) ).
نحوه تعیین id برای یک المنت:
مقدار id دلخواهمون رو بعد از نوشتن عبارت ثابت (  /id+@   ) تعیین کرده و اون رو به android:id نسبت میدهیم.مثال :

که به جای Your_Element_ID مقدار دلخواهمون رو برای id مینویسیم.
نکته: در این موارد باید حتما المنت ما یک id داشته باشد:(باهر یک از موارد نامبرده شده در جلسه مربوط به خود کاملا آشنا می شیم)
– در صورتی که بخواهیم از داخل اکتیوتی به یک المنت موجود در لیوت دسترسی داشته باشیم و اطلاعات مورد نیازمون رو از اون دریافت کرده و یا در اون تغییراتی رو اعمال کنیم.
– برای چیدن عناصرمون در لیوت نوع (RelativeLayout) .برای مثال برای این که مشخص کنیم که المنت Button ما در زیر المنت Edit Text قرار دارد باید اول برای هر کدوم از این المنت ها یک id خاصی رو مشخص کنیم .بعدش به وسیله خاصیت هایی که مربوط به مکان دهی هستند جای المنت هامون رو با نامبردن id های اون ها مشخص کنیم .

خاصیت onclick
در جلوی این خاصیت نام یک تابع که در سند اکتیوتی تعریف کرده ایم رو قرار میدیم.وقتی که کاربر المنت رو لمس کرد تابع نامبرده شده فراخوانی می شه.
تابعی که میخواهیم توسط این خاصیت فراخوانی بشه باید حتماً ۳ ویژگی زیر  رو داشته باشه :
۱- نوع برگشتی اون Void باشه.
۲- سطح دسترسی Public داشته باشه.
۳- یک آرگومان از نوع View داشته باشه.
بطور مثال :


تغییر ظاهر اپلیکیشن محاسبه گر سن :
خوب آشنایی با خاصیت هافعلا کافی به نظر میرسه.حالا که با این خاصیت ها آشنا شدیم بریم ظاهر اپلیکیشنمون (محاسبه گر سن) رو با بکار بردن این خواص سر و سامان بدیم.
در جلسه قبل یاد گرفتیم که المنت های مورد نیازمون رو ایجاد کنیم.در این بخش اندازه اون ها رو در صفحه تعیین کرده و برای هر کدوم یک id مشخص می کنیم.

چون می خواهیم المنت Edit Text عرضش به انداره کل صفحه نمایش باشد خاصیت layout:width  اون رو برابر match_parent قرار می دهیم.مقدار پیش فرض wrap_content برای طول المنت مناسب است.

حال با نوشتن کد زیر یک id برای آن تعیین میکنیم (edtAge) :

بعنوان خاصیت آخر یک خاصیت hint جهت راهنمایی کاربر برای این که بداند باید سال تولد خود را در این قسمت وارد کند تعریف کرده و متنی برابر ” سال تولد خود را وارد کنید ” را به این خاصیت اختصاص می دهیم.بدین ترتیب موقع اجرا اپلیکیشن این متن بعنوان یک راهنما درون Edit text نمایش داده می شود ، موقعی که کاربر روی آن کلیک کرد متن نامبرده شده بلافاصله محو شده و کاربر می تواند سال تولد خود را وارد نماید.
کد مربوط به خاصیت hint :

در نهایت کد نهایی المنت Edit text باید مشابه زیر باشد:

برای تعریف خواص دو المنت دیگر مشایه Edit Text عمل می کنیم :

Button

توضیح خطوط بالا
خط ۱ : در این خط نوع المنت خود را مشخص کرده ایم (button).
خط ۲ :عرض المنت را دراین خط مشخص کرده ایم.
خط ۳ : طول المنت خود را در این خط مشحص کرده ایم.
خط ۴ : در این خط برای المنت یک id تعیین کرده ایم .(btnCompute)
خط ۵ و ۶ و ۷ : این خطوط مربوط به جایگیری المنت در صفحه می باشد که در جلسات آینده در مورد اون ها صحبت خواهیم کرد. توضیحات مختصری درمورد این خطوط :
در خط ۵ مشخص کرده ایم که المنت ما در زیر عنصری با id ای برابر (edtAge) قرار میگیرد.و درخط ۶ و ۷ نحوه تراز بندی عنصرمون رو مشخص کزده ایم.(با توجه به تفاوت در مکان قرار گیری المنت شما ممکن است این مقادیر متفاوت باشند که مشکلی ایجاد نمی کند)

textView

توضیح خطوط بالا
خط ۱ : در این خط نوع المنت خود را مشخص کرده ایم (TextView).
خط ۲ :عرض المنت را دراین خط مشخص کرده ایم.
خط ۳ : طول المنت خود را در این خط مشحص کرده ایم.
خط ۴ : در این خط متن پیش فرضی که می خواهیم بر روی این المنت نمایش داده شود را مشخص کرده ایم.
خط ۵ : در این خط برای المنت یک id تعیین کرده ایم .(txtResult)
خط ۶ و ۷ و ۸ : این خطوط مربوط به جایگیری المنت در صفحه می باشد که در جلسات آینده در مورد اون ها بحث خواهیم کرد.در صورت تمایل می توانید توضیحات این خطوط که در پایین آمده است را مشاهده نمایید .
در خط ۶ مشخص کرده ایم که المنت ما در زیر عنصری با id ای برابر (btnCompute) قرار میگیرد.و درخط۷ و ۸ نحوه تراز بندی عنصرمون رو مشخص کزده ایم.(با توجه به تفاوت در مکان قرار گیری المنت شما ممکن است این مقادیر متفاوت باشند که مشکلی ایجاد نمی کند)

در نهایت کدهای لیوت اپلیکیشن “محاسبه گر سن”ما باید مطابق زیر باشند (وجودداشتن تفاوت در خصوصیاتی که مربوط به مکان المنت ها است مجاز است.در جلسه مربوط به خود در مورد این خواص صحبت میکنیم)

خروجی کدهای بالا در حالت Design :

نکته :قبل از تمامی خواصی که برای المنت های اندروید می نویسم کلمه کلیدی (:android) باید قرار داده شود.برای مثال ( android:id و android:text و … )
نکته :
از اونجایی که مباحث برنامه نویسی اندروید گسترده و به هم مرتبط هستند در برخی قسمت ها ارتباط یک مبحث با سایر مباحث ذکر می شود یا همچنین گاهی پیش می یاد که آشنایی با یک مطلب برای پست فعلی در سطح مقدماتی کافی بوده  و در قسمت مربوط به خودش به طور کامل شرح و بسط داده می شود.لذا در صورتی که احساس کردید در برخی از این موارد قدری وارد جزئیات نشده ایم اصلا نگران نباشید چرا که مطلب در سطحی که نیاز بوده ارائه شده و در بخش مربوط به خودش با جزئیات بیش تر شرح داده می شود.علت وارد نشدن به جزئیات جلوگیری از پراکندگی و حفظ یکپارچگی موضوع پست می باشد.

 

هرگونه سوال یا پیشنهادی که داشتید رو می تونید از طریق بخش نظرات با ما در میان بگذارید .
موفق باشید.