در چند فصل گذشته با 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 به کمی کدنویسی نیاز است که در آینده به آن می پردازیم.
ادامه دارد…
سپاس فراوان از ارائه آموزش های خوب شما
سپاس فراکاو!
عالیه. ماشالله با حوصله و خوب توضیح میدین.
اما مثل این که سیکبار رو از قلم انداختین.
در خصوص سیکبار سوالی دارم امیدوارم جوابشو شما بدونید:
چطور میشه سیک بار رو از راست به چپ تغییر داد؟
سلام
سپاسگزارم بابت محبتتون.
درباره سیک بار راست به چپ میتونید از این کتابخونه کدباز استفاده کنید:
https://github.com/AnderWeb/discreteSeekBar
این کامپوننت رو میتونید تنظیم کنید تا راست به چپ بشه.
با سلام و تشکر از زحمات شما
در زمینه پردازش تصویر در اندروید آموزش یا رفرنسی دارید ؟
سلام. برای پردازش تصویر میتوانید از کتابخانه کدباز openCV استفاده کنید.
ye soal azatun daram, mamnun misham ag javab bedid. mikham ba click bar ruye Button natije amaliat neshun dade beshe vali na kutah modat az tarighe Toast, balke natije ta zamani k panjare barname baste she baghi bemanad. mayelam bedunam az che abzari dar view bayad estefade konam mese lable dar java ya c# mamnun misham ag rahnamaeim konid
استاد متشکریم دستتون طلا تنتون سالم و ایشالا هر روز انگیزتون برا نوشتن مطالب بیشتر باشه خیر ببینین
سلام
ممنون از آموزش های خوبتون بسیار عالی توضیح میدین
انشالا موفق و پیروز باشید و برای ما هم بیشتر و بیشتر مطلب بذارید 🙂
خیلی عالی و روون هست اموزش هاتون.
ممنونم ازتون.خدا خیرتون بده.
متشکرم