03- طراحی واسط کاربر اندروید: Frame layouts :: برنامه نویسی اندروید

03- طراحی واسط کاربر اندروید: Frame layouts

جمعه, ۲ خرداد ۱۳۹۳، ۰۹:۳۶ ب.ظ

مترجم: لیلا علی مردانی

آدرس مطلب اصلی: http://code.tutsplus.com/tutorials/android-user-interface-design-frame-layouts--mobile-4877

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

Frame layout چیست؟

Frame layouts یکی از ساده ترین و پر کاربرد ترین نوع از layouts هاست که توسط توسعه دهندگان اندروید برای کنترلهای دیدگاههای سازماندهی مورد استفاده قرا ر می گیرد.آنها معمولا کم کاربرد تر از دیگر layouts هستند.زیرا آنها به طور کلی برای نمایش دادن یک دیدگاه یا دیدگاههای مشترک استفاده می شوند. Frame layout معمولا به عنوان یک layout قالب استفاده میشود.به طوری که کلا تنها یک دیدگاه فرزند دارند.(معمولا layout دیگر برای سازماندهی بیش از یک دیدگاه استفاده می شود)

TIP: در حقیقت یک از جاهایی که شما Frame layouts را خواهید دید به عنوان ریشه و پدر layout همه منابع layout است که شما طراحی می کنید.اگر شما برنامه تان را درسلسله مراتب ابزار نمایانگر جلو بیاندازید(یک ابزار مفید برای اشکال زدایی layouts برنامه شماست).شما خواهید دید که هر منبع layout درطراحی شما بدون یک دیدگاه پدر یک Frame layout نمایش داده می شود.

Frame layouts بسیار ساده هستند که آنها را کارامد می کند.آنها می توانند در منابع layout XML یا برنامه نویسی در کد های برنامه های جاوا تعریف شوند. یک دیدگاه فرزند در یک Frame layout همیشه وابسته به گوشه سمت چپ صفحه رسم می شود.اگر چندین دیدگاه فرزند وجود داشته باشد بعد آنها از یک گوشه بالای دیگر رسم می شوند.این به این معنی است که اولین دیدگاه اضافه شده به Frame layout در بالای یک پشته نمایش داده می شوند.

حال بیایید به یک مثال ساده بنگرید.بیایید بگوییم که ما یک Frame layout داریم که برای کنترل تمام صفحه سایز می شود.(به جای کلمات پهنای layout و ارتفاع layout خواصی هستند که هر دو برای تنظیم نظیر والدین هستند.) بعد ما توانستیم 3 فرزند کنترلی به این

Frame layout اضافه کنیم.

یک image viweبا یک تصویر از دریاچه

یک text viwe با متن هایی برای نمایش به سمت بالای صفحه

یک text viwe با متن هایی برای نمایش به سمت پایین صفحه(به اسانی استفاده از صفات ثقلی و مرکزی layout برای داشتن نمایش متن از بالای صفحه است)

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

تعریف یک منبع XML layout با یک frame layout

مناسبترین و قابل نگهداری ترین برای طراحی واسط کاربری برنامه ایجاد منابع XML layout است.این روش به خوبی ساده شده است.پردازش طراحی UI برروی تولیدات ایستا وکنترل های واسط کاربری layoutو تعریف صفات کنترل XML به جای تولید کد مانور می دهد.

منابع XML layout باید در سلسله مراتب دایرکتوری پروژه res/layout ذخیره شوند.حال بیایید به frame layout ساده معرفی شده در جلسه قبل نگاهی بیندازیم. این صفحه نیز دوباره اساسا یک frame layout با سه نمایش فرزند است: یک تصویر که کل صفحه را پر می کند.روی آن دو کنترل متن که هر کدام به صورت پیش فرض روی صفحه شفاف کشیده شد اند.این فایل منبع ,layout /res/layout/framed نامیده شده است .xml به شکل زیر در XMLتعریف شده است:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<ImageView

android:id="@+id/ImageView01"

android:layout_height="fill_parent"

android:layout_width="fill_parent"

android:src="@drawable/lake"

android:scaleType="matrix"></ImageView>

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:textColor="#000"

android:textSize="40dp"

android:text="@string/top_text" />

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/bottom_text"

android:layout_gravity="bottom"

android:gravity="right"

android:textColor="#fff"

android:textSize="50dp" />

</FrameLayout>

فراخوانی از این اکتیویتی فقط یک خط از کد زیر یعنی onCreate()را لازم دارد که یک منبع layout روی صفحه بارگذاری و نمایش داده شود.البته اگر منبع layout در /res/layout/framed ذخیره شود .فایل xml آن خط از کد setContentView(R.layout.framed);خواهد بود.

تعریف یک Frame layout قابل برنامه ریزی

همچنین شما می توانید به صورت قابل برنامه ریزی Frame layouts را ایجاد و پیکر بندی کنید.این کار زمانی انجام می شود که از کلاس قالب طرح ریزی استفاده شود.(frame layout, ,ویجت, اندروید).شما پارامتر های خاص layout را در frame layout خواهید یافت.کلاس پارامتر های layout.همچنین پارامتر های نوعی layout (اندروید-viwe-group viwe – پارامترهای layout)مانند ارتفاع layout و پهنای layout هم به خوبی پارامتر های حاشیه (گروه نمایش-پارامتر های layout حاشیه)هنوز از اشیا FrameLayout استفاده می کنند.به جای بارگذاری مستقیم یک منبع layout از روش setContentView() همان طور که قبلا نشان داده شد استفاده می کنیم.شما باید به جای ساختن صفحات حاوی آن در جاوا از تامین کردن یک شی layout والد که شامل همه مضامین کنترلی برای نمایش میشود به عنوان نمایش های فرزند روش setContentView() استفاده کنید.در این مورد خاص layout والد باید Frame layout باشد.

برای مثال کد زیر چگونگی دوباره تولید کردن همین layout که قبلا به صورت قابل برنامه ریزی توضیح داده شد ه است

را شرح می دهد.به ویژه ما یک اکتیویتی معرفی کردن یک framework و مکان یک کنترل image viwe توسط دو کنترل text viweدر آن را در روش onCreate() را داریم.

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

TextView tv1 = new TextView(this);

tv1.setText(R.string.top_text);

tv1.setTextSize(40);

tv1.setTextColor(Color.BLACK);

TextView tv2 = new TextView(this);

tv2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT, Gravity.BOTTOM));

tv2.setTextSize(50);

tv2.setGravity(Gravity.RIGHT);

tv2.setText(R.string.bottom_text);

tv2.setTextColor(Color.WHITE);

ImageView iv1 = new ImageView(this);

iv1.setImageResource(R.drawable.lake);

iv1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

iv1.setScaleType(ScaleType.MATRIX);

FrameLayout fl = new FrameLayout(this);

fl.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));

fl.addView(iv1);

fl.addView(tv1);

fl.addView(tv2);

setContentView(fl);

}

نتیجه ای که صفحه نشان می دهد دقیقا شبیه شکلی است که قبلا نمایش دادیم.

چه وقت از Frame layouts استفاده میکنیم؟

با انواع layout قوی دیگر شبیه layouts خطی layouts وابسته و layouts جدول در دسترستان فراموش کردن Frame layout اسان است. راندمان Frame layout آنها را انتخاب خوبی برای صفحات دارای view control کرده است.(هوم اسکرین صفحه بازی با یک نقاشی تنها و مشابه آنها).گاهی اوقات طر احی layout های موثر دیگر می توانند به طراحی Frame layout کاهش بیابند که این کارا تر است.در حالی که در مواقع دیگر انواع layout خاص تر را به خود اختصاص می دهند. Frame layouts, layout نرمال انتخابی هستند وقتیکه شما دیدگاه های مشترکی را می خواهید

به کنترل های مشابه نگاه کنید

FrameLayout نسبتا ساده است.به همین دلیل انواع layout بیشمار دیگر و view controls بر ان وابسته است.برای مثال اسکرول ویو یک FrameLayout ساده است که اسکرول بار دارد.وقتی که محتوی فرزند برای نقاشی در محدوده layout بسیار بزرگ است.تمامی ویجت های برنامه های هوم اسکرین در یک FrameLayout قرار دارد.

نکته جالب توجه اضافی برای همه FrameLayout ها این است که آنها می توانند یک پیش نمایش قابل رسم به اضافه بک گراند نرمالی داشته باشد.این کار از طریق صفحات پیش نمایش XMLانجام می شود و می تواند پیرامون frame نمایش های اساسی کاملا لفظی استفاده شود

نتیجه

واسط های کاربری برنامه های اندروید layouts قابل استفاده را تعریف می کند. Frame layouts یکی از ساده ترین و کارامد ترین نوع های layout قابل دسترس است.کنترل های فرزند Frame layout به طور نسبی از گوشه سمت چپ بالای layout کشیده می شوند.اگرنمایش های فرزندهای مضاعف در Frame layout وجود داشته باشد آنها به جای نمایش اخرین فرزند بالا رسم می شود.

۱ ۰
۹۳/۰۳/۰۲

وهاب صمدی بخارایی

برنامه نویسی اندروید - دانشگاه صنعتی قم

برنامه نویسی اندروید - دانشگاه صنعتی قم

این وبلاگ کانال ارتباطی با دانشجویان درس«برنامه نویسی موبایل» دانشگاه صنعتی قم می باشد.

مطالب ترجمه شده اندروید

03- طراحی واسط کاربر اندروید: Frame layouts

نظرات (۱)

ارسال نظر