لایه های UI - در برنامه نویسی اندروید

بلوک اصلی برای UI در اندروید یک شی View است که از کلاس View ایجاد می شود و یک ناحیه مستطیل شکل روی صفحه را اشغال می کند و وظیفه ترسیم و مدیریت رویداد را بر عهده دارد. View کلاس پایه برای ویجت ها است که برای ایجاد اجزای UI تعاملی در اندروید مانند دکمه ها، فیلدهای متنی و غیره استفاده می شود.

ViewGroup یک زیر کلاس از کاس View است و محفظه نامرئی را ارائه میدهد که سایر View ها یا سایر ViewGroup ها را نگه می دارد و ویژگی های طرح بندی آنها را تعریف می کند.

ساختار چینش

در سطح سوم ما طرح‌بندی‌های مختلفی از UI در اندروید داریم که زیر کلاس‌های کلاس ViewGroup هستند. یک طرح‌بندی معمولی ساختار بصری یک UI در اندروید را تعریف می‌کند و می‌تواند در زمان اجرا با استفاده از View ایجاد شود.

Android Layout

طرح بندی گرافیک

این آموزش بیشتر در مورد ایجاد رابط کاربری گرافیکی بر اساس طرح بندی های تعریف شده در فایل XML است و توضیحات اولیه را بطور کامل بیان کرده ایم. یک طرح بندی ممکن است حاوی هر نوع ویجت مانند دکمه ها، برچسب ها، جعبه متن و … باشد. در زیر یک مثال ساده از فایل 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="این یک TextView است" />
      
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="این یک Button است" />
      
   <!-- دیگر GUI اجزا اینجا قرار میگیرند -->
   
</LinearLayout>

هنگامی که طرح‌بندی شما ایجاد شد، می‌توانید منبع طرح‌بندی را از کد برنامه خود، در اجرای متد ()Activity.onCreate بارگیری کنید، همانطور که در کدهای زیر نشان داده شده است:

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

انواع لایه ها در اندروید

تعدادی Layout برای UI در اندروید ارائه شده است که تقریباً در تمام برنامه ها برای UI در اندروید برای ظاهر و احساس متفاوت از آنها استفاده خواهید کرد. در جدول پایین تعدادی از این لایه ها را آورده ایم و موارد استفاده هر کدام را توضیح داده ایم:

لایه ها و توضیحات ردیف
Linear Layout

LinearLayout یک ViewGroup است که همه فرزندان را در یک جهت، عمودی یا افقی تراز یا چینش میکند.

1
Relative Layout

RelativeLayout یک ViewGroup است که نماهای فرزند را در موقعیت های نسبی نمایش می دهد.

2
Table Layout

TableLayout نمایی است که نماها را در ردیف ها و ستون ها گروه بندی می کند.

3
Absolute Layout

AbsoluteLayout شما را قادر می سازد مکان دقیق فرزندان خود را مشخص کنید و بر روی موقعیت دقیق هر view اشراف داشته باشید.

4
Frame Layout

FrameLayout یک مکان نگهدار روی صفحه است که می توانید از آن برای نمایش یک نما استفاده کنید.

5
List View

ListView یک ViewGroup است که لیستی از موارد قابل پیمایش را نمایش می دهد.

6
Grid View

GridView یک ViewGroup است که موارد را در یک شبکه دو بعدی و قابل پیمایش نمایش می دهد.

7

لایه های زیادی وجود دارند که در بالا پراستفاده ترین آنها را آورده ایم.

Attributeهای مهم یک ViewGroup

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

ویژگی و توضیحات1 ردیف
android:id

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

1
android:layout_width

عرض لایه را مشخص میکند و بر اساس اندازه ای که تنظیم میشود فضا را پر میکند.

2
android:layout_height

ارتفاع لایه را مشخص میکند و بر اساس اندازه ای که تنظیم میشود فضا را پر میکند.

3
android:layout_gravity

نحوه قرارگیری نما view را مشخص می کند و مشخص میکنید که view در کدام قسمت از والد قرار بگیرد.

4
android:layout_weight

مشخص می کند که چه مقدار از فضای اضافی در طرح باید به View اختصاص یابد.

5
android:layout_x

مختصات x چیدمان را مشخص می کند.

6
android:layout_y

مختصات y طرح را مشخص می کند.

7

ویژگی های فاصله گذاری

ویژگی و توضیحات1 ردیف
android:layout_marginTop

فضای اضافی در سمت بالای طرح اضافه میکند و حس میکنید که از بالا دور شده است.

1
android:layout_marginBottom

فضای اضافی در سمت پایین طرح اضافه میکند و حس میکنید که از پایین دور شده است.

2
android:layout_marginLeft

فضای اضافی در سمت چپ طرح اضافه میکند و حس میکنید که از چپ دور شده است.

3
android:layout_marginRight

فضای اضافی در سمت راست طرح اضافه میکند و حس میکنید که از راست دور شده است.

4
android:paddingLeft

از سمت چپ فضای اضافی را داخل خود ویو را پر میکند و حس میکنید که از چپ فاصله گرفته است.

5
android:paddingRight

از سمت راست فضای اضافی را داخل خود ویو را پر میکند و حس میکنید که از راست فاصله گرفته است.

6
android:paddingTop

از سمت بالا فضای اضافی را داخل خود ویو را پر میکند و حس میکنید که از بالا فاصله گرفته است.

7
android:paddingBottom

از سمت پایین فضای اضافی را داخل خود ویو را پر میکند و حس میکنید که از پایین فاصله گرفته است.

8

عرض و ارتفاع یک View

در اینجا عرض و ارتفاع ابعاد layout/view وجود دارد که می‌توان آن را بر حسب dp (پیکسل‌های مستقل از چگالی)، sp (پیکسل‌های مستقل از مقیاس)، pt (نقاط 1/72 اینچ)، px( پیکسل)، میلی متر (میلی متر) و در نهایت بر حسب (اینچ) مشخص کرد.

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

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

مقادیر ویژگی Gravity

ویژگی Gravity نقش مهمی در موقعیت‌یابی شی view ایفا می‌کند و می‌تواند یک یا چند عدد از مقادیر ثابت زیر را با «|» از هم جدا کند.

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

شناسایی view در xml

یک شی view ممکن است یک شناسه منحصر به فرد به آن اختصاص داده شود که View را به طور منحصر به فرد در ViewGroup شناسایی می کند. سینتکس یک ID در داخل یک تگ XML به این شکل است و میتوانید ویو را با یک شناسه منحصر به فرد مشخص کنید:

android:id="@+id/my_button"

در ادامه توضیحات مختصری درباره علائم @ و + ارائه شده است :

  • علامت at-(@) در ابتدای رشته نشان می دهد که تجزیه کننده XML باید بقیه رشته ID را تجزیه و گسترش دهد و آن را به عنوان یک منبع ID شناسایی کند.
  • علامت مثبت (+) به این معنی است که این یک نام منبع جدید است که باید ایجاد و به منابع ما اضافه شود.

شناسایی view در کلاس

برای ایجاد یک نمونه از شی view و گرفتن آن از طرح در کلاس، از کدهای زیر باید استفاده کنید:

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

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر نیاز است تا ابتدا وارد سایت شوید.

هیچ نظری ارسال نشده است.

قیمت آموزش
رایگان
نوع دسترسی
رایگان

این مقاله در حال حاضر تنها به روش رایگان در دسترس می باشد.

ناصر خالدی
مدرس دوره

ناصر خالدی

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

گفتگوی برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن

دوره های پیشنهادی

مقالات پیشنهادی

جاوا اسکریپت

جاوا اسکریپت یک زبان پویا و محبوب مبتنی بر شیء, داینامیک و مفسری می باشد. این زبان برای برنامه نویسی سمت سرور و کلاینت استفاده میشود که ...


۸۶۷
۰
۱۳ آذر ۱۳۹۹

پی اچ پی - PHP

با استفاده از این زبان می توان وب سایت های پویا طراحی کرد, این زبان می تواند با HTML ادغام شود, در حقیقت یک زبان اسکریپتی متن باز و رایگان است. یعنی زمانی که سرور درخواست ...


۹۴۵
۰
۱۳ آذر ۱۳۹۹

اندروید

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


۱۰۵۴
۰
۲۹ آبان ۱۳۹۹

بک لینک چیست؟

بک لینک (Back Link) به لینک دادن یک سایت به سایت دیگر گفته میشود که یک فاکتور مهم و اساسی در سئو هر سایتی می باشد.


۹۹۱
۰
۲۲ آذر ۱۳۹۹

Fatal error: Uncaught wfWAFStorageFileException: Unable to verify temporary file contents for atomic writing. in /home/clonerco/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php:52 Stack trace: #0 /home/clonerco/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php(659): wfWAFStorageFile::atomicFilePutContents('/home/clonerco/...', '<?php exit('Acc...') #1 [internal function]: wfWAFStorageFile->saveConfig('livewaf') #2 {main} thrown in /home/clonerco/public_html/wp-content/plugins/wordfence/vendor/wordfence/wf-waf/src/lib/storage/file.php on line 52