در این قسمت میخواهیم برخی از viewهای مهم در ساخت رابط کاربری را به طور مختصر معرفی کنیم.
Text View
یک TextView معمولا برای نمایش متن به کار میرود. این متن را میتوان به صورت مستقیم، از طریق strings.xml یا به صورت html به TextView اختصاص داد.
<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="This is a test" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/test" />
خصوصیتهایی که برای شخصیسازی قابل تغییر هستند شامل موارد زیر است:
تعداد خطوط نمایش داده شده | android:lines=”int” |
تعداد حداکثر خطوط قابل نمایش | android:maxLines=”int” |
اندازه نوشته | android:textSize=”size” |
رنگ نوشته | android:textColor=”color” |
Button
یک Button معمولا شامل یک متن و یا یک تصویر (یا هر دو) است که مشخص کننده یک عملیات وقتی که کاربر آن را لمس میکند است.
بر اساس کاربرد آن به یکی از سه شکل زیر میتوان یک Button را تعریف کرد.
- به همراه متن با استفاده از Button
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_text" ... />
- به همراه تصویر با استفاده از ImageButton
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/button_icon" android:contentDescription="@string/button_icon_desc" ... />
- به همراه متن و تصویر با استفاده از Button و خصوصیت android:drawableLeft (android:drawableRight)
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_text" android:drawableLeft="@drawable/button_icon" ... />
برای مدیریت کلیک بر روی Button دو راه پیش رو داریم:
استفاده از android:onClick
با استفاده از خصوصیت android:onClick در هنگام تعریف Button در Layout مورد نظر میتوان کلیک بر روی Button را مدیریت کرد، به این صورت که اسم متدی که در Activity مورد نظر مدیریت کلیک را بر عهده دارد را به خصوصیت android:onClick اختصاص میدهیم.
<Button xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" />
که در Activity به صورت زیر تعریف شده است:
/** Called when the user touches the button */ public void sendMessage(View view) { // Do something in response to button click }
باید در نظر داشت که اسم متدی که به خصوصیت android:onClick اختصاص میدهیم باید موارد زیر را رعایت کند
- حتما public باشد
- حتما مقدار void را بازگرداند
- حتما تنها پارامتر ورودی آن View باشد
استفاده از OnClickListener
میتوان مدیریت کلیک را بیرون از Layout انجام داد. این کار زمانی مفید است که Button را در کدهای برنامهی خود تولید میکنید و یا میخواهید مدیریت کلیک را در زیرکلاسهای Fragment مربوطه انجام دهید.
برای انجام این کار کافیاست یک شئ از View.OnClickListener تولید نموده و آن را به setOnClickListener(View.OnClickListener) اختصاص دهید.
Button button = (Button) findViewById(R.id.button_send); button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Do something in response to button click } });
Image View
یک ImageView برای نمایش یک تصویر به کار میرود. این تصویر میتواند از منابع داخل برنامه باشد یا از طریق اینترنت دانلود شود و یا از محتوای داخل دستگاه کاربر باشد.
<ImageView android:id="@+id/simpleImageView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/lion" />
یکی از خصوصیاتی که در ImageViewها مورد استفاده قرار میگیرد android:scaleType است که نحوه قرار گیری تصویر در فضای مورد نظر را مشخص میکند. مقادیر این خصوصیت شامل
بدون تغییر در اندازه در مرکز فضا | CENTER |
به طور یکنواخت اندازه تصویر را تغییر میدهد تا تصویر اندازه بزرگترین بعد فضا شود | CENTER_CROP |
به طور یکنواخت اندازه تصویر را تغییر میدهد تا تصویر به طور کامل در فضا قرار گیرد | CENTER_INSIDE |
اندازه تصویر را از مرکز تغییر میدهد | FIT_CENTER |
اندازه تصویر را از انتهای فضا تغییر میدهد | FIT_END |
اندازه تصویر را از ابتدای فضا تغییر میدهد | FIT_START |
اندازه تصویر را به گونهای تغییر میدهد که فضای مورد نظر را پر کند | FIT_XY |
بر اساس ماتریس تصویر اندازه را تغییر میدهد | MATRIX |
Check Box
برای انتخاب یک یا چند مورد از یک مجموعه معمولا از CheckBox استفاده میشود، و معمولا به صورت لیست عمودی به نمایش گذاشته میشوند.
برای ایجاد هر یک از CheckBox در Layout یک CheckBox اضافه میکنیم. بخاطر اینکه مجموعهای از CheckBoxها به کاربر امکان انتخاب چند مورد را میدهد، هر CheckBox به طور جداگانه مدیریت میشود.
مدیریت کلیک روی چک باکس
با استفاده از خصوصیت android:onClick در هنگام تعریف CheckBox در Layout مورد نظر میتوان کلیک بر روی CheckBox را مدیریت کرد، به این صورت که اسم متدی که در Activity مورد نظر مدیریت کلیک را بر عهده دارد را به خصوصیت android:onClick اختصاص میدهیم.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <CheckBox android:id="@+id/checkbox_meat" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/meat" android:onClick="onCheckboxClicked"/> <CheckBox android:id="@+id/checkbox_cheese" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/cheese" android:onClick="onCheckboxClicked"/> </LinearLayout>
که در Activity به صورت زیر تعریف شده است:
public void onCheckboxClicked(View view) { // Is the view now checked? boolean checked = ((CheckBox) view).isChecked(); // Check which checkbox was clicked switch(view.getId()) { case R.id.checkbox_meat: if (checked) // Put some meat on the sandwich else // Remove the meat break; case R.id.checkbox_cheese: if (checked) // Cheese me else // I'm lactose intolerant break; // TODO: Veggie sandwich } }
باید در نظر داشت که اسم متدی که به خصوصیت android:onClick اختصاص میدهیم باید موارد زیر را رعایت کند
- حتما public باشد
- حتما مقدار void را بازگرداند
- حتما تنها پارامتر ورودی آن View باشد
نکته: برای تغییر وضعیت CheckBox میتوان از setChecked(Boolean) یا toggle() استفاده کرد.
Radio Button
برای انتخاب یک گزینه از گزینههای موجود میتوان از RadioButton استفاده کرد. هنگامی از RadioButton استفاده میکنیم که بخواهیم تمامی گزینهها را به کاربر نشان دهیم در غیر اینصورت بهتر از Spinner استفاده کنیم.
برای ایجاد هر کدام از این Radio Buttonها کافی است از کلاس RadioButton در Layout خود استفاده کنید، اما، بخاطر اینکه هر یک از RadioButtonها منحصر به فرد هستند باید تمامی آنها را به صورت مجموعه به داخل یک RadioGroup ببرید. با گروهبندی آنها، میتوان مطمئن بود که فقط یکی از آنها انتخاب شده است.
مدیریت کلیک روی Radio Button
با استفاده از خصوصیت android:onClick در هنگام تعریف RadioButton در Layout مورد نظر میتوان کلیک بر روی RadioButton را مدیریت کرد، به این صورت که اسم متدی که در Activity مورد نظر مدیریت کلیک را بر عهده دارد را به خصوصیت android:onClick اختصاص میدهیم.
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <RadioButton android:id="@+id/radio_pirates" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/pirates" android:onClick="onRadioButtonClicked"/> <RadioButton android:id="@+id/radio_ninjas" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/ninjas" android:onClick="onRadioButtonClicked"/> </RadioGroup>
که در Activity به صورت زیر تعریف شده است:
public void onRadioButtonClicked(View view) { // Is the button now checked? boolean checked = ((RadioButton) view).isChecked(); // Check which radio button was clicked switch(view.getId()) { case R.id.radio_pirates: if (checked) // Pirates are the best break; case R.id.radio_ninjas: if (checked) // Ninjas rule break; } }
باید در نظر داشت که اسم متدی که به خصوصیت android:onClick اختصاص میدهیم باید موارد زیر را رعایت کند
- حتما public باشد
- حتما مقدار void را بازگرداند
- حتما تنها پارامتر ورودی آن View باشد
نکته: برای تغییر وضعیت RadioButton میتوان از setChecked(Boolean) یا toggle() استفاده کرد.
Toggle Buttons
یک Toggle Button به کاربر اجازه میدهد از دوحالت یکی را انتخاب کند.
میتوان از یک ToggleButton به صورت ابتدایی استفاده کرد. از اندروید ۴.۰ به بعد یک ToggleButton جدید به نام Switch اضافه شد که به صورت کشیدنی امکان تغییر حالت را میدهد. با استفاده از SwitchCompat میتوان این قابلیت را به اندرویدهیا ۲.۱ نیز برد.
برای تغییر وضعیت دکمه میتوان از CompoundButton.setChecked() و یا CompoundButton.toggle() استفاده کرد.
مدیریت کلیک روی ToggleButton
برای اینکه تشخیص بدهیم که کاربر وضعیت دکمه را تغییر داده است یک CompoundButton.OnCheckedChangeListener تعریف میکنیم و آن را به setOnCheckedChangeListener() اختصاص میدهیم:
ToggleButton toggle = (ToggleButton) findViewById(R.id.togglebutton); toggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) { // The toggle is enabled } else { // The toggle is disabled } } });
Spinner
یک راه سریع برای انتخاب یک گزینه از میان مجموعه گزینهها Spinner است. در حالت پیشفرض، یک Spinner گزینه فعلی را نشان میدهد، با کلیک بر روی آن یک منو باز میشود که بقیه گزینهها را شامل میشود، که کاربر میتواند یکی از آنها را انتخاب کند.
برای اضافه کردن یک Spinner به صورت زیر عمل میکنیم:
<Spinner android:id="@+id/planets_spinner" android:layout_width="fill_parent" android:layout_height="wrap_content" />
برای ایجاد گزینهها باید یک SpinnerAdapter در Activity یا Fragment ایجاد کنیم.
ایجاد گزینههای Spinner
گزینههای مورد استفاده در Spinner میتواند از هر منبعی باشد، اما باید توسط SpinnerAdapterی مثل یک ArrayAdapter اگر به صورت آرایه است، یا CursorAdapter اگر از پایگاه داده گرفته میشوند، فراهم شوند
برای مثال اگر گزینهها از قبل مشخص هستند میتوان آنها را در یک آرایه رشتهای قرار داد.
<resources> <string-array name="planets_array"> <item>Mercury</item> <item>Venus</item> <item>Earth</item> <item>Mars</item> <item>Jupiter</item> <item>Saturn</item> <item>Uranus</item> <item>Neptune</item> </string-array> </resources>
با داشتن آرایهای مثل بالا، میتوان از کد زیر در Activity یا Fragment برای فراهم کردن گزینهها به Spinner استفاده کرد.
Spinner spinner = (Spinner) findViewById(R.id.spinner); // Create an ArrayAdapter using the string array and a default spinner layout ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this, R.array.planets_array, android.R.layout.simple_spinner_item); // Specify the layout to use when the list of choices appears adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); // Apply the adapter to the spinner spinner.setAdapter(adapter);
متد createFromResource() به ما این قابلیت را میدهد که یک ArrayAdapter از آرایههای رشتهای ایجاد کنیم. پارامتر سوم این متد یک Layout است که مشخص میکند گزینهی انتخابی چگونه نمایش داده شود. simple_spinner_item توسط اندروید فراهم شده است و به صورت پیشفرض مورد استفاده قرار میگیرد، البته میتوانید آن را بر اساس برنامه خود تغییر دهید.
حتما باید متد setDropDownViewResource(int) را فراخوانی کنید تا Layout گزینهها در منو را مشخص شود. simple_spinner_dropdown_item توسط اندروید فراهم شده است.
در آخر نیز Adapter تولید شده را به Spinner با استفاده از setAdapter() اختصاص میدهیم.
مدیریت انتخاب Spinner توسط کاربر
وقتی که کاربر یک گزینه را از منوی باز شده انتخاب میکند، Spinner یک رخداد on-item-selected را دریافت میکند.
برای اینکه تشخیص بدهیم که کاربر گزینه را تغییر داده است یک AdapterView.OnItemSelectedListener تعریف میکنیم و آن را به onItemSelected() اختصاص میدهیم:
Spinner spinner = (Spinner) findViewById(R.id.spinner); spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) { // An item was selected. You can retrieve the selected item using // parent.getItemAtPosition(pos) } public void onNothingSelected(AdapterView<?> parent) { // Another interface callback } });