آموزش برنامه نویسی Android قسمت چهاردهم: پروژه نرم افزار مبدل واحد

قسمت چهاردهم آموزش برنامه نویسی Android قسمت چهاردهم: پروژه نرم افزار مبدل واحد

نوشته شده توسط: مهندس مهدی موسوی

بخش برنامه نویسی و نرم افزار|برنامه نویسی اندروید

قسمت های دیگر این مطلب:

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

در این نرم افزار مسافت به کیلومتر دریافت و تبدیل به متر خواهد شد. ابتدا یک رابط کاربری طراحی می‌کنیم، که پس از اتمام کار چنین صفحه‌ای خواهیم داشت:

نرم افزار مبدل واحد اندروید

سورس پیاده سازی چنین لایه کاربری‌ای عبارت است از:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="hitos.ir.convertor.MainActivity"
    android:gravity="center">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="200dip">

        <EditText
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/editText"
            />

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="تایید"
            android:id="@+id/button"
            android:layout_marginTop="20dip"
            android:layout_marginBottom="50dip"/>

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="عدد مورد نظر را به کیلومتر وارد کرده و کلید تبدیل را بزنید"
            android:id="@+id/textView"
            android:gravity="right"/>

    </LinearLayout>
</RelativeLayout>

پیاده سازی لایه فوق بسیار راحت است و در ابتدا یک LinearLayout از نوع vertical و به طول 200dip ایجاد می‌کنیم. سپس با تعیین gravity لایه اصلی RelativeLayout به center تمام محتویات را وسط چین می‌کنیم.

درون LinearLayout یک EditeText و سپس یک Button و یک TextView درج می‌کنیم.

ارتباط بین لایه نمایش و Activity

همانطور که می‌دانید ما در بالا تنها رابط نمایشی برنامه خود را طراحی کردیم. به این دلیل که نرم افزار نیازمند انجام محاسبات است مجبوریم لایه نمایش را به Activity اصلی برنامه متصل کنیم.

در رابط کاربری سه واحد وجود دارد که برای تعامل با کاربر باید آن‌ها را در Activity مدیریت کنیم. این سه واحد عبارت اند از:

EditText: برای دریافت ورودی و انجام پردازش روی آن.
Button: برای شروع انجام محاسبات.
TextView: برای نمایش نتیجه محاسبات.

بالای متد onCreate کلاس MainActivity سه متغیر به شکل زیر اضافه می‌کنیم:

package hitos.ir.convertor;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

  EditText editText;
  Button button;
  TextView textView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  }
}

در سطرهای یازده الی سیزده سه متغیر از نوع‌های به ترتیب EditText و Button و TextView ایجاد کردیم. هر کدام از این واحد‌های جدید را که اضافه می‌کنیم به شما پیشنهاد داده می‌شود که با فشردن کلید‌های Alt + Enter کلاس مربوطه را به بالای فایل جاری اضافه کنید.

کلیدهای alt + enter برای ایجاد خودکار فرایندها هیتوس

حال باید سه کامپوننت ایجاد شده در لایه نمایش را در متد onCreate به این سه متغیر نسبت دهیم. برای این کار داریم:

package hitos.ir.convertor;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    EditText editText;
    Button button;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = (Button) findViewById(R.id.button);
        editText = (EditText) findViewById(R.id.editText);
        textView= (TextView) findViewById(R.id.textView);
    }
}

در خطوط بیستم تا بیست و دوم سه کامپوننت به شکلی که می‌بینید در اکتیویتی جاری فراخوانی شده اند. برای فراخوانی کامپوننت‌ها به این شکل عمل می‌کنیم که ابتدا نام کامپوننت را درون پرانتز قید کرده و با عبارت findViewById به دنبال کامپوننت مورد نظر در لایه نمایش می‌گردیم.

ورودی درون پرانتز که از سه بخش تشکیل شده است، بخش اول که R است نشان دهنده مراجعه به پوشه res، شناسه id نشان دهنده استفاده از عنصر ID و در آخر شناسه کامپوننت می‌باشد. شناسه کامپوننت در طراحی لایه کاربری ایجاد می‌شود، به عنوان مثال برای TextView خاصیتی به صورت android:id="@+id/editText" تعریف کرده بودیم که عبارت بعد از اسلش نشان دهنده شناسه المان است.

با فراخوانی کامپوننت‌های می‌توانیم کنترل آن‌ها را در Activity بدست بگیریم.

در ابتدا قصد داریم دستوری بنویسیم که متن پیش فرض موجود در TextView را عوض کند. برای این کار باید پس از فراخوانی متغیری که حاوی TextView است از متد setText استفاده کرد. سورس زیر را ببینید:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = (Button) findViewById(R.id.button);
        editText = (EditText) findViewById(R.id.editText);
        textView= (TextView) findViewById(R.id.textView);

        textView.setText("hitos.ir");
    }

نتیجه مانند زیر خواهد بود و متن پیش فرض موجود در TextView تبدیل به hitos.ir خواهد شد.

کار با کامپوننتهای اندروید

حال قصد داریم کلید تایید نرم افزار مبدل واحد خود را برای انجام عملیات آماده کنیم. از آن جایی که عملیات پردازش و تبدیل واحد پس از کلید روی کلید تایید شروع می‌شود باید متدی برای Button موجود در لایه نمایش ایجاد کنیم تا پس از کلیک شدن روی کلید با شناسه مورد نظر عملیات خاصی انجام شود.

عبارت button.setOnClickListener(new View.OnClickListener()); را می‌نویسیم. روی کلیدواژه View کلیک کرده و Alt + Enter را فشار می‌دهیم.

دور بخش داخل پرانتز یک خط قرمز کشیده می‌شود که با کلیک روی آن و زدن کلیدهای Alt + Enter پنجره‌ای باز شده که نام اولین المان آن Implement methods است:

implement method در اندروید

روی Implement methods کلیک کرده و پنجره نمایش داده شده را تایید می‌کنیم.

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = (Button) findViewById(R.id.button);
        editText = (EditText) findViewById(R.id.editText);
        textView= (TextView) findViewById(R.id.textView);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                
            }
        });
    }

در خط ده متد setOnClickListener یک شنونده است که به متغیر button متصل شده است. این شنوده وظیفه منتظر ماندن تا زمان کلیک شدن روی کلید button را بر عهده دارد.

نکته: شاید کدها کمی پیچیده به نظر بیایند، ولی فعلا همین طور آن‌ها را حفظ کنید تا در آینده به کاربرد آن‌ها پی ببرید.

درون متد ایجاد شده توسط setOnClickListener یک متد دیگر به نام onClick ایجاد می‌گردد که تمام پردازش‌های پس از کلیک کردن روی کلید تایید را در اینجا وارد می‌کنیم.

ابتدا باید عدد وارد شده درون کادر editText را استخراج و تبدیل به یک عدد صحیح از نوع int بکنیم. به سورس زیر توجه کنید:

int number= Integer.parseInt(editText.getText().toString());

عبارت editText.getText().toString() عدد درون textView را دریافت می‌کند. Integer.parseInt وظیفه تبدیل کردن رشته درون پرانتز به int را بر عهده دارد.

حال متغیر دیگری به نام convert از نوع int می‌سازیم و عدد ذخیره شده در number را ضربدر 1000 می‌کنیم:

int convert= number * 1000;

با استفاده از متد setText عبارت درون TextView را ویرایش می‌کنیم. کل سورس نرم افزار به شکل زیر خواهد بود:

package hitos.ir.convertor;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    EditText editText;
    Button button;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button = (Button) findViewById(R.id.button);
        editText = (EditText) findViewById(R.id.editText);
        textView= (TextView) findViewById(R.id.textView);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int number= Integer.parseInt(editText.getText().toString());
                int convert= number * 1000;
                textView.setText(number + " KM is " + convert + " m");
            }
        });
    }
}

در خط 30 برای ساخت عبارت مناسب چند رشته را در هم ترکیب کردیم. نتیجه اجرای برنامه فوق به شکل زیر خواهد بود:

پیاده سازی نرم افزار اندروید