برنامه نویسی اندروید با Android Studio ساخت برنامه تبدیل دما

ساخت برنامه ی تبدیل دما

نمونه ی نمایشی برنامه ی کاربردی:

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

گفتنی است برنامه ی کاربردی مذکور در فروشگاه مجازی گوگل پلی موجود می باشد .

متناوباً, می توانید با اسکن بارکد زیر توسط گوشی اندروید خود برنامه ی کاربردی فوق را از گوگل پلی دانلود کنید .

ایجاد پروژه

با استفاده از اطلاعات زیر یک پروژه ی جدید اندروید ایجاد کنید :

جدول 8. پروژه ی جدید اندروید

تعیین خصیصه های برنامه (attribute)

اندروید به شما امکان می دهد برای تعریف خصیصه ها (مثل رشته ها و رنگ ها( منابع ایستا (Static Resources) تعریف کنید . می توان این خصیصه ها را در دیگر فایل های XML یا همراه Java source code نیز مورد استفاده قرار داد .

برای بازکردن ویرایشگر این فایل, ابتدا باید فایل res/values/strings.xml را باز کنید .

فرض کنید می خواهید یک تعریف color به فایل مورد نظر اضافه کنید . برای این منظور روی دکمه ی Add کلیک کنید .

مدخل Color را همان گونه که در تصویر زیر به نمایش گذاشته شده انتخاب کرده, سپس دکمه ی ok را فشار دهید .

myColor را به عنوان اسم و #F5F5F5 را به عنوان مقدار وارد کنید :

این بار خصیصه های بیشتری از نوع رشته (String type) اضافه کنید . خصیصه های رشته به برنامه نویس این امکان را می دهد که برنامه را در زمانی دیگر ترجمه کند .

جدول 9. خصیصه های رشته

حال به قسمت (نمایش( XML رفته و از درستی مقادیر وارد شده اطمینان حاصل کنید .

 
                Temperature Converter
                Settings
                Hello world!
                #F5F5F5
                to Celsius
                to Fahrenheit
                Calculate
 
 
            

استفاده از ویرایش گر طرح کلی (layout editor)

ابتدا فایل res/layout/activity_main.xml را انتخاب کنید . اکنون با دوبار کلیک روی فایل مورد نظر ویرایش گر اندروید (Android editor) را باز کنید . ویرایش گر مزبور به شما اجازه می دهد از طریق drag & drop (کشیدن طرح و قرار دادن آن در بخش مورد نظر) یا به وسیله ی XML source code طرح کلی دلخواه را ایجاد کنید . شما می توانید با کلیک روی تب مربوطه (واقع در پایین صفحه ی ویرایش گر) بین دو حالت نمایش راه گزینی کنید . به منظور تغییر موقعیت و همچنین گروه بندی عناصر می توانید از Eclipse Outline view استفاده کنید .

تصویر زیر سمت Palette ویرایش گر را نشان می دهد . این المان به شما اجازه می دهد عناصر view را کشیده و در طرح کلی خود قرار دهید . به منظور شناسایی آسان تر عناصر view, می توانید نمایش را تغییر داده تا آیکون و متن مورد نظر (مشابه تصویر زیر) به نمایش گذاشته شود .

توجه : نمایش Palette مکرراً تغییر می یابد, بنابراینPalette view شما ممکن است کمی متفاوت باشد.

افزودن views به فایل layout

در این بخش از تمرین, رابط کاربری پایه ی برنامه ی کاربردی را به اتفاق هم ایجاد می کنیم .

روی متن Hello World! موجود در فایل layout راست کلیک کرده, سپس گزینه ی Delete را از popup menu انتخاب کنید تا text object نام برده حذف گردد .

حال برای مشاهده ی کلیه ی text field ها روی سربرگ/هدر Text Field کلیک کنید . ابزارک Plain Text را با مکان نمای موس کشیده و روی طرح کلی (layout) خود قرار دهید تا فیلد ورودی متن (text input field) ایجاد شود .

سپس بخش Form Widgets را از Palette انتخاب کرده, مدخل RadioGroup را بکشید و در طرح کلی (layout) قرار دهید . تعداد radio button هایی که به radio button group شما افزوده می شود به نسخه ی Eclipse بستگی دارد . سعی کنید با اضافه کردن و کم کردن دکمه ها, فقط دو radio button در گروه دکمه ها داشته باشید .

یک دکمه (Button) از بخش Form Widgets انتخاب کرده, آن را بکشید و در طرح (layout) خود جای گذاری کنید .

اکنون به تب XML فایل layout خود مراجعه کرده و آن را با لیست زیر مقایسه کنید (و از همخوانی این دو با هم اطمینان حاصل کنید) . ADT قالب ها (template) را در فواصل معین عوض می کند, بهمین دلیل XML شما ممکن است کمی متفاوت بنظر برسد.

توجه : به خاطر استفاده از رشته های hard-code تعدادی پیغام خطا مشاهده می کنید . در بخش بعدی تمرین این اشکال را رفع خواهیم کرد .

تمامی کامپوننت های رابط کاربری شما در فایل layout جای گرفته است . رنگ پس زمینه (background color) را به این layout اختصاص دهید . پس از انتخاب Color, myColor را مشابه XML Snippet زیر انتخاب کنید .

پس از انجام این کار, رنگ پس زمینه ی شما به whitesmoke تغییر می یابد . البته تشخیص آن ممکن است کمی مشکل باشد .

حال به تب activity_main.xml مراجعه کرده و از صحیح بودن فایل XML اطمینان حاصل کنید .

ایجاد utility class

با ایجاد utility class زیر, سلیسیوس را به فارنهایت (و بالعکس( تبدیل کنید .

package de.vogella.android.temperature;
 
public class ConverterUtil {
  // converts to celsius
  public static float convertFahrenheitToCelsius(float fahrenheit) {
    return ((fahrenheit - 32) * 5 / 9);
  }
 
  // converts to fahrenheit
  public static float convertCelsiusToFahrenheit(float celsius) {
    return ((celsius * 9) / 5) + 32;
  }
} 
            

اصلاح کد activity

ویزارد پروژه ی اندروید کلاس MainActivity را برای کد activity شما ایجاد کرد, اکنون این کلاس را به ترتیب زیر اصلاح کنید :

package de.vogella.android.temperature;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Toast;
 
public class MainActivity extends Activity {
  private EditText text;
 
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    text = (EditText) findViewById(R.id.editText1);
 
  }
 
  // this method is called at button click because we assigned the name to the
  // "OnClick property" of the button
  public void onClick(View view) {
    switch (view.getId()) {
    case R.id.button1:
      RadioButton celsiusButton = (RadioButton) findViewById(R.id.radio0);
      RadioButton fahrenheitButton = (RadioButton) findViewById(R.id.radio1);
      if (text.getText().length() == 0) {
        Toast.makeText(this, "Please enter a valid number",
            Toast.LENGTH_LONG).show();
        return;
      }
 
      float inputValue = Float.parseFloat(text.getText().toString());
      if (celsiusButton.isChecked()) {
        text.setText(String
            .valueOf(ConverterUtil.convertFahrenheitToCelsius(inputValue)));
        celsiusButton.setChecked(false);
        fahrenheitButton.setChecked(true);
      } else {
        text.setText(String
            .valueOf(ConverterUtil.convertCelsiusToFahrenheit(inputValue)));
        fahrenheitButton.setChecked(false);
        celsiusButton.setChecked(true);
      }
      break;
    }
  }
 
} 
            

توجه : onClick با کلیک روی دکمه فراخوانده می شود (و این به خاطر خصوصیت onClick دکمه ی نام برده می باشد ).

راه اندازی برنامه ی کاربردی

روی پروژه ی مورد نظر راست کلیک کرده و گزینه ی Run-As → Android Application را انتخاب کنید . چنانچه برنامه ی شبیه ساز از قبل راه اندازی نشده و فعال نمی باشد, اکنون اجرا می شود .

یک عدد وارد کرده و نوع تبدیل دلخواه را انتخاب کنید . نتیجه باید مشابه تصویر زیر به نمایش گذاشته شود :