۱
آبان

جلسه ۱۲ : طراحی رابط کاربری در اندروید

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش برنامه نویسی اندروید را دنبال می کنند. یکی از مهمترین بخش های هر اپلیکیشنی طراحی و ظاهر آن برنامه است که تا حد زیادی قابلیت ها و ویژگی های نرم افزار را بازگو می کند. طراحی UI در اندروید دارای ساختار ویژه ی خود است، ساختار پایه ی ایجاد رابط کاربری در اندروید شیء View است که از کلاس View ایجاد می شود. و محدوده ی ایجاد طراحی رابط کاربری را روی صفحه بصورت یک محدوده ی مستطیلی اشغال می کند. شیء View در واقع یک کلاس پایه برای طراحی بخش های مختلف از جمله button ، فیلدهای Text و … است. برای آشنایی با طراحی رابط کاربری در اندروید در ادامه ی مباحث این بخش با ما همراه باشید.

طراحی UI در اندروید

در ادامه ی مبحث طراحی UI در اندروید ما شما را با ساختار طراحی و ویژگی های طرح اشیاء طراحی آشنا می کنیم.

ViewGroup یک زیرمجموعه از شیء View است و یک نگهدارنده ی غیر قابل مشاهده را ارائه می دهد.

ViewGroup ویژگی های طرح بندی بخش های مختلف طراحی را حفظ می کند.

در سطح سوم ما طراحی های مختلفی داریم که زیر کلاس های ViewGroup هستند.

این طراحی ها یک طرح معمولی ساختار بصری را برای یک رابط کاربری Android تعریف می کند.

ساختار منطقی طراحی های اندروید

این طرح ها هم می توانند در زمان اجرا بوسیله ی View / ViewGroup ایجاد شوند و هم خودتان می توانید در فایل main_layout .xml آن ها را لحاظ کنید.

طراحی UI در اندروید

در این آموزش ما بیشتر روی GUI شما بر اساس طرح بندی تعریف شده در فایل XML اشاره می کنیم.

یک طرح بندی ممکن است شامل هر نوع ابزار مانند Button ها، ،Tagها، Textbox و… باشد.

مثال-

کد زیر یک مثال ساده از فایل XML دارای طراحی LinearLayout است:

مثال :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:orientation="vertical" >
   
   <TextView android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a TextView" />
      
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a Button" />
         
</LinearLayout>

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

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

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TextView android:id="@+id/text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="This is a TextView" />

<Button android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="This is a Button" />

</LinearLayout>

هنگامی که طرح شما ایجاد شده است، شما می توانید منبع طرح را از کد برنامه خود بارگذاری کنید.

متد ()Activity.onCreate بصورت زیر پیاده سازی می شود:

مثال :

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

انواع طراحی های اندروید

تعدادی از چیدمان های ارائه شده توسط Android وجود دارد که شما تقریبا در تمام برنامه های Android آن ها را بصورت متفاوت مشاهده می کنید:

ردیف	طراحی و توضیحات
۱	Linear LayoutLinearLayout یک view group است که همه زیر مجموعه ها را در یک جهت، عمودی یا افقی قرار می دهد.
۲	Relative LayoutRelativeLayout یک view group است که View های زیر مجموعه را در موقعیت های نسبی نشان می دهد.
۳	Table Layout TableLayout یک View است که سایر View ها را در قالب سطر و ستون گروه بندی می کند.
۴	Absolute LayoutAbsoluteLayout شما را قادر می سازد محل دقیق طرح های زیر مجموعه خود را مشخص کنید.
۵	Frame LayoutFrameLayout یک placeholder در صفحه است که شما می توانید برای نمایش یک View استفاده کنید.
۶	List ViewListView یک view group است که لیستی از آیتم های قابل Scroll را نمایش می دهد.
۷	Grid ViewGridView یک ViewGroup است که آیتم ها را در شبکه بندی دوبعدی قابل اسکرول نمایش می دهد.

ویژگی ها و صفات طراحی

هر طرح دارای مجموعه ای از ویژگی هایی است که خواص بصری آن طرح را تعریف می کند.

چندین ویژگی مشترک در میان همه طرح ها وجود دارد و ویژگی های دیگری هستند که مخصوص آن طرح هستند.

ردیف	صفت و توضیحات آن
۱	android:id این یک ID یکتا است که view را تعریف می کند.
۲	android:layout_width این عرض طراحی را توصیف می کند.
۳	android:layout_height این ارتفاع طراحی را توصیف می کند.
۴	android:layout_marginTop این یک فضای اضافی را در بخش بالای طرح ایجاد می کند.
۵	android:layout_marginBottom این یک فضای اضافی را در بخش پایین طرح ایجاد می کند.
۶	android:layout_marginLeft این یک فضای اضافی را در بخش چپ طرح ایجاد می کند.
۷	android:layout_marginRight این یک فضای اضافی را در بخش راست طرح ایجاد می کند.
۸	android:layout_gravity این موقعیت هر کدام از بخش های طراحی را مشخص می کند.
۹	android:layout_weight این مشخص می کند که چقدر از فضای اضافی در طرح باید به View اختصاص داده شود.
۱۰	android:layout_x مختصات x طرح را توصیف می کند.
۱۱	android:layout_y مختصات y طرح را توصیف می کند.
۱۲	android:layout_width این عرض طراحی کل است.
۱۳	android:layout_height این ارتفاع طراحی کل است.
۱۴	android:paddingLeft این مقدار فضای حاشیه داخلی سمت چپ طراحی است.
۱۵	android:paddingRight این مقدار فضای حاشیه داخلی سمت راست طراحی است.
۱۶	android:paddingTop این مقدار فضای حاشیه داخلی بالای طراحی است.
۱۷	android:paddingBottom این مقدار فضای حاشیه داخلی پایین طراحی است.

تنظیم ابعاد طرح

در ادامه به عرض و ارتفاع ابعاد طراحی اشاره شده است.

عرض و ارتفاع طراحی را می توان با توجه به dp (پیکسل های مستقل از تراکم)، sp (پیکسل های مستقل مقیاس)، pt (نقاط که ۱/۷۲ اینچ)، px ( پیکسل)، میلی متر (میلیمتر) و در نهایت در (اینچ) تعیین کرد.

شما می توانید عرض و ارتفاع را با اندازه گیری های دقیق مشخص کنید، اما اغلب شما از یکی از این ثابت ها برای تعیین عرض یا ارتفاع استفاده خواهید کرد:

android:layout_width=wrap_content : اندازه ی طراحی را مطابق با حجم محتوای آن تنظیم می کند.
android:layout_width=fill_parent : اندازه ی طرح را نسبت به طرح والد خود بزرگتر می کند.

ویژگی Gravity

ویژگی Gravity نقش مهمی در موقعیت شیء مشاهده ایفا می کند و می تواند یک یا چند (جدا از ‘|’) از مقادیر ثابت زیر را بگیرد:

ثابت	مقدار	توضیحات
top	۰x30	شیء را بدون تغییر اندازه ی آن به بالای طرح والد منتقل می کند.
bottom	۰x50	شیء را بدون تغییر اندازه ی آن به پایین طرح والد منتقل می کند.
left	۰x03	شیء را بدون تغییر اندازه ی آن به سمت چپ طرح والد منتقل می کند.
right	۰x05	شیء را بدون تغییر اندازه ی آن به سمت راست طرح والد منتقل می کند.
center_vertical	۰x10	محل شیء را بدون تغییر در اندازه در مرکز عمودی طرح والد خود قرار می دهد.
fill_vertical	۰x70	در صورت نیاز اندازه عمودی شیء را افزایش می دهد، بنابراین طرح والد آن کاملا پر می شود.
center_horizontal	۰x01	شیء را در مرکز افقی کانتینر قرار می دهد و اندازه آن را تغییر نمی دهد.
fill_horizontal	۰x07	در صورت نیاز اندازه افقی جسم را افزایش می دهد، بنابراین کانتینر آن را کاملا پر می کند.
center	۰x11	جسم را در مرکز کانتینر خود قرار دهید در هر دو محور عمودی و افقی، و اندازه آن را تغییر نمی دهد.
fill	۰x77	در صورت نیاز اندازه افقی و عمودی جسم را افزایش می دهد، بنابراین ظرفش را کاملا پر می کند.
clip_vertical	۰x80	لبه های بالا و پایین طرح فرزند را به طرح والد خود متصل می کند. و اگر اندازه طرح فرزند کافی نباشد لبه ی بالا یا پایین طرح فرزند به یکی از لبه های بالا یا پایین طرح والد می چسبد.
clip_horizontal	۰x08	مانند گزینه ی قبل اما بصورت افقی بر روی لبه های چپ و راست طرح های والد و فرزند اعمال می شود.
start	۰x00800003	طرح را به ابتدای طرح والد می برد، و اندازه آن را تغییر نمی دهد.
end	۰x00800005	طرح را به انتهای طرح والد می برد، و اندازه آن را تغییر نمی دهد.

شناسایی شیء View

یک شیء View می تواند یک شماره ID منحصر به فرد داشته باشد که به شناسایی و دسترسی به شیء View در طراحی کمک می کند.

نحوه ی تعریف ID برای شیء View بصورت زیر است:

مثال :

android:id="@+id/my_button"

1	android:id="@+id/my_button"

شرح نماد @ و + :

نماد @ در ابتدای تعریف نشان می دهد که XML باید بقیه بخش ID را تجزیه و تحلیل کند.

نماد + مشخص می کند که این یک ID جدید است که تعریف شده و باید به منابع اضافه شود.

برای ایجاد یک نمونه آبجکت View و دسترسی به آن در طرح از نمونه ی زیر استفاده کنید:

مثال :

Button myButton = (Button) findViewById(R.id.my_button);

1	Button myButton = (Button) findViewById(R.id.my_button);

کلام آخر

بخش طراحی UI در اندروید شامل طرح بندی های مختلف با گزینه های تعریف و تغییر طراحی به کمک شیء View است که به ایجاد یک طرح زیبا و منحصربه فرد برای اپلیکیشن کمک می کند از این رو مباحث این بخش را به آشنایی با طراحی UI در اندروید اختصاص دادیم.

مباحث بخش بعدی را به کنترل های طراحی UI در اندروید اختصاص می دهیم.

QR: جلسه ۱۲ : طراحی رابط کاربری در اندروید

به اشتراک بگذارید

دوره کامل آموزش اندروید ,طراحی UI در اندروید ,طراحی رابط کاربری در اندروید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۲ : طراحی رابط کاربری در اندروید

مقدمه

طراحی UI در اندروید

ساختار منطقی طراحی های اندروید

مثال-

انواع طراحی های اندروید

ویژگی ها و صفات طراحی

android:layout_weight

تنظیم ابعاد طرح

ویژگی Gravity

center_horizontal

شناسایی شیء View

کلام آخر

لیست مطالب دوره

آموزش اندروید

رابط کاربری در اندروید

مفاهیم پیشرفته در اندروید

مثال های مفید

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ