1168 نیروی متخصص آماده کـار برای شمـا هستند
حالا پروژه خود را ایجاد کنید
تعداد طراحان اندروید 1029
تعداد نرم افزار های اندروید 0
تعداد طراحان آی او اس 1007
تعداد نرم افزارهای آی او اس 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 : مانند 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 است.


  • دسته بندی :
  • تاریخ انتشار : 11 اردیبهشت 1396
  • بازدید : 631

برچسب ها :