آموزش برنامه نویسی برای اندروید با ایکلیپس(13)- استفاده از طراح ویژوال

استفاده از طراح ویژوال

برای شما خبر خوب دارم: ایکلیپس شامل یک طراح ویژوال می باشد. همچنین خبر بدی هم دارم: طراح در آنچه که می تواند انجام دهد محدود شده است.

باز کردن طراح ویژوال

برای مشاهده ی طراح ویژوال، با فایل بازشده ی Main.xml در ادیتور ایکلیپس، روی دکمه یLayout در پایین صفحه کلیک کنید. مانند تصویر زیر:
اکنون شما باید طراح ویژوال را به صورت زیر مشاهده کنید:
از این جا به بعد، می توانید آیتم ها را از Layout یا جعبه ی ابزار View یا palette درگ و دراپ کنید.

بررسی خصوصیات view

با کلیک کردن روی یک view می توانید خصوصیات آن را مشاهده کنید. به احتمال زیاد خصوصیات پنل(panel) پنهان(hidden) می باشد. برای مشاهده ی آن باید مراحل زیر را طی کرد:
1- انتخاب مسیر زیر Window➪Show View➪Other
2- بسط جاوا و انتخاب Properties
این کار Properties view در ایکلیپس را برای ما باز خواهد کرد. مانند تصویر زیر. استفاده از پنجره ی properties به سادگی یک view در طراح ویژوال است. view دور خودش یک حاشیه یا مرز قرمز رنگ دارد و خصوصیات در پایین پنجره ی Properties نشان داده شده. لیست خصوصیات را برای بررسی چیزی که می تواند در view تغییر پیدا کند را اسکرول کنید.
اگر مطمئن نیستید که یک view چه چیزهایی دارد، طراح ویژوال را باز کنید و تب Properties را کلیک کنید و خصوصیات را بررسی کنید. اگر تب Properties قابل مشاهده نبود، از طریق زیر آن را فعال کنید:
Windows➪Show View➪Other➪General➪Properties
طراح ویژوال زمانیکه محتوا استاتیک باشد به خوبی کار می کند. اما زمانیکه شما نیاز دارید تا آیتم ها را روی صفحه به طور دینامیک بر اساس ورودی کاربر رسم کنید چه اتفاق می افتد؟ اینجا جایی است که طراح معلق می شود. این نمی تواند در این سناریو به شما کمک کند. وقتی که شما Layout تان را فقط یک بار ایجاد می کنید یک سناریو ی محتوای استاتیک رخ می دهد و به طور دینامیک نمی توان آپدیت شود. متن TextViews یا تصاویر ممکن است تغییر کند، اما Layout واقعی درون Layout نمی تواند تغییر کند.
توسعه ی واسط کاربر(UI)
اکنون زمان آن است تا واسط کاربری تان را توسعه دهید.
اولین کاری که باید انجام دهید، بازگشت به XML مربوط به Layout تان(با کلیک تب main.xml) است که این دقیقا بعد از تب Layout قرار دارد. وقتی شما در قسمت XML هستید، TextView مربوط به Layout تان را پاک کنید. اکنون باید یه صورت زیر باشد:
<?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”
>
</LinearLayout>

مشاهده ویژگی های چیدمان XML

قبل از اینکه جلوتر برویم، اجازه دهید تا درمورد چیدمان XML اندروید که شما اکنون در حال کارکردن با آن هستید، توضیح دهم. به جدول زیر نگاه کنید:
xmlns:android=”...” :
فضای نام(namespace) XML که برای ارجاع به بخشی از SDK اندروید استفاده خواهید کرد را تعریف می کند.
orientation=”vertical” :
این به اندروید اطلاع می دهد که این نمایش به شکل عمودی است (مانند پرتره در فرمت پرینت )
android:layout_width=”fill_parent :
این به view اطلاع می دهد که آن باید تا جایی که می تواند به صورت افقی به اندازه ی عرض پدر(parent) خود پر شود.
android:layout_height=”fill_parent :
این به view اطلاع می دهد که آن باید تا جایی که می تواند به صورت عمودی به اندازه ی ارتفاع پدر(parent) خود پر شود.
در این مرحله، شما طرح خود را برای پرکردن کل صفحه نمایش با تنظیم عرض و ارتفاع در "fill_parent" تعریف کرده اید.

کار با view ها

همانطور که قبلا گفته شده، view ها در اندروید بلاکهای ساختاری ابتدایی یا اساسی برای کامپوننتهای واسط های کاربر(UI) هستند. هر زمان که شما یک کامپوننت UI را پیاده سازی می کنید، مانند چیدمان نمایش متن(TextView) و یا غیره، در سیستم اندروید، از view استفاده می کنید. هنگامی که شما در جاوا با view کار می کنید، برای کار با آنها باید آنها را به نوع مناسبشان تقسیم بندی کرد.

تنظیم مقادیر Layout_width و Layout_height (نمایش عرضی . طولی)

قبل از اینکه یک view در یک صفحه ارائه شود، یک جفت تنظیمات روی view باید انجام شود تا اندروید از چیدمان view در صفحه نمایش آگاه شود. مشخصه هایی که به آن نیاز دارد، Layout_width و Layout_height است که در SDK اندروید که به LayoutParams معروف است. مشخصه ی Layout_width عرض صفحه را تعیین می کند و Layout_height ارتفاع صفحه را تعیین می کند.

تنظیم مقدار fill_parent و wrap_content

مشخصه های Layout_width و Layout_height می توانند مقدار پیکسل یا مقدار پیکسلی مستقل از تراکم را برای تعیین ابعاد مربوطه ی خود بگیرند. به هر حال، دو مقدار fill_parent(یا معادل آن match_parent) و wrap_content برای این دو در نظر گرفته شده است. با استفاده از fill_parent، این دستور را به اندروید می دهیم که این رابط گرافیکی کاربر که ایجاد می کنیم می بایست کل صفحه نمایش دستگاه را شامل شود. و با استفاده از wrap_content، این دستور را به سیستم می دهیم که چیزی که عرض یا ارتفاع آن دارای این مقدار می باشد بایستی آنقدر یا از عرض و یا از ارتفاع امتداد یابد که فقط محتویات داخلش را نشان دهد. مثلا فرض کنیم که متنی داریم که ارتفاع فونت آن معادل با 12 پیکسل است. حال اگر layout_height این متن را معادل با wrap_content قرار دهیم، ارتفاع این متن فقط به اندازه ای خواهد بود که ارتفاع فونت قرار گرفته در این متن را پوشش دهد نه کمتر و نه بیشتر)نکته ای که در مورد مقادیر fill_parent و wrap_content می بایست همواره مد نظر قرار دهیم این است که این دو مقدار هم می توانند برای تگ layout_width و هم برای تگ layout_height مورد استفاده قرار گیرند(. .
مقدار fill_parent معادل match_parent می باشد و این دو هیچ فرقی با یکدیگر ندارند و چون شرکت گوگل پس از توسعه ی API 8(android 2.2) نام fill_parent را به match_parent تغییر داد(به عبارت دیگر API 7 ار مقدار fill_parentاستفاده کرد). به طور کلی می توان گفت که fill_parent یا match_parent این وظیفه را بر عهده دارند تا کل فضای بیرونی صفحه ای که در آن قرار دارند را اشغال کنند. رابط گرافیکی کاربر می بایست کل صفحه نمایش دستگاه را شامل شود. این شبیه به خصوصیت autosize در فرم ویندوز است.
اگر شما خواستید از چیدمان استاتیک استفاده کنید، این دو صفت باید در چیدمان XML تنظیم شوند و اگر خواستید یک ویو دینامیک از طریق کد داشته باشید، پارامترهای layout باید در کد جاوا تنظیم شوند. در هر صورت، حالت دیگری غیر ایندو نخواهید داشت. ما در آموزش هایمان در اینجا از حالت دینامیک استفاده نمی کنیم. برای اطلاعات بیشتر از حالت دینامیک می توانید به مثالهای نمونه ی API که همراه SDK اندروید آمده نگاهی بیاندازید.
استفاده از مطالب این مقاله با ذکر منبع راسخون بلامانع می باشد.