04- طراحی واسط کاربری اندروید : کنترلهای ویرایش متن (EditText)

مترجم: عاطفه قلی نژاد
آدرس مطلب اصلی: http://code.tutsplus.com/tutorials/android-user-interface-design-edittext-controls--mobile-7183

در این مقاله ، یاد خواهید گرفت که چگونه EditText control پایه و اولیه بسازید به گونه ای که ورودی را از کاربر بگیرد . هم چنین یاد خواهید گرفت که چطور این کنترل ها  را به روش های مختلف پیکربندی و دستکاری کنید.

این مقاله مراحل ساخت تعداد مختلفی از EditText control را در نرم افزار اندروید به شما نشان می دهد . در ابتدا ، یاد خواهید گرفت که چگونه  یک کنترل ورودی متن پایه و اولیه را به فایل layout اضافه کنید و برخی از مفیدترین ویژگی های آن ها چیست . سپس، یاد خواهید گرفت که چگونه محتوای کنترل متن را بازیابی کنید . در نهایت در مورد برخی از دیگر ویژگی های قابل دسترس EditText control در اندروید بحث می کنیم .

  Android SDKیک کنترل متن قابل ویرایش ساده برای استفاده در layout دارد: ویرایش متن (android.widget.EditText). یک مثال خوب برای EditText control استفاده از آن برای گرفتن ورودی از کاربر است مانند :   "Enter a Password" و "Enter a Name"

شکل 1 یک صفحه نمایش با تعداد زیادی EditText control نشان می دهد :

گام 1 : ساخت یک Android Application

شروع ، یک   (پروژه اندروید)Android project می سازیم . Android Application تان را به صورت معمول اجرا کنید . هنگامی که شما یک پروژه راه اندازی می کنید و برنامه در حال اجرا می باشد تصمیم می گیرید تحت چه صفحه ای می خواهید کنترل را به آن اضافه کنید . احتمالا" به طور ساده یک Android project  جدید با Activity و layout پیش فرض آن ساخته اید .(main .xml) وقتی که Android project تان را راه اندازی می کنید آماده اید تا با این آموزش پیش بروید .

گام 2 : اضافه کردن یک Edit text control به یک  Layout

EditText control معمولا" به عنوان بخشی ازActivity's Layout سورس فایل به حساب آورده می شوند . برای مثال ، برای اضافه کردن یک EditText control به  main.xml شما باید فایل Layout را ویرایش کنید . شما می توانید این کار را در  Eclips با استفاده از  designerسورس  Layoutیا بوسیله ویرایش Xml  به طور مستقیم انجام دهید . هم چنین می توانند کنترل ها به صورت برنامه نویسی شده ایجاد بشوند و در زمان اجرا به صفحه اضافه شوند . به طور ساده یک EditText control (android.widget.EditText) بسازید و آن را به Layout در Activity تان اضافه کنید .

برای اضافه کردن یک EditText control به سورس فایل Layout ، این مسیر را /res/layout/main.xml  باز کنید که بخشی از Android project تان می باشد . کلیک کنید روی Layout خطی یا (Layout والد) که شما می خواهید ، EditText control را به آن اضافه کنید . در Eclips ازقسمت graphical فایل Layout شما می توانید  EditText  را انتخاب کنید  وآن را روی  Layout والد بکشید . 

برای پیکربندی اینکهEditText control  چگونه به نظر برسد و رفتار کند ، ویژگی های کنترل را بوسیله انتخاب آن و تغییر دادن ویژگی هایش تنظیم می کنیم ، در تب properties نشان داده شده است . هم چنین شما می توانید  Xml  را به طور مستقیم ویرایش کنید .

در اینجا تعریف  Xmlبرای یک EditText control اولیه وجود دارد :

1 2 3 4 5

<EditText         android:id="@+id/editTextSimple"         android:layout_height="wrap_content"         android:layout_width="match_parent"> </EditText>

 ویژگی های خاص EditText control که شما نیاز خواهید داشت نسبت به آن آگاهی پیدا کنید :

·        به EditText control یک نام منحصر بفرد با استفاده از id property بدهید . برای اینکه در برنامه نویسی برای بازیابی مقادیر کنترل به آن نیاز خواهید داشت .

·        ارتفاع و عرض Layout را به طور مناسب تنظیم کنید .

·        کلاس EditText از کلاس  TextView مشتق شده است . بنابراین بیشتر ویژگی های TextView control (و متدهای مرتبط )اعمال می شود . برای مثال ، شما می توانید هر ویژگی دیگری را که تمایل دارید تا ظاهر کنترل را تغییر دهید ، انجام دهید . برای مثال ، تنظیم سایز متن ، رنگ ، فونت یا ... .

 

اجازه دهید در مورد برخی از ویژگی های رایج EditText control بحث کنیم .

 

گام 3 : بازیابی مقدار یک EditText control برنامه نویسی شده

برای بازیابی مقدار یک EditText control از داخل Activity تان ، شما می توانید از متد getText() کلاس EditText استفاده کنید . برای مثال ، کد زیر یک EditText control تعریف شده را بازیابی می کند :

 

1 2	final EditText simpleEditText = (EditText) findViewById(R.id.editTextSimple); String strValue = simpleEditText.getText().toString();

 

 

گام 4 : نظارت بر EditText control برای عملیات ها

شما به طور معمول نیاز دارید تا محتوای EditText و هم چنین فرم های دیگر کنترل در یک رویداد خاص را بازیابی کنید .اغلب ، جمع آوری اطلاعات از کاربر با فشاردادن یک دکمه (مثل OK یا  submit) یا زدن دکمه  Back می باشد.

هرچند ، اگر تمایل داشته باشید شما می توانید برکنترل ها مانند EditText control بااستفاده از View control listener بیشتر نظارت کنید.

به طور معمول ، شما ممکن است علاقه مند به listening رویدادها باشید مثل :

1.      وقتی که یک کاربر روی یک کنترل کلیک می کند . در این حالت ، یک listener  با استفاده  از متد setOnClickListener() ثبت می شود .

2.      وقتی که یک کاربر روی یک کنترل به طور طولانی کلیک می کند . در این حالت ، یک listener  با استفاده  از متد  setOnLongClickListener() ثبت می شود .

3.      وقتی که یک کاربر یک کلید را در کنترل می فشارد . در این حالت ، یک listener با استفاده از متد  setOnKeyListener() ثبت می شود .

4.      وقتی که یک کاربر focus روی کنترل را تغییر می دهد . در این حالت ، یک listener با استفاده از متد setOnFocusChangedListener() ثبت می شود .

اجاز دهید ، به مثال تغییر focus نگاه کنیم . اول وقتی که  روی کنترل focus می شود ، شما یک رویداد تغییر focus خواهید دید ، هر بار که کاربر focus را از کنترل دور می کند . شما آن را دوباره خواهید دید . اینجا یک مثال است که چگونگی نظارت بر محتوای یک EditText control روی تغییرات  focus در کلاس  Activity را نشان می دهد :

final EditText simpleEditText = (EditText) findViewById(R.id.editTextSimple);

simpleEditText.setOnFocusChangeListener(new OnFocusChangeListener() {

    public void onFocusChange(View v, boolean hasFocus) {

        String strValue = simpleEditText.getText().toString();

        Log.d(DEBUG_TAG, "User set EditText value to " + strValue);

    }

});

 

گام 5 : جمع آوری انواع مختلف ورودی

به صورت پیش فرض ، هرگونه محتوای متن در یک EditText control به عنوان متن ساده نمایش داده می شود . صفحه کلید نرم افزار به صورت پیش فرض برای واردکردن متن ساده استفاده می شود . هرچند ، با تنظیم یک ویژگی ساده به نام نوع ورودی ، همه ی شما می توانید به راحتی انواع مختلفی از اطلاعات ورودی را مانند شماره تلفن و رمز ورود وارد کنید . در Xml ، این ویژگی در EditText control به صورت زیر به نظر خواهد رسید :

1	android:inputType="phone"

یا 

1	android:inputType="textPassword"

 

انواع مختلفی از ورودی ها برای اهداف متفاوتی وجود دارد. نوع ورودی شماره تلفن ، کاربر را به وارد کردن عدد محدود خواهد کرد ؛ صفحه کلید نرم افزار تعدادی گزینه فراهم خواهد کرد ، به صورتی که درشکل2 نمایش داده شده است .

 

 

 

به طور مشابه ، برای رمز عبوردر شکل 3 نمایش داده شده است .

 

بازیابی این اطلاعات از کنترل دقیقا به همان صورت که متن اولیه را جمع آوری می کند، با استفاده از متد  getText() انجام می شود .

گام 6 : تنظیم Hint (نشانه ، راهنمایی) و مقادیر EditText control

به طور کلی ، EditText control برای گرفتن ورودی استفاده می شود نه نمایش آن . گفته شد ، شما می توانید همیشه مقدار یک EditText control را با استفاده از متد getText() تنظیم کنید همان طور که کنترل TextView این گونه است .

هم چنین شما ممکن است بخواهید hint (نشانه ، راهنمایی) EditText control جهت راهنمایی کاربر برای ورودی های خاص تنظیم کنید . وقتی که کاربر در این کنترل تایپ می کند hint بازنویسی می شود . شما می توانید رشته hint کنترل ویرایش متن را در Layout با استفاده از ویژگی های hint تنظیم کنید :

1	android:hint="@string/hint"

شکل 4 دو تا EditText control را نشان می دهد . در اولی یک مجموعه hint برای کاربروجود دارد .دومی مجموعه مقادیری (ورنگ متن - قرمز)از کنترل می باشد .  این یک hint نیست ، اما VALUE واقعی در کنترل تنظیم شده است .

 

گام 7 : تسهیل ورودی متنی در EditText control

 

شما می توانید با تنظیم ویژگیهای اضافی  روی EditText control زندگی کاربر را آسانتر سازید . برای مثال ، شما ممکن است بخواهید از ویژگی capitalize استفاده کنید تا به طور خودکار هرکدام از جمله ها ، کلمات یا کاراکترها در EditText control با حروف درشت نمایش داده شود .

1	android:capitalize="sentences"

 

هرچند جمله ها محبوب تر هستند ، اما شما ممکن است بخواهید حروف  کلمه ورودی را مثل نام ها و حروف اختصاری بزرگ کنید .

به طور مشابه ، شما می توانید کاراکتر هایی را که می تواند به یک فیلد وارد شود را با استفاده از ویژگی ارقام محدود کنید . برای مثال ، شما ممکن است یک فیلد عددی را به صفر و یک محدود کنید ، مثل این :

1	android:digits="01"

 

به صورت پیش فرض مکان نما در ورودی EditText control نشان داده می شود . شما می توانید مکان نما را با استفاده از ویژگی cursorVisible غیر فعال کنید ، مثل :

 

1	android:cursorVisible="false"

 

نتیجه

 

ما فقط در سطحی بحث کردیم که شما می توانید چه کارهایی با EditText control انجام دهید .عموما" EditText control در واسط کاربری نرم افزار اندروید برای گرفتن ورودی متنی از کاربر استفاده می شود . در این مقاله ، شما یاد خواهید گرفت که چگونه EditText control اندروید بسازید و آن را به روش های ساده و متنوع سفارشی کنید . یکی از قدرتمند ترین ویژگی های EditText control توانایی برای تنظیم نوع ورودی در جهت جمع آوری متن ، اعداد و ارقام ، آدرس ایمیل ، و دیگر اطلاعات از کاربر می باشد . این ویژگی ها می توانند ترکیب شوند و همسان گردند تا کنترل ورودی انعطاف پذیری را روی صفحه نمایش فراهم آورند .