۱
آبان

جلسه ۱۳ : کنترل های طراحی در اندروید

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

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

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش برنامه نویسی اندروید را دنبال می کنند. Input control (کنترل ورودی) از اجزای تعاملی در رابط کاربری برنامه شما محسوب می شود. آندروید شامل طیف گسترده ای از کنترل هایی است که می توانید در رابط کاربری خود استفاده کنید از جمله کنترل های button ، فیلد text ، جعبه جستجو، check box، zoom button، دکمه های تعویض و بسیاری موارد دیگر را بر حسب نیاز می توانید در طراحی اپلیکیشن خود استفاده کنید. حالا برای آشنایی با کنترل های طراحی در اندروید در ادامه مباحث این آموزش با ما همراه باشید.

کنترل های طراحی در اندروید

در این مبحث برای آشنایی با کنترل های طراحی در اندروید ما شما را با انواع کنترل های ورودی و نحوه تعریف آن ها آشنا می کنیم.

کنترل های طراحی در اندروید

View یک آبجکت است که طرحی را روی صفحه نمایش قرار می دهد که کاربر بوسیله ی آن می تواند با برنامه ارتباط گرفته و تعامل داشته باشد.

ViewGroup نیز یک آبجکت است که چند آبجکت View را به منظور تعریف رابط کاربری برنامه حفظ می کند.

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

به عنوان مثال یک طراحی ساده ی عمودی با یک text view و یک button در اندروید بصورت زیر است:

مثال :

<?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="I am a TextView" />
   
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="I am 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="I am a TextView" />

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

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="I am a Button" />

</LinearLayout>

کنترل های UI در اندروید

تعدادی از کنترل رابط کاربری ارائه شده توسط Android وجود دارد که به شما امکان ایجاد رابط کاربری گرافیکی مناسب با برنامه شما را می دهد:

ردیف	طراحی UI و توضیحات مربوطه
۱	TextViewاین کنترل برای نمایش متن به کاربر استفاده می شود.
۲	EditTextEditText یک زیر کلاس از پیش تعریف شده از TextView است که شامل قابلیت های پیشرفته ویرایش است.
۳	AutoCompleteTextView AutoCompleteTextView یک View است که مشابه EditText است، به جز اینکه لیستی از پیشنهادات تکمیلی متن را به طور خودکار در حالی که کاربر تایپ می کند، نشان می دهد.
۴	Buttonbutton آبجکتی است که با فشاردادن و یا کلیک شدن توسط کاربر یک عمل تعریف شده را انجام می دهد.
۵	ImageButton ImageButton یک AbsoluteLayout است که محل دقیق آبجکت های فرزند را مشخص می کند، همچنین یک button به همراه یک تصویر را نمایش می دهد.
۶	CheckBox یک Box که می تواند توسط کاربر انتخاب شود که در این صورت با علامت تیک مشخص می شود، و برای انتخاب اختیاری گزینه هاست.
۷	ToggleButton یک butoon از نوع on/off را تعریف می کند که یکی از دو وضعیت فعال و خاموش را دارد.
۸	RadioButton آبجکتی دو وضعیتی که امکان انتخاب یا انتخاب نشدن یک گزینه را فراهم می کند.
۹	RadioGroup برای گروه بندی و دسته بندی تعدادی از RadioButton ها استفاده می شود.
۱۰	ProgressBar یک نوار پیشرفت که برای نشان دادن میزان پیشرفت فرآیندی استفاده می شود.
۱۱	Spinnerیک لیست drop-down که به کاربر اجازه ی انتخاب آیتم های آن را می دهد.
۱۲	TimePickerشی ء TimePicker کاربر را قادر می سازد تا زمان روز را در قالب ۲۴ ساعته و یا AM/PM نمایش دهد.
۱۳	DatePickerنمای DatePicker کاربر را قادر می سازد تا یک تاریخ روز را انتخاب کند.

ایجاد کنترل UI

کنترل های Input اجزای تعاملی کاربر در اپلیکیشن شما است.

آندروید طیف گسترده ای از کنترل هایی را که می توانید در رابط کاربری خود استفاده کنید مانند button، فیلد text ، دکمه های زوم، check box و … را ارائه می دهد.

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

ساختار تعریف ID برای یک آبجکت View بصورت زیر است:

مثال :

android:id="@+id/text_id"

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

برای ایجاد یک UI Control/View/Widget شما باید یک view/widget را در فایل layout تعریف کنید:

مثال :

<?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_id"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="I am a TextView" />
</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_id"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="I am a TextView" />

</LinearLayout>

سپس نهایتا یک نمونه از شیء کنترل را ایجاد کنید، برای این منظور از نمونه زیر استفاده کنید:

مثال :

TextView myText = (TextView) findViewById(R.id.text_id);

1	TextView myText = (TextView) findViewById(R.id.text_id);

کلام آخر

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

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

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

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

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

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

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

جلسه ۱۳ : کنترل های طراحی در اندروید

مقدمه

کنترل های طراحی در اندروید

کنترل های UI در اندروید

ایجاد کنترل UI

کلام آخر

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

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

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

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

مثال های مفید

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ