سبد (0)

ابزارهای نمایش در نرم افزارها

ابزارهای نمایش پایه

ابتدا چند ابزار نمایش پایه را که توسط آن می توان رابط کاربری در برنامه های اندورید را طرحی نمود,بررسی می کنیم:

  • TextView
  • EditText
  • Button
  • ImageButton
  • CheckBox
  • ToggleButton
  • RadioButton
  • RadioGroup

این ابزار های نمایش قابلیت نمایش متن و همچنین قابلیت انتخاب شدن را دارند.

ابزار نمایش TextView

هر زمانی که یک پروژه ی جدیدی در ایکلیپس ایجاد می کنید,خود نرم افزار به صورت خودکار یک فایل main.xml که حاوی یک عنصر TextView است را ایجاد می کند:

 

<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello”
/>
</LinearLayout>

ابزار نمایش TextView جهت نمایش دادن یک متن به کاربر مورد استفاده قرار می گیرد.این ابزار یکی از متداول ترین ابزارهای نمایش در هنگام طراحی رابط کاربری اندروید است.اگر تمایل دارید که به کاربر اجازه ی ویرایش متن را بدهید از یک ابزار نمایش دیگر به نام EditText باید استفاده کنید که در ادامه با آن آشنا می شوید.

ابزارهای نمایش Button,ImageButton,EditText,CheckBox,ToggleButton,RadioButton و RadioGroup

علاوه بر ابزار نمایش TextView که از آن بسیار بهره خواهید برد,ابزارهای پایه ای دیگر نیز هستند که بسیار به کار شما خواهند آمد:

  • Button -- یک دکمه ی فشاری ساده است.
  • ImageButton -- مثل همان Button است فقط دارای یک تصویری هم است.
  • EditText -- یک زیر کلاس از TextView که به کاربران اجازه ی ویرایش محتوای درونش را می دهد.
  • CheckBox --یک نوعی از دکمه که دارای دو حالت checked (انتخاب شده) و unchecked (انتخاب نشده) می باشد.
  • RadiGroup و RadioButton -- رادیو باتن هم مثل CheckBox دارای دو حالت است.RadioGroup نیز برای گروه بندی کردن RadioButton ها مورد استفاده قرار می گیرد که در هر یک از این گروه ها تنها یکی از RadioButton ها را می توان انتخاب کرد.
  • ToggleButton -- یک نمایش دهنده ی وضعیت انتخاب شده یا نشده به وسیله ی نور(خاموش و روشن)

در این مرحله می خواهیم با نحوه ی کار این ابزارها آشنایی پیدا کنیم:

1.یک پروژه ی جدید با نام BasicViews1 در ایکلیپس ایجاد کنید.

2.تغییرات زیر را در فایل main.xml آن اعمال کنید:


<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
<Button android:id=”@+id/btnSave”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Save” />
<Button android:id=”@+id/btnOpen”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Open” />
<ImageButton android:id=”@+id/btnImg1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:src=”@drawable/icon” />
<EditText android:id=”@+id/txtName”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />
<CheckBox android:id=”@+id/chkAutosave”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Autosave” />
<CheckBox android:id=”@+id/star”
style=”?android:attr/starStyle”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
<RadioGroup android:id=”@+id/rdbGp1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical” >
<RadioButton android:id=”@+id/rdb1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Option 1” />
<RadioButton android:id=”@+id/rdb2”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Option 2” />
</RadioGroup>
<ToggleButton android:id=”@+id/toggle1”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
</LinearLayout>

3.برای مشاهده ی ابزارهای نمایش به صورت عملی,روی نام پروژه کلیک کرده و سپس برنامه را اجرا کنید.

4.روی هر کدام که کلیک کنید نحوه ی کار را مشاهده می کنید.

  • اولین CheckBox تیک دار شده است.
  • دومین CheckBox (ستاره) تیک دار شده است.
  • دومین RadioButton (اپشن 2) تیک دار شده است.
  • ToggleButton روشن شده است.

روش کار

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

برای اولین Button, در خصوصیت layout_width مقدار fill_parent قرار گرفته است.بنابراین تمام عرض صفحه را اشغال می کند:

 

<Button android:id=”@+id/btnSave”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Save” />

برای دکمه ی دوم خصوصیت layout_width برابر با مقدار wrap_content می باشد.بنابراین عرض آن به اندازه ی محتوایش خواهد بود.متن داخل آن Open می باشد:

 

<Button android:id=”@+id/btnOpen”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Open” />

ImageButton یک دکمه که دارای تصویر است را نشان می دهد.آدرس این تصویر در خصوصیت src درج شده است.در این مورد از تصویر از آیکون برنامه استفاده کرده ایم:

 

<ImageButton android:id=”@+id/btnImg1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:src=”@drawable/icon” />

ابزار نمایش EditText یک باکس را جهت وارد کردن متن توسط کاربر نشان می دهد.خصوصیت layout_height را برابر wrap_content قرار می دهیم تا کاربر بتواند رشته ی طولانی را وارد کند,همچنین ارتفاع آن به اندازه ی متن افزایش خواهد یافت.

 

<EditText android:id=”@+id/txtName”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content” />

CheckBox یک ابزار نمایش است که کاربر به واسطه ی آن می تواند یک عبارت را تیک دار کرده و یا تیک آن را بردارد:

 

<CheckBox android:id=”@+id/chkAutosave”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Autosave” />

اگر از حالت پیش فرض CheckBox خوشتان نمی آید, می توانید با تعیین خصوصیت style شکل دیگری به آن بدهید.مثلاً یک ستاره:  

فرم کلی برای مقدار خصوصیت style به صورت زیر است:                                                

 

?[package:][type:]name.

تغییراتی که در فایل main.xml برای تغییر style اعمال شده است:

 

<CheckBox android:id=”@+id/star”
style=”?android:attr/starStyle”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

RadioGroup حاوی دو RadioButton است.این ابزار بسیار مهم می باشد,چرا که معمولاً برای انتخاب یک گزینه از بین چندین گزینه برای کاربر مورد استفاده قرار می گیرد.وقتی یک RadioButton از میان یک RadioGroup انتخاب می شود,تمام RadioButtonهای دیگر که انتخاب شده بودند,از حالت انتخاب خارج می شوند.

 

<RadioGroup android:id=”@+id/rdbGp1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical” >
<RadioButton android:id=”@+id/rdb1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Option 1” />
<RadioButton android:id=”@+id/rdb2”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Option 2” />
</RadioGroup>

به این نکته توجه داشته باشید که RadioButton ها به صورت عمودی چیده شده اند.یکی در بالای دیگری.اگر مایل هستید که به صورت افقی چیده شوند,باید خصوصیت orientation را برابر با horizontal قرار دهید.البته باید مطمئن شوید که مقدار wrap_content در خصوصیت layout_width ابزارهای نمایش RadioButton درج شده باشد:

 

<RadioGroup android:id=”@+id/rdbGp1”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:orientation=”horizontal” >
<RadioButton android:id=”@+id/rdb1”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Option 1” />
<RadioButton android:id=”@+id/rdb2”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Option 2” />
</RadioGroup

ToggleButton یک دکمه ی مربعی شکل است,که کاربران می توانند با کلیک,آن را خاموش یا روشن کنند:

 

<ToggleButton android:id=”@+id/toggle1”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

آن چیزی که از این مثال ها قابل دریافت است,وجود خصوصیت id می باشد که دارای یک مقدار منحصر به فرد است.مثل این دکمه:

 

<Button android:id=”@+id/btnSave”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Save” />

خصوصیت id حاوی یک مقدار منحصر به فرد برای شناسایی ابزار نمایش در هنگام استفاده از متد()View.findViewById یا ()Activity.findViewById می باشد.

حالا که متوجه شدید که ویو های مختلف توی اکتیویتی ها به چه شکل به نمایش گذاشته می شوند,در زیر به شما نشان می دهیم که چگونه رویدادها ی ابزارهای نمایش را کنترل کنید.

1.در همان پروژه ی قبلی فایل MainActivity.java را به صورت زیر ویرایش کنید:

 

package com.PRG.BasicViews1;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
import android.widget.ToggleButton;
import android.widget.RadioGroup.OnCheckedChangeListener;
public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//---Button view---
Button btnOpen = (Button) findViewById(R.id.btnOpen);
btnOpen.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
DisplayToast(“You have clicked the Open button”);
}
});
//---Button view---
Button btnSave = (Button) findViewById(R.id.btnSave);
btnSave.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v) {
DisplayToast(“You have clicked the Save button”);
}
});
//---CheckBox---
CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave);
checkBox.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v) {
if (((CheckBox)v).isChecked())
DisplayToast(“CheckBox is checked”);
else
DisplayToast(“CheckBox is unchecked”);
}
});
//---RadioButton---
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener()
{
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1);
if (rb1.isChecked()) {
DisplayToast(“Option 1 checked!”);
} else {
DisplayToast(“Option 2 checked!”);
}
}
});
//---ToggleButton---
ToggleButton toggleButton =
(ToggleButton) findViewById(R.id.toggle1);
toggleButton.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v) {
if (((ToggleButton)v).isChecked())
DisplayToast(“Toggle button is On”);
else
DisplayToast(“Toggle button is Off”);
}
});
}
private void DisplayToast(String msg)
{
Toast.makeText(getBaseContext(), msg,
Toast.LENGTH_SHORT).show();
}
}

2.برنامه را اجرا کنید.

3.روی هر کدام از ابزارهای نمایش کلیک کنید تا پیام مربوط به آن را مشاهده کنید.

روش کار

برای اینکه رویدادی که به واسطه ی یک ابزار نمایش رخ داده است را کنترل کنید,می بایستی ابتدا به وسیله ی متد ()findViewById که متعلق به کلاس پایه ی اکتیویتی است,آن را پیدا کنید.این کار را با ID آن ابزار نمایش انجام می دهیم:

 

//---Button view---
Button btnOpen = (Button) findViewById(R.id.btnOpen);

متد ()setOnClickListener یک callBack را برای کنترل رویداد در هنگام کلیک ابزار نمایش ثبت می کند:

 

btnOpen.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
DisplayToast(“You have clicked the Open button”);
}
});

متد ()onClick وقتی که کاربر کلیک کند,اجرا می شود.برای اینکه حالت کنونی CheckBox را دریابیم, باید آرگومان متد ()onClick را به CheckBox تبدیل و سپس با استفاده از متد ()isChecked وضعیت آن را برسی کنیم:

 

//---CheckBox---
CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave);
checkBox.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v) {
if (((CheckBox)v).isChecked())
DisplayToast(“CheckBox is checked”);
else
DisplayToast(“CheckBox is unchecked”);
}
});

در مورد RadioButton باید با استفاده ااز متد ()setOnCheckedChangeListener در RadioGroup یک callbak را ثبت کرده تا هنگام تغییرات در وضعیت انتخاب RadioButton, آن متد اجرا گردد:

 

//---RadioButton---
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener()
{
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1);
if (rb1.isChecked()) {
DisplayToast(“Option 1 checked!”);
} else {
DisplayToast(“Option 2 checked!”);
}
}
});

وقتی یک RadioButton کلیک می شود,متد ()onCheckedChanged فراخوانی می گردد.در این متد RadioButton را مشخص کرده ایم سپس با استفاده از متد ()isChecked وضعیت این ابزار نمایش را در می یابیم.به غیر از این متد, ()onCheckedChanged حاوی یک آرگومان دوم است که حاوی id یا شناسه RadioButton انتخاب شده می باشد.

ToggleButton نیز کاملاً شبیه CheckBox عمل می کند.

نوشته شده توسط سعید نوشادی
بازدید: 4973

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه