10- طراحی واسط کاربری اندروید : relative layouts
جمعه, ۲ خرداد ۱۳۹۳، ۱۰:۲۷ ب.ظ
مترجم: رضوانه رنجکش
آدرس مطلب اصلی: http://code.tutsplus.com/tutorials/android-user-interface-design-relative-layouts--mobile-4301
آشنایی با Layout برای طراحی خوب برنامه های اندروید مهم است. در این مقاله شما همه چیز را در مورد Relative Layouts یاد می گیرید مانند سازماندهی کنترل های واسط کاربری، یا widget ها روی screen در رابطه با یکدیگر یا با layout والدشان. اگر از Relative Layouts به درستی استفاده شود، می تواند layout قدرتمند و انعطاف پذیری باشد که براساس آن می توان واسط کاربری application های اندروید جالبی را طراحی کرد.
به یاد بیاورید که، از داخل یک activity تنها یک خط کد در متد onCreate() برای بارگذاری و نمایش یک layout resource در اسکرین لازم است. اگر layout resource در فایل /res/layout/relative.xml ذخیره شده باشد این خط از کد به صورت زیر خواهد بود:
• EditText01 :تنظیم کردن در سمت چپ Layout
• EditText01: اجرا شدن در سمت چپ Button01
• Button01: تنظیم کردن در سمت راست Layout
حال بیاید نگاه دقیق تری به کد لیست جاوا بیندازیم. اول یک EditText به صورت نرمال ایجاد می کنیم. ما ان را به بعضی پارامترهای relative layout می دهیم و سپس قوانین آنها را تنظیم می کنیم. در این مورد، ما دو قانون برای کنترل EditText ایجاد می¬کنیم. سپس، ما یک کنترل button ایجاد کرده و قوانین آن را تنظیم می کنیم.(قرار گرفتن در سمت راست layout والد). در نهایت، یک شیء relative layout ایجاد می کنیم، پارامترای آن را set می کنیم، با استفاده از متد addView() دو تا کنترل فرزند را به آن add می کنیم و با استفاده از متد setContentView() ، relative layout را برای صفحه نمایش بارگذاری می¬کنیم. همان طور که می بینید،هرچقدر که کنترل ها به صفحه اضافه می شوند،کد می تواند از نظر اندازه به سرعت رشد کند.برای سازماندهی و قابلیت تعمیر وجداسازی،تعریف و استفاده از layout ها به صورت برنامه نویسی در حالت های فردی و تکی بهتر از حالت های وسط و معادل است. حال بیایم اندکی در مورد صفاتی که به تنظیم یک relative layout و کنترل های فرزند آن کمک می کنند، بحث کنیم. برخی از ویژگی های خاص که به relative layout- به عبارت دیگر قوانین فرزند- اعمال می شود عبارتند از :
•قوانینی برای کنترل فرزند مرکزی درون layout والد، از جمله : center horizontally, center vertically و یا هر دو.
• قوانینی برای چیدمان کنترل فرزند درون layout والد، از جمله: قرار گرفتن در بالا، پایین، چپ و راست کنترل های دیگر.
• قوانینی برای چیدمان کنترل فرزند در رابطه با کنترل های فرزند دیگر، از جمله: قرار گرفتن در بالا، پایین، چپ و یا راست.
• قوانینی برای مکان کنترل های فرزند در رابطه بادیگر کنترل های فرزند. از جمله: قرار دادن در چپ یا راست یک کنترل خاص و یا بالا یا پایین کنترل دیگر. هم چنین، ویژگی های کلی ViewGroup-style به relative layout اعمال می شود. که آنها عبارتند از :
• پارامترهای عمومی layout مانند طول و عرض(لازم) layout ( کلاس ViewGroup.LayoutParams).
• حاشیه پارامترهای Layout مانند margin_top, margin_left, margin_right و margin_bottom ( کلاس ViewGroup. MarginLayoutParams).
• پارامترهای layout مانند طول و عرض( کلاس ViewGroup.LayoutParams). حالا عملکرد بعضی از این قوانین را بررسی کنیم!
برای طراحی این صفحه نمایش از relative layout استفاه میکنیم، مراحل زیر را دنبال میکنیم.
• کنترل TextView قرمز رنگ هیچ تنظیمات خاصی ندارد.به صورت پیش فرض،این کنترل در در بالاترین گوشه ی سمت چپ parent layout رسم می شود.
• کنترل TextView نارنجی رنگ به صورت افقی در parent layout قرار گرفته است.به دلیل این که همه ی کنترل ها به صورت پیش فرض در در گوشه ی بالا و سمت چپ صفحه نمایش قرار گرفته اند،این به طور مؤثر کنترل را به لبه ی بالای وسط parent layout قرار می دهد.
• کنترل TextView زرد رنگ در لبه ی سمت راست parent layout تنظیم شده است. به دلیل این که همه ی کنترل ها به صورت پیش فرض در در گوشه ی بالا و سمت چپ صفحه نمایش قرار گرفته اند،این به طور مؤثر کنترل را به لبه ی بالای سمت راست parent layout قرار می دهد.
• کنترل TextView سبز رنگ به طور عمودی در داخل parent layout قرار گرفته است و برای نمایش داده شدن در سمت چپ کنترل TextView آبی رنگ تنظیم شده است.
• کنترل TextView آبی رنگ در مرکز parent layout( چه به صورت عمودی و چه افقی) تنطیم شده است.این کنترل آن را در قسمت وسط صفحه نمایش می دهد.
• کنترل TextView نیلی رنگ به طور عمودی در داخل parent layout قرار گرفته است و برای نمایش داده شدن در سمت راست کنترل TextView آبی رنگ تنظیم شده است.
• کنترل TextView بنفش رنگدر لبه ی پایینی parent layout تنطیم شده است.عرض آن برای پر کردن والد تنظیم شده است،که به آن اجازه می دهد در لبه ی پایین صفحه امتداد پیدا کند. اگر شما این قوانین را درفایل XML resource تعریف کنید،این باید هم اکنون مثل این به نظر بیاید:
• کنترل های فرزند relative layouts باید صفت مشخصه ی خاص برای اجرای درست قوانین داشته باشند.
• مراقب قوانین دایره ای باشید. زمانی قوانین دایره ای رخ میدهند که ۲ کنترل قوانینی دارند که به یکی دیگر اشاره میکنند. اگر شما یک مجموعه ای از قوانین دایره ای را در لایه ی طراحی دارید، شما خطاهای زیر را دریافت میکنید:
• IllegalStateException: وابستگی دایره ای نمیتواند در یک RelativeLayout وجود داشته باشد. یادآوری این نکته می تواند مفید باشد که نقش های relative layout در یک معبر اجرا شده اند.
• نقش های relative layout در مقدار حداقل نگه دارید.این کار کمک می کند که شانس نقش های دایره ای کم شود و layout شما را بسیار کنترل پذیر تر و انعطاف پذیر تر می کند.
• مانند همیشه، به یاد داشته باشید امتحان کنید که طرح layout شما در هر دو حالت portrait و landscapeآن طور که مورد انتظار شماست در سایز های مختلف صفحه نمایش و وضوح های متفاوت کار می کند.
• برای بالا بردن کارایی و پاسخ دهی application ، به جای استفاده از linear layout های تو در تو از relative layout ها استفاده کنید.
آدرس مطلب اصلی: http://code.tutsplus.com/tutorials/android-user-interface-design-relative-layouts--mobile-4301
آشنایی با Layout برای طراحی خوب برنامه های اندروید مهم است. در این مقاله شما همه چیز را در مورد Relative Layouts یاد می گیرید مانند سازماندهی کنترل های واسط کاربری، یا widget ها روی screen در رابطه با یکدیگر یا با layout والدشان. اگر از Relative Layouts به درستی استفاده شود، می تواند layout قدرتمند و انعطاف پذیری باشد که براساس آن می توان واسط کاربری application های اندروید جالبی را طراحی کرد.
Relative layouts چیست؟
بعد از linear layouts (که نمایش کنترل ها در یک سطر یا ستون می باشد)، relative layouts یکی از شایع ترین layout های مورد استفاده طراحان واسط کاربری اندروید می¬باشد. همانند خیلی از layout های دیگر این را نیز می توان در منابع XML layouts یا از طریق برنامه نویسی در کد جاوا برنامه ها تعریف نمود. از relative layouts برای سازماندهی کنترل ها در ارتباط با یکدیگر یا layouts والدشان به کار می رود. این به چه معناست؟ بدین معنا که کنترل های فرزند مانند کنترل های :imageview, textview و button را می توان در بالا یا پایین، چپ یا راست یکدیگر قرار داد. هم چنین در مورد layout والد نیز شامل قرار دادن کنترل ها در وسط، بالا یا پایین، چپ یا راست لبه های layout است. محل قرار گرفتن کنترل های فرزند Relative layouts با قوانینی تعریف شده است. این قوانین مشخص می کنند چگونه کنترل ها در relative layouts نمایش داده شوند. برای دیدن لیست کامل این قوانین، به مستندات SDK اندروید برای کلاس relative layouts مراجعه کنید. ویژگی¬های XML برای استفاده در XML resource نیز در این اسناد تعریف شده است. توجه: این قوانین نیاز دارند که هر کنترل فرزند id خود را به درستی تنظیم کنند.یک relative layout ساده :
layout را می توان به خوبی با یک مثال توضیح داد. ما می خواهیم یک صفحه با یک کنترل EditText و یک کنترل button طراحی کنیم، که Button در سمت راست EditText نمایش داده شود. بنابراین ما باید relative layout با دو کنترل فرزند تعریف کنیم: EditText و Button . کنترل EditText قانونی دارد که می گوید: این کنترل را در سمت چپ کنترل والد(layout) تنظیم کن و در سمت چپ کنترل دوم،(button) قرار بده. ضمنا، کنترل button هم قانونی دارد که می گوید: این کنترل را در سمت راست کنترل والد (layout) تنظیم کن. شکل ذیل فقط یک relative layout را نشان می دهد. این relative layout دارای دوکنترل فرزند: edittext و button می باشد.تعریف یک XML Layout Resource با یک Relative Layout
مناسب ترین و قابل نگاهداری ترین راه برای طراحی واسط کاربری برنامه ها، به وسیله ایجاد XML Layout Resource می باشد. این متد به شدت فرایند طراحی واسط کاربری را ساده می کند، مانند: حرکت بیشتر creation static و کنترل¬های واسط کاربری و تعریف ویژگی¬های کنترل، در XML به جای تعریف کردن در کد. XML Layout Resource باید در /res/layout در دایرکتوری پروژه به طور سلسله مراتبی ذخیره شود. اجازه دهید نگاهی به relative layout معرفی شده در قسمت قبل بیندازیم. این فایل منبع به نام /res/layout/relative.xml در XML به شرح زیر تعریف می¬شود:به یاد بیاورید که، از داخل یک activity تنها یک خط کد در متد onCreate() برای بارگذاری و نمایش یک layout resource در اسکرین لازم است. اگر layout resource در فایل /res/layout/relative.xml ذخیره شده باشد این خط از کد به صورت زیر خواهد بود:
setContentView(R.layout.relative);
این relativelayout دارای تنظیمات عرض و ارتفاع برای پر کردن صفحه نمایش و هم چنین سه قانون در تنظیم کنترل های فرزند دارد:
• EditText01 :تنظیم کردن در سمت چپ Layout
• EditText01: اجرا شدن در سمت چپ Button01
• Button01: تنظیم کردن در سمت راست Layout
تعریف یک relative layout به صورت برنامه نویسی:
شما می توانید از طریق برنامه نویسی نیز relative layout را ایجاد و پیکربندی کنید. این کار با استفاده از کلاس relative layout انجام می¬شود. (android.widget.Relative) شما می توانید پارامترهای خاص را کلاس RelativeLayout.LayoutParams پیدا کنید، هم چنین پارامترهای معمولی (android.view.ViewGroup.LayoutParams) مانند layout_height و layout_width و پارامترهای حاشیه (ViewGroup.MarginLayoutParams) ، به اشیا relative layout اعمال می¬شود. به جای اینکه یک layout resource به طور مستقیم بارگذاری شود، همان طور که قبلا نشان داده شده از متد setContentView() استفاده می شود. شما باید به جای ساختن محتوای اسکرین در جاوا و سپس تولید یک شیء layout والد که شامل همه¬ی محتویات کنترل برای نمایش view های فرزند،در متد setContentView() استفاده می¬شود. در این حالت، layout والد شما، relative layout خواهد بود. به عنوان مثال، کد زیر نشان می دهد که چگونه با برنامه نویسی یک نمونه Activity یک relative layout داشته باشیم و یک Textview و یک کنترل button در آن با متد onCreate() قرار دهیم. همانند چیزی که در قسمت قبل نشان داده شده بود:حال بیاید نگاه دقیق تری به کد لیست جاوا بیندازیم. اول یک EditText به صورت نرمال ایجاد می کنیم. ما ان را به بعضی پارامترهای relative layout می دهیم و سپس قوانین آنها را تنظیم می کنیم. در این مورد، ما دو قانون برای کنترل EditText ایجاد می¬کنیم. سپس، ما یک کنترل button ایجاد کرده و قوانین آن را تنظیم می کنیم.(قرار گرفتن در سمت راست layout والد). در نهایت، یک شیء relative layout ایجاد می کنیم، پارامترای آن را set می کنیم، با استفاده از متد addView() دو تا کنترل فرزند را به آن add می کنیم و با استفاده از متد setContentView() ، relative layout را برای صفحه نمایش بارگذاری می¬کنیم. همان طور که می بینید،هرچقدر که کنترل ها به صفحه اضافه می شوند،کد می تواند از نظر اندازه به سرعت رشد کند.برای سازماندهی و قابلیت تعمیر وجداسازی،تعریف و استفاده از layout ها به صورت برنامه نویسی در حالت های فردی و تکی بهتر از حالت های وسط و معادل است. حال بیایم اندکی در مورد صفاتی که به تنظیم یک relative layout و کنترل های فرزند آن کمک می کنند، بحث کنیم. برخی از ویژگی های خاص که به relative layout- به عبارت دیگر قوانین فرزند- اعمال می شود عبارتند از :
•قوانینی برای کنترل فرزند مرکزی درون layout والد، از جمله : center horizontally, center vertically و یا هر دو.
• قوانینی برای چیدمان کنترل فرزند درون layout والد، از جمله: قرار گرفتن در بالا، پایین، چپ و راست کنترل های دیگر.
• قوانینی برای چیدمان کنترل فرزند در رابطه با کنترل های فرزند دیگر، از جمله: قرار گرفتن در بالا، پایین، چپ و یا راست.
• قوانینی برای مکان کنترل های فرزند در رابطه بادیگر کنترل های فرزند. از جمله: قرار دادن در چپ یا راست یک کنترل خاص و یا بالا یا پایین کنترل دیگر. هم چنین، ویژگی های کلی ViewGroup-style به relative layout اعمال می شود. که آنها عبارتند از :
• پارامترهای عمومی layout مانند طول و عرض(لازم) layout ( کلاس ViewGroup.LayoutParams).
• حاشیه پارامترهای Layout مانند margin_top, margin_left, margin_right و margin_bottom ( کلاس ViewGroup. MarginLayoutParams).
• پارامترهای layout مانند طول و عرض( کلاس ViewGroup.LayoutParams). حالا عملکرد بعضی از این قوانین را بررسی کنیم!
کار کردن با قوانین layout
بیاید یک صفحه نمایش پیچیده تری طراحی کنیم. برای این منظور در این تمرین، ما با طراحی صفحه نمایش نهایی شروع کرده و سپس به عقب برمی گردیم و در مورد ویژگی های relative layout و قوانین مورد استفاده برای رسیدن به این نتیجه نهایی بحث می-کنیم بیایید بگوییم می خواهیم یک صفحه نمایش طراحی کنیم که شبیه این باشد:برای طراحی این صفحه نمایش از relative layout استفاه میکنیم، مراحل زیر را دنبال میکنیم.
مرحله اول : یک relative layout در فایل xml تعریف کنید.
اول یک relative layout در فایل xml تعریف کنید ، اگر میخواهید در layout کنترل کل صفحه نمایش را در برگیرد ، خصوصیت ارتفاع و عرض آن را fill_parent قرار دهید.فایل xml resource شما الان باید چیزی شبیه به شکل زیر باشد:مرحله دو :تعیین کنترل های فرزند
سپس ما تعیین میکنیم که چه کنترل های فرزندی داشته باشیم.در این مورد ما هفت تا کنترل TextViewنیاز داریم (برای هر رنگ یک کنترل).آن ها را تنطیم کنید همان طور که معمولا این کار را انجام می دهید،تبدیل کردن خصوصیات متن به رشته، رنگ های پیش زمینه،اندازه ی حروف و ... . هر یک از این کنترل ها را در داخل relative layout خود قرار دهید.مرحله ی سوم: نقش های relative layout را تعیین کنید.
سپس، ما نقش های هر کدام از فزرندان کنترل را به منظور استفاده از آن ها در مکان های مناسب مشخص می کنیم:• کنترل TextView قرمز رنگ هیچ تنظیمات خاصی ندارد.به صورت پیش فرض،این کنترل در در بالاترین گوشه ی سمت چپ parent layout رسم می شود.
• کنترل TextView نارنجی رنگ به صورت افقی در parent layout قرار گرفته است.به دلیل این که همه ی کنترل ها به صورت پیش فرض در در گوشه ی بالا و سمت چپ صفحه نمایش قرار گرفته اند،این به طور مؤثر کنترل را به لبه ی بالای وسط parent layout قرار می دهد.
• کنترل TextView زرد رنگ در لبه ی سمت راست parent layout تنظیم شده است. به دلیل این که همه ی کنترل ها به صورت پیش فرض در در گوشه ی بالا و سمت چپ صفحه نمایش قرار گرفته اند،این به طور مؤثر کنترل را به لبه ی بالای سمت راست parent layout قرار می دهد.
• کنترل TextView سبز رنگ به طور عمودی در داخل parent layout قرار گرفته است و برای نمایش داده شدن در سمت چپ کنترل TextView آبی رنگ تنظیم شده است.
• کنترل TextView آبی رنگ در مرکز parent layout( چه به صورت عمودی و چه افقی) تنطیم شده است.این کنترل آن را در قسمت وسط صفحه نمایش می دهد.
• کنترل TextView نیلی رنگ به طور عمودی در داخل parent layout قرار گرفته است و برای نمایش داده شدن در سمت راست کنترل TextView آبی رنگ تنظیم شده است.
• کنترل TextView بنفش رنگدر لبه ی پایینی parent layout تنطیم شده است.عرض آن برای پر کردن والد تنظیم شده است،که به آن اجازه می دهد در لبه ی پایین صفحه امتداد پیدا کند. اگر شما این قوانین را درفایل XML resource تعریف کنید،این باید هم اکنون مثل این به نظر بیاید:
نکته های استفاده از relative layouts
در اینجا برخی از نکته های کار با relative layouts هست:• کنترل های فرزند relative layouts باید صفت مشخصه ی خاص برای اجرای درست قوانین داشته باشند.
• مراقب قوانین دایره ای باشید. زمانی قوانین دایره ای رخ میدهند که ۲ کنترل قوانینی دارند که به یکی دیگر اشاره میکنند. اگر شما یک مجموعه ای از قوانین دایره ای را در لایه ی طراحی دارید، شما خطاهای زیر را دریافت میکنید:
• IllegalStateException: وابستگی دایره ای نمیتواند در یک RelativeLayout وجود داشته باشد. یادآوری این نکته می تواند مفید باشد که نقش های relative layout در یک معبر اجرا شده اند.
• نقش های relative layout در مقدار حداقل نگه دارید.این کار کمک می کند که شانس نقش های دایره ای کم شود و layout شما را بسیار کنترل پذیر تر و انعطاف پذیر تر می کند.
• مانند همیشه، به یاد داشته باشید امتحان کنید که طرح layout شما در هر دو حالت portrait و landscapeآن طور که مورد انتظار شماست در سایز های مختلف صفحه نمایش و وضوح های متفاوت کار می کند.
• برای بالا بردن کارایی و پاسخ دهی application ، به جای استفاده از linear layout های تو در تو از relative layout ها استفاده کنید.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.