در چند فصل گذشته با LinearLayout و RelativeLayout آشنا شدید. قبل از این که بخواهیم وارد مطالب عمیق تر بشویم لازم است که با View های موجود در اندروید آشنا بشوید و بدانید چه View هایی اندروید در اختیار شما می گذارد. در واقع در این فصل سعی می کنیم همه عناصر موجود در پالت را به صورت مختصر به شما معرفی کنیم.

همه View هایی که می توانید در یک برنامه اندروید از آنها استفاده کنید، در یک پنجره در سمت چپ نمایش گرافیکی Layout ها قرار دارد. می توانید آنها را بکشید و در صفحه رها کنید. در حالت نمایش گرافیکی یا Graphical Layout پیش نمایش این View ها را می بینید.

همانطور که می بینید، چندین پالت متفاوت برای سهولت دسترسی به View ها تدارک دیده شده است. یکی یکی آنها را باز می کنیم و با View های آنها آشنا می شویم.

Form Widgets

Viewهایی که در این پالت قرار دارند، متداولترین View هایی هستند که در فرم های مختلف از آنها استفاده می شود:

TextView

هر جا که در UI خود متنی را لازم است نشان دهید، از TextView استفاده می کنید. در پالت فوق ۴ نوع TextView آماده مهیا است. معمولی (TextView)، بزرگ (Large)، متوسط (Medium) و کوچک (Small). همه اینها TextView هستند با اندازه های متفاوت فونت. وقتی یک TextView را در یک UI قرار می دهید، کد زیر به صفحه اضافه می شود:

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Some Text Here" />

TextView ویژگی های فراوانی دارد که به برخی از آنها اشاره می کنیم:

• android:text: متنی که قرار است این TextView نمایش دهد. بهترین روش استفاده از «منابع» یا resource های برنامه است که در فصل های بعد خواهید آموخت. در حال حاضر متن را مستقیماً به عنوان مقدار این ویژگی می نویسیم.
• android:hint: اگر هیچ متنی به TextView ندهیم (یعنی ویژگی android:text را تعریف نکنیم یا در کد برنامه متن خالی به این TextView نسبت دهیم)، نشانه یا Hint که اینجا تعریف کرده ایم نشان داده خواهد شد.
• android:textColor: رنگ متن را مشخص می کند. رنگ را می توانیم به چند روش معرفی کنیم که ساده ترین آن استفاده از روش کد گذاری ARGB است. در این روش هر رنگ، ترکیبی از سه رنگ اصلی (R برای قرمز، G برای سبز و B برای Blue) و میزان شفافیت (A برای آلفا یا شفافیت) است. هر رنگ با یک عدد شانزده تایی (هگزادسیمال) معرفی می شود و مقادیر مجاز از ۰۰ (مقدار صفر در سیستم ده دهی) تا FF (مقدار ۲۵۵ در سیستم ده دهی) است. در این روش مقدار شفافیت یا آلفا اختیاری است. برای نمونه تعریف رنگ سفید بدون شفافیت در این روش #FFFFFF است و تعریف رنگ سبز با میزان شفافیت ۵۰ درصد #۷F00FF00 است.
• android:textSize: اندازه قلم فونت را مشخص می کند. واحد آن در اندروید sp است. sp هم شبیه dip است با این ویژگی خاص که اگر کاربر اندازه فونت گوشی خود را تغییر دهد، این مقدار هم به تناسب تغییر می کند.
• android:textStyle: حالت فونت این TextView را می توانید تغییر دهید. مقادیر مجاز اینها است: bold و italic و bolditalic
• android:gravity: متن داخل TextView به صورت پیش فرض چپ به راست. اگر بخواهید متن نمایش داده شده در TextView از سمت راست نمایش داده شود، می توانید gravity آن را right انتخاب کنید. عملکرد این ویژگی شبیه عملکرد Gravity در LinearLayout است.
• و …

Button

دکمه ها عناصری هستند که کاربر می تواند روی آنها کلیک کند. وقتی یک Button یا دکمه به UI خود اضافه کنید، کد زیر به صفحه شما اضافه می شود:

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />

در پالت دو نوع دکمه وجود دارد: دکمه معمولی و دکمه کوچک. تنها تفاوت اینها در اندازه قلم متن دکمه است. بسیاری از ویژگی های دکمه شبیه TextView است.

در این بخش برخی از ویژگی های کاربردی دکمه یا Button را معرفی می کنیم:

•  android:background: اگر بخواهید تصویر پس زمینه دکمه را عوض کنید، می توانید یک رنگ، عکس، کشیدنی (drawable) را به عنوان پس زمینه دکمه تعریف کنید.
• android:enabled: دکمه ها به صورت پیش فرض کلیک شدنی هستند. ولی اگر بخواهید می توانید با فرستادن مقدار false به این ویژگی دکمه را غیز فعال کنید.
• android:onClick: اگر بخواهید یک تابع تعریف کنید تا هر زمان که روی این دکمه کلیک شد آن تابع صدا زده شود، نام تابع را اینجا بنویسید.
• android:soundEffectsEnabled: به صورت پیش فرض با کلیک کردن بر روی دکمه ها صدایی پخش می شود که حس کلیک کردن بر روی دکمه را به کاربر القا می کند. با استفاده از این ویژگی می توانید این صدا را فعال یا غیر فعال کنید.
• android:drawableTop: به غیر از تغییر پس زمینه (Background) یک دکمه، می توانید یک تصویر را در دکمه در کنار متن نشان دهید. اگر می خواهید این تصویر بالای متن دکمه قرار بگیرد، می توانید عکس یا کشیدنی (drawable) مربوطه را از از طریق این ویژگی معرفی کنید.
• android:drawableBottom: مشابه قبلی است با این تفاوت که عکس را در پایین نوشته نشان می دهد.
• android:drawableLeft: مشابه قبلی است با این تفاوت که عکس را در سمت چپ نوشته نشان می دهد.
• android:drawableRight: مشابه قبلی است با این تفاوت که عکس را در سمت راست نوشته نشان می دهد.

تمام ویژگی هایی که برای TextView گفتیم، در Button ها هم معتبر هستند و کار می کنند.

ToggleButton

دکمه ها دو حالت دارند. فشرده و عادی. دکمه (Button) به محض این که دست از روی آن برداشته می شود، از حالت فشرده به حالت عادی بر می گردد. اما ToggleButton ها وقتی که دست از روی آنها برداشته می شود، حالتشان عوض نمی شود. اگر دکمه یا Button را مثل دکمه های زنگ خانه ها در نظر بگیرید، ToggleButton ها شبیه دکمه های خاموش روشن کردن لامپها هستند. ToggleButton ها در صورتی که فشرده باشند، یک نوار سبز رنگ در پایین نشان می دهند و متن آنها تغییر می کند (مثلاً Off) می شود. در غیر این صورت این نوار خاکستری رنگ و متن آنها مثلاً On می شود.

وقتی یک ToggleButton به UI خود اضافه کنید، کد زیر به صفحه شما اضافه می شود:

<ToggleButton
    android:id="@+id/toggleButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="ToggleButton" />

ویژگی های ToggleButton شبیه TextView و Button است. در این قسمت چند ویژگی ToggleButtoon را توضیح می دهیم:

•  android:checked: اگر true باشد، وضعیت دکمه در حالت فشرده و در غیر این صورت در حالت عادی خواهد بود.
• android:textOn: متن دکمه برای وقتی که در حالت فشرده است.
• android:textOff: متن دکمه برای وقتی که در حالت عادی است.

CheckBox

چک باکس یک دکمه است با یک متن و یک جعبه که کاربر می توان را تیک بزند:

وقتی یک CheckBox به UI اضافه می کنید، کد زیر به صفحه شما افزوده می شود:

<CheckBox
    android:id="@+id/checkBox1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="I agree." />

ویژگی های چک باکس شبیه TextView و Button است. اگر مقدار ویژگی android:checked برابر true باشد، چک باکس تیک خورده و در غیر این صورت عادی نشان داده می شود.

RadioButton

دکمه رادیویی یا RadioButton شبیه چک باکس است. تنها تفاوت RadioButton و CheckBox در این است که چندین دکمه  رادیویی را می توان با هم گروه کرد. در این حالت از میان دکمه های رادیویی گروه شده با هم، در هر رمان فقط یکی می توان تیک خورده شود.

وقتی یک RadioButton به UI اضافه می کنید، کد زیر به صفحه شما افزوده می شود:

<RadioButton
    android:id="@+id/radioButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="RadioButton" />

ویژگی های RadioButton شبیه TextView و Button است و نیازی به تکرار آن ها نیست.

RadioGroup

برای گروه کردن چند دکمه رادیویی یا RadioButton با هم از RadioGroup استفاده می کنیم. RadioGroup قابل دیدن نیست و تنها خاصیتی که دارد، گروه کردن RadioButton ها است. کد یک RadioGroup با RadioButton داخلش، شبیه کد زیر است:

<RadioGroup
    android:id="@+id/radioGroup1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <RadioButton
        android:id="@+id/radio0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Option One" />

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option Two" />

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option Three" />
</RadioGroup>

مهم ترین ویژگی RadioGroup ویژگی android:orientation است. اگر مقدار این ویژگی را horizontal تعریف کنیم، همه RadioButton ها در محور افقی قرار می گیرند:

CheckedTextView

مواقعی پیش می آید که می خواهید در کنار برخی عناوین تیک یا ضربدر بزنید. مثلاً در صورت موجودی یک کالا در فروشگاه، در کنار متن «موجود». در این مواقع از CheckedTextView استفاده می کنید. تنها تفاوت CheckedTextView و CheckBox در این است که وضعیت چک باکس را کاربر می تواند تغییر دهد ولی وضعیت CheckedTextView فقط توسط برنامه تغییر می کند.

وقتی یک CheckBox به UI اضافه می کنید، کد زیر به صفحه شما افزوده می شود:

<CheckedTextView
    android:id="@+id/checkedTextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Available" />

می توانید تصاویر مربوط به دو حالت check خورده و حالت عادی را انتخاب کنید. من قبلاً دو عکس با نامهای ic_checked و ic_not_checked را به برنامه اضافه کرده ام و حالا می خواهم از این دو عکس برای حالت های مختلف CheckedTextView استفاده کنم:

کد کامل این CheckedTextView این است:

<CheckedTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checkMark="@drawable/check_selector"
    android:text="Available:" />

توضیح: برای ویژگی checkMark از امکانی در اندروید استفاده کرده ایم به نام selector که در فصل های بعدی به آن اشاره خواهیم کرد.

Spinner

Spinner چیزی شبیه کمبوباکس در صفحات وب و برنامه های ویندوزی است:

وقتی که روی آن کلیک کنید، به شکل زیر باز می شود:

در آینده یک فصل کامل استفاده از Spinner را آموزش خواهم داد.

ProgressBar

ProgressBar نواری است که میزان پیشرفت کاری را نشان می دهد. مثلاً فرض کنید فایلی را دانلود می کنید. می خواهید کاربرد میزان دانلود شده فایل و درصد آن را ببیند. برای این کار از ProgressBar استفاده می کنیم:

این ProgressBar افقی است. کد این ProgressBar این است:

<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progress="45" />

گاهی اوقات ما نمی خواهیم از ProgressBar افقی استفاده کنیم و فقط می خواهیم به کاربر نشان دهیم فرایندی در حال اجرا است. مثل حالت loading معروف. برای این حالت از شکل دیگری از ProgressBar استفاده می کنیم:

این ProgressBar را اصطلاحاً دایره ای می نامیم. کد این ProgressBar این است:

<ProgressBar
    android:id="@+id/progressBar1"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

نکته: احتمالاً می گویید این که میله (Bar) نیست، پس چرا ProgressBar نامیده می شود؟ به جای این که از من بپرسید از برنامه نویسان گوگل باید بپرسید!

QuickContactBadge

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

RatingBar

از RatingBar برای امتیاز دادن به چیزی استفاده می شود. مثلاً فرض کنید از کاربران می خواهید به مطلب شما امتیاز بدهند. این امتیاز در قالب ستاره است. برای این کار از RatingBar استفاده می کنیم:

مهم ترین ویژگی های RatingBar اینها است:

• android:numStars: تعداد ستاره های RatingBar را می توانید با استفاده از این ویژگی تعیین کنید. مقدار پیش فرض ۵ است.
• android:rating: در صورت اضافه کردن این ویژگی، امتیاز روی ستاره ها نشان داده می شود. مثلاً اگر تعداد ستاره ها ۵ باشد و ما مقدار این ویژگی را ۳٫۵ اعلام کنیم، ۳٫۵ ستاره به رنگ آبی در می آیند و امتیاز را نشان می دهند.

با افزودن RatingBar با ۳ ستاره و امتیاز ۱٫۵ به صفحه، این کد به صفحه اضافه می شود:

<RatingBar
    android:id="@+id/ratingBar1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="3"
    android:rating="1.5"/>

Switch

کارکرد سوییچ (Switch) شبیه کارکرد چک باکس یا ToggleButton است. بیشترین استفاده آن در تنظیمات برنامه ها است. جایی که می توان یک ویژگی را فعال یا غیرفعال کرد:

توجه: Switch مختص اندرویدهای ۴ به بعد است و در نسخه های قبلی اندروید وجود ندارد. بنابراین فقط در برنامه هایی می توانید از آن استفاده کنید که minSdkVersion آنها ۱۴ یا بیشتر باشد.

با اضافه کردن سوییچ به UI کد زیر به Layout شما اضافه می شود:

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="false"
    android:text="WiFi" />

ویژگی های مهم Switch این ها است:

• android:text: متنی که در کنار سوییچ نشان داده می شود. در مثال ما WiFi
• android:textOn: متنی که در حالتی که android:checked برایر true باشد، بر روی سوییچ نمایش داده می شود. پیش فرض On است.
• android:textOff: متنی که در حالتی که android:checked برایر false باشد، بر روی سوییچ نمایش داده می شود. پیش فرض Off است.

---

TextFields

تکست فیلدها، جایی هستند که کاربر متنی را وارد می کند. View یی که در این حالت به UI برنامه افزوده می شود، EditText است. وقتی که کاربر بر روی یک ادیت تکست کلیک می کند، صفحه کلید نمایش داده می شود و کاربر می تواند متن مورد نظر خود را وارد کند. همه EditText هایی که در اینجا معرفی شده اند، در یک ویژگی اصلی با هم تفاوت دارند: inputType. این ویژگی مشخص می کند که برنامه باید انتظار چه نوع متنی را داشته باشد و به تناسب آن صفحه کلید را نمایش می دهد. مثلاً اگر مقدار inputType برابر phone باشد، صفحه کلید نمایش داده شده، کلیدهای عددی ۰ تا ۹ را به همراه کلیدهای * و # نمایش می دهد.

وقتی یک EditText به UI خود اضافه می کنید، کد زیر به Layout شما افزوده می شود:

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

حالا برای انواع مختلف EditText کافی است ویژگی android:inputType را مقداردهی مناسب بکنید:

 

AutoCompleteTextView

AutoCompleteTextView برای کمک به کاربر در انتخاب متن از میان متن هایی است که مقدار آنها قبلاً مشخص شده است. برای مثال اگر در یک برنامه email کاربر بخواهد ایمیل یک مخاطب را به عنوان گیرنده وارد کند، برنامه به کمک این View می تواند به کاربر در انتخای صحیح ایمیل گیرنده کمک کند. برای مثال اگر کاربر وارد کند info، برنامه همه مخاطبانی که ایمیل آنها با info آغاز می شود را به کاربر نشان می دهد تا کاربر بتواند از میان آنها یکی را انتخاب کند. البته کاربر مجبور به انتخاب از میان گزینه های موجود نیست و می تواند متن مورد نظر خود را نیز وارد کند.

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

MultiAutoCompleteTextView

MultiAutoCompleteTextView شبیه AutoCompleteTextView عمل می کند با یک تفاوت اصلی، کاربر می تواند چندین عبارت را در آن وارد کند. اگر به همان مثال email برگردید، اگر کاربر بخواهد یک ایمیل را به دو یا چند نفر ارسال کند، می تواند بعد از انتخاب نفر اول، مجدداً شروع به نوشتن کند و از میان پیشنهادهای موجود یک گیرنده دیگر را نیز انتخاب کند و این کار را به هر تعداد که خواست تکرار کند.

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

---

ادامه دارد…