02- چالشهای اساسی درواسط کاربری اندروید: LinearLayout

مترجم: نرگس اسماعیلی - الهام محمدی

آدرس مطلب اصلی: http://code.tutsplus.com/tutorials/android-ui-fundamentals-challenge-linearlayout--mobile-4221

قبلا آموخته اید که LinearLayout چگونه در اندروید کار می کنند. مهارت های جدید خود را با با این چالش های تدریجی شامل کنترل های LinearLayout امتحان کنید و دانش خود در مورد زبان برنامه نویسی جاوا و توسعه و طراحی واسط کاربر اندروید را محکم کنید.

مقدمه

برای آماده شدن برای این چالش،شما می بایست با application اصلی و پایه ای اندروید شروع کنید. Android application را به سادگی مطابق Eclipse اجرا کنید وفعالیت پیش فرض آن را ویرایش کنید،مخصوصا متد onCreate() ، برای تست کردن کدی که شما برای این چالش ایجاد می کنید. اگر چیزی که از شما خواستیم بسیار چالش برانگیز است، پیشنهاد می کنیم یک گام به عقب برگردید. با برنامه های خود آموز اندروید مانند Introduction to Android Development و Beginning Android: Getting Started with Fortune Crunch شروع کنید. هنگامی که بر نصب یک پروژه ی اندروید تسلط پیدا کردید، بازگردید و این تمرینات گام به گام را امتحان کنید.

یک چالش گام به گام

این یک چالش تدریجی و گام به گام است که شامل مهارت های بسیار زیادی است که توسعه دهندگان ابتدایی اندروید برای طراحی و توسعه ی application ها باید به آن ها تسلط داشته باشند. با دنبال کردن هر یک از گام های زیر،که مشکل تر می شوند، شما به طور کلی دانش خود را در مورد طراحی واسط کاربر اندروید و linear layout ها محکم می کنید.

مرحله 0:رشته ی خود را تعریف کنید.

حال که شما یک پروژه ی اندروید صحیح و مناسب ایجاد کرده اید، به منابعی نیاز دارید که در داخل واسط کاربر خود استفاده کنید. ایجاد: • هفت منبع رشته ای اجاد کنید.یکی برای هر کدام از رنگ ها در طیف("قرمز"،"نارنجی"،"زرد"،"سبز"،"آبی"،"نیلی"،"بنفش") • هفت منبع رنگ ایجاد کنید.یکی برای هرکدام از رنگ ها در طیف(قرم=> #f00، نارنجی=>#ffa500، زرد=>#ffff00، سبز=>#0f0، آبی=>#00f، نیلی=>4b0082، بنفش=>#ee82ee) • دو منبع رنگ دیگر برای رنگ متن انتخاب کنید(سیاه=>#000، سفید=>#fff) آیا با ایجاد رشته یا منابع رنگ مشکل دارید؟ this tutorial on string formatting را ببینید.

چالش اول:منابع layout خود را تعریف کنید

با ایجاد یک فایل layout resource جدید به نام rainbow.xml شروع کنید، یک کنترل linear layout عمودی که کل صفحه را پر می کند اضافه کنید. سپس هفت کنترل TextView به عنوان کنترل های فرزند(child controls) در داخل linear layout اضافه کنید:یکی برای هر کدام از رنگ ها در طیف رنگ ها.برای هر کدام از TextView control ها یک متن مناسب با رشته ی رنگی در طیف و رنگ پیش زمینه ای مناسب با مقدار رنگ قرار دهید.هم چنین عرض هر آرایش کنترل را نشانه ی پر کردن والد و ارتفاع آن را نشانه ی محتوای آن قرار دهید. اگر شما این مرحله را به درستی تکمیل کرده اید، layout شما باید به این شکل باشد:

چالش دوم:تنظیمات خود را انجام دهید

در این مرحله به خصوصیات متعددی که برای کنترل ها وجود دارد شامل خصوصیاتی که توسط linear layout مورد استفاده قرار می گیرد توجه خواهید کرد. منبع rainbow.xml layout را با تغییرات زیر به روز کنید. TextView control ها را وسط صفحه قرار دهید و متن داخل هر کنترل را وسط آن قرار دهید. تذکر: این کار نیازمند این است که دو نشانه ی XML متفاوت تنظیم شود، یکی روی linear layoutو یکی روی هر TextView control. اگر شما این مرحله را به درستی انجام داده اید، layoutشما باید به شکل زیر باشد:

چالش سوم:اصلاح کردن کنترل های فرزند Linear layout

Linear layoutها بسیار انعطاف پذیر هستند. اگر شما در کنترل های فرزند داخل Linear layout والد ،اصلاحاتی را انجام دهید،در جاهایی که امکان داشته باشد،layout تغییر می کند.متن TextView control ،کوچک و تاحدی خواندن آن دشوار است. با تغییر دادن خود TextView control ها شروع کنید. منبع rainbow.xml layout را با تغییرات زیر به روز کنید.ابتدا،مقدار ابعاد را که textsize نامیده می شود اضافه کنید.در این حالت ما آن را برابر با dp 22 قرار می دهیم. حال layout شما باید چیزی شبیه این باشد:

ملاحظه می کنید که linear layout برای جا دادن TextView control های بزرگتر چقدر انعطاف پذیر است، اما آن ها هنوز همه ی فضای موجود روی صفحه را استفاده نمی کنند ونوار های سیاه هنوز وجود دارند. روش پیشرفته: ممکن است شما بخواهید مقادیر منبع با ابعاد فرعی برای استفاده با اندازه های متفاوت صفحه ایجاد کنید.به عنوان مثال،برای صفحه های بزرگتر، اندازه متن 22dpخوب به نظر می رسد، در حالی که روی صفحه های کوچکتر، اندازه ی متن 14dp یا 16dp ممکن است مناسب تر باشد.برای کسب اطلاعات بیشتر در مورد ایجاد منابع فرعیalternative resources،Supporting Multiple Screensرا ببینید.

چالش چهارم:استفاده ی مؤثر از فضای صفحه

آیا همه ی آن فضای سیاه بلااستفاده را می بینید؟ در این مرحله،توجه خود را به استفاده ی مؤثر از همه ی صفحه نمایش جلب می کنید. TextView controlها در داخل linear layout به طور مناسبی سایزبندی شده اند، اما آن ها می توانند اندکی بزرگ شوند تا از آن فضای سیاه استفاده کنند. ما می خواهیم TextView control ها درهمه ی فضای موجود توسعه پیدا کنند، صرف نظر از این که وسیله در چه موقعیتی قرار دارد یا اندازه ی صفحه نمایش وسیله چقدر است. این کار را با تنظیم کردن نشانه های layout_weight برای کنترل های فرزند در داخل linear layout انجام دهید تا به هر کنترل، حدود خاصی بدهید که در آن توسعه پیدا کند. تأثیر نشانه های layout_weight هنگامی که وسیله در یک موقعیت مشخص قرار دارد بسیار روشن تر و واضح تر است: برای linear layout های عمودی شما می بینید که چگونه میزان بهتر کار می کند هنگامی که وسیله در حالت portrait است، در حالی که برای linear layout های افقی ، شما خواهید دید در حالت landscape چگونه میزان بهتر کار می کند. ابتدا سعی کنید میزان هایی را قرار دهید که که به هر نوار رنگ TextView فضای برابری را روی صفحه می دهد. تذکر:میزان های 0.14 برای 5 کنترل و 0.15 برای 2 کنترل که جمع آن ها 10 می شود. اگر شما میزان های کنترل هایتان را به درستی تنظیم کرده باشید، صفحه نمایش شما باید چیزی شبیه این باشد:

سپس سعی کنید میزان ها را طوری تنظیم کنید که به هر نوار TextView control اجازه ی افزایش تدریجی روی صفحه نمایش را می دهد به این شکل که نوار قرمز کوچک ترین فضا و نوار بنفش بزرگترین است. تذکر:یک توزیع خوب این است: 0.08, 0.10, 0.12, 0.14, 0.16, 0.18, 0.22 اگر شما این مرحله را به درستی انجام داده اید، layout شما باید به این شکل باشد:

فقط برای تلنگر،حالت landscape را انتخاب کنید و ببینید که همان layout به چه شکلی در می آید:

چالش اضافی: Layout استفاده شده در مرحله ی 4 را به صورت برنامه نویسی در جاوا دوباره ایجاد کنید.

اگر شما چالش های قبلی را به طور معقولانه ای آسان و درست دیده اید، چالش اضافی زیر را در نظر بگیرید: منابع Layout پایانی خود را (با عرض های زیاد شونده روی یک کنترل TextView منحصر بفرد)به صورت برنامه نویسی در جاوا، همان طور که در منبع XML layout به آن برخوردید دوباره ایجاد کنید. شما می بایست فرمان ()call setContentView را در متد ()onCreate فعالیت خود توضیح دهیدو LinearLayoutخود را بسازید، همان طور که در طراحی واسط کاربر اندورید: LinearLayout بحث شد. در این جا چند تذکر برای اجرای layout رنگین کمان به صورت برنامه نویسی ذکر شده است:
• با ساخت هر کدام از کنترل های TextView شروع کنید.
• برای پیکربندی پارامترهای layout برای هر کدام از کنترل های TextView، مجموعه ای از LinearLayout.LayoutParams برای ایجاد عرض،ارتفاع و میزان هر کدام ازکنترل هابسازید.
• از متد ()setText از کلاس TextView برای بارکردن واجرای منبع رشته ای مناسی استفاده کنید.
• از متد ()setTextSize از کلاس TextView برای پیکربندی سایز متن استفاده کنید.شما می توانید از متد ()getResources().getDimension برای بار کردن منبع بعد استفاده کنید.
• از متد ()setTextColor از کلاس TextView برای پیکر بندی رنگ خط متن استفاده کنید.شما می توانید از متد ()getResources().getColor برای بار کردن رنگ منبع استفاده کنید.
• از متد ()setBackgroundColor از کلاس TextView برای پیکر بندی رنگ پیش زمینه ی کنترل استفاده کنید.دوباره، شما می توانید از متد ()getResources().getColor برای بار کردن رنگ منبع استفاده کنید.
• از متد ()setGravity از کلاس TextView برای پیکر بندی تنطیمات متن استفاده کنید.کلاس Gravity شامل تعریفاتی از انواع مختلف gravity(ثقل) می باشد.
• سپس کنترل LinearLayout را بسازید.
• از متد ()setOrientation از کلاس LinearLayout برای پیکر بندی موقعیت layout استفاده کنید.کلاس LinearLayout شامل تعریفاتی برای هر دو موقعیت است.
• از متد ا ()setGravity ز کلاس LinearLayout برای پیکربندی موقعیت همه ی فرزندان کنترل های layout استفاده کنید.کلاس Gravity شامل تعریفاتی برای انواع مختلف ثقل می باشد.
• وقتی شما عرض فزرندان را به صورت برنامه نویسی قرار می دهید، شما هم چنین باید جمع کل عرض ها را با استفاده از متد ()setWeightSum از کلاس LinearLayout قرار د هید.به طور مثال، (setWeightSum(1.0f.
• فراموش نکنید که شیئ LayoutParams را برای قرار دادن نشانه های ارتفاع و عرض خود linear layout بسازید.
• با استفاده از متد ()addView هر کنترل TextView را به شئ LinearLayout خود اضافه کنید.
• سر انجام،از متد ()setContentView برای اجرای LinearLayout که پیکر بندی کرده اید استفاده کنید.
شما راه حل جاوا را در دانلودی که در این آموزش وجود دارد خواهید یافت.

نتیجه گیری

طراحان واسط کاربر اندروید همواره از linear layout ها برای اجرای کنترل ها در یک شکل منظم به صورت عمودی یا افقی استفاده می کنند. شما می توانید جایی که فرزندان کنترل layout وجود دارند آن ها را با استفاده از نشانه های ثقل linear layout کنترل کنید. شما می توانید با استفاده از نشانه های layout_weight کنترل کنید که چه مقدار فضا به هر یک از فرزندان کنترل تخصیص داده شده است.



موفق باشید!