آموزش اندروید فصل سوم قسمت نهم – ابزارهای نمایش

در قسمت بیست و ششم آموزش اندروید  با طرح بندی های مختلف اندروید جهت چینش ابزار آشنا شدیم حال با ابزارهای نمایش مختلف و پرکاربرد اندروید نیز آشنا خواهیم شد.

آموزش اندروید فصل سوم قسمت نهم – ابزار نمایش

توجه : برای مشاهده تصاویر در سایز اصلی برروی آنها کلیک کنید.

طراحی رابط کاربری با استفاده از ابزار های نمایش

در ادامه این آموزش با ابزار های نمایشی جهت ارتباط برقرار کردن با کاربر آشنا خواهیم شد

• ابزار ها نمایش پایه : مثل TextView , EditText و Button که پیش تر به کررات از آن استفاده کردیم.
• ابزارهای نمایش لیست : ابزارهای نمایش که به وسیله آن یک لیست طولانی نمایش داده میشود مثل ListView و SpinnerView
• فرگمنت های اختصاصی : فرگمنت های اختصاصی که درای قابلیت های خاصی هستند.

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

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

ابزار نمایش TextView

اگر توجه کرده باشید هر پروژه ای که در اکلیپس اجرا میکنید یک TextView به صورت زیر دارد

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

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

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

ابزارهای پرکاربرد دیگر که بسیار مورد استفاده قرار خواهد گرفت به شرح زیر است

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

برای درک بیشتر به مثال زیر دقت فرمایید

پروژه جدیدی به نام ViewPrj ایجاد کرده و در فایل activity-main.xml چنین کدنویسی میکنیم

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >



<Button android:id="@+id/btnSave"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/save"

android:onClick="btnSaved_clicked"/>



<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/ic_launcher" />



<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="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 android:id="@+id/toggle1"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

برای مشاهده ابزارهای نمایش ایجاد شده برنامه را اجرا کرده و نتیجه را مطابق شکل زیر ببینید

روش کار

تمام ابزارها به صورت LinearLayout چینش شده پس همه به صورت خطی قرار میگیرند.

برای دکمه اول خصوصیت layout-width مقدار fill_parent تعیین شده پس تمام عرض صفحه را اشغال میکند

<Button android:id="@+id/btnSave"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/save"

android:onClick="btnSaved_clicked"/>

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

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

<ImageButton android:id="@+id/btnImg1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:src="@drawable/ic_launcher" />

ابزار نمایش EditText نیز برای دریافت رشته از کاربر میباشد که همانگونه که نمایش داده شده مقدار خصوصیت layout_width برابر با تمام عرض صفحه و layout_height برابر با محتوی ورودی میشود

<ImageButton android:id="@+id/btnImg1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:src="@drawable/ic_launcher" />

CheckBox نیز این امکان را به شما میدهد تا عبارتی را انتخاب و تیک دار کنید که اگر از حالت پیش فرض آن خوشتان نیامد میتوانید با خصوصیت style ظاهر آن را عوض کنید

<CheckBox android:id="@+id/chkAutosave"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Autosave" />

قالب کلی برای خصوصیت style به شکل زیر است

?[package:][type:]name

.

RadioGroup نیز حاوی دو RadioButton است.RadioGroup بسیار مهم است چون با انتخاب یک RadioButton در یک RadioGroup تمامی RadioButton های قبل غیرفعال شده و تنها یک 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>

با استفاده از خصوصیت orientation میتوان نحوه چیدمان RadioButton هارا نیز مشخص کرد.

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

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

برای خوانایی بیشتر برنامه میتوان در فایل MainActivity.java چنین کدنویسی کنیم تا با کلیک برروی هر کدام از ابزار ها پیغام مناسب را نمایش دهد

package net.learn2develop.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.RadioGroup.OnCheckedChangeListener;

import android.widget.Toast;

import android.widget.ToggleButton;

public class ViewPrj extends Activity {

        public void btnSaved_clicked (View view) {

                 DisplayToast("You have clicked the Save button1");
        }

        /** Called when the activity is first created. */

        @Override

        public void onCreate(Bundle savedInstanceState) {

                 super.onCreate(savedInstanceState);

                 setContentView(R.layout.activity-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");

                           }

                 });

                 //---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();

        }

}

روش کار

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

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

متد setOnClickListner()

یک فراخوان برای کنترل رویداد در هنگام کلیک ابزار نمایش ثبت میکند

    btnOpen.setOnClickListener(new View.OnClickListener() {

                           public void onClick(View v) {

                                    DisplayToast("You have clicked the Open button");

                           }

رویداد onClick نیز وقتی کاربر دکمه را کلیک کند اتفاق می افتد.

برای اینکه حالت کنونی CheckBox را دریابیم باید آرگومان متد ()onClick را به صورت CheckBox تبدیل و سپس با استفاده از متد ()isCheked وضعیت آن را بررسی میکنیم

  //---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 باید با استفاده از متد  ()setOnChekedChangeLinstner در RadioGroup یک فراخوان را ثبت کرده تا هنگام تغییرات در وضعیت انتخاب 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 فراخوانی میگردد.سپس با استفاده از متد ()isChecked وضعیت این ابزار نمایش را در میابیم.

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

بنابراین برای کنترل رویداد ابزارهای نمایش ابتدا یک رجوع به آن ابزار نمایش ایجاد کرده سپس یک callback ثبت میکنیم تا رویداد کنترل شود.البته راه دیگری هم وجود دارد برای مثال به تکه کد زیر دقت فرمایید

<Button android:id="@+id/btnSave"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="@string/save"

    android:onClick="btnSaved_clicked"/>

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

public void btnSaved_clicked (View view) {

                 DisplayToast("You have clicked the Save button1");

        }

این روش کمی ساده تر بنظر میرسد و بسته به نظر خود میتوان از یکی از روش ها استفاده کرد.

مدرس : خانم مهندس داودی نژاد

آموزش اندروید فصل سوم قسمت هشتم

آموزش اندروید فصل سوم قسمت دهم