TemperatureConverter

Project : TemperatureConverter

สําหรับโปรเจ็กนี้ เป็นการใช้ EditText , Spinner ร่วมกัน สําหรับการสร้าง App ที่ใช้ในการแปลง

อุณหภูมิ โดยที่เราจะแยกส่วน Code เป็น View - Model - Controller

View
สําหรับในส่วนของ View ก็จะเป็นการจัด Layout ใน 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" >

<EditText
android:id = "@+id/temperature"
android:layout_width = "280dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "20dip"
android:layout_gravity = "center_horizontal"
android:inputType = "number"
android:hint = "Enter Temperature Here!" >
</EditText>

<TableRow
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:gravity = "center_horizontal" >
<Spinner
android:id = "@+id/input"
android:layout_width = "140dip"
android:layout_height = "wrap_content" >
</Spinner>
<Spinner
android:id = "@+id/output"
android:layout_width = "140dip"
android:layout_height = "wrap_content" >
</Spinner>
</TableRow>
 <LinearLayout
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:gravity = "center" >
<TextView
android:id = "@+id/result"
android:layout_width = "250dip"
android:layout_height = "wrap_content"
android:gravity = "center"
android:textSize = "25pt"
android:lines = "1" >
</TextView>
<TextView
android:id = "@+id/unit"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:textSize = "10pt" >
</TextView>
</LinearLayout>

</LinearLayout>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity = "center" >

Code XML ในการจัด Layout ของ LinearLayout

orientation : ให้อะไรก็ตามที่ใส่เข้าไปใน linearLayout ต่อกันในแนวดิ่ง
width : กว้าง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ
height : สูง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ
 <EditText
android:id = "@+id/temperature"
android:layout_width = "280dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "20dip"
android:layout_gravity = "center_horizontal"
android:inputType = "number"
android:hint = "Enter Temperature Here!" >
</EditText>

Code XML ในการจัด Layout ของ EditText

id : มีชื่อตัวแปรว่า temperature
width : กว้าง เท่ากับ 280 dip
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่งในที่นี้คือ ความสูงปกคิของ EditText
marginTop : ให้ถูกดันลงมาจากทางด้านบน 20 dip
gravity : ให้ EditText อยู่ตรงกลาง ในแนวนอน
inputType : เป็นการกําหนดชนิดข้อมูลที่ input ในที่นี้คือ number
hint : เป็นการกําหนดข้อความที่จะแสดงเมื่อ EditText ว่าง ในที่นี้คือ Enter Temperature Here!

<TableRow
android:layout_width = "fill_parent"
android:layout_height = "wrap_content"
android:gravity = "center_horizontal" >

Code XML ในการจัด Layout ของ TableRow สําหรับรวมกลุ่มของ Spinner

width : กว้าง เท่ากับขนาดของ Parent ในที่นี้คือ LinearLayout
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่งในที่นี้คือ ความสูงของ Spinner
gravity : กําหนดให้อะไรก็ตามที่ใส่เข้าไปใน TableRow เรียงกันอยู่ตรงกลาง ตามแนวนนอน

<Spinner
android:id = "@+id/input"
android:layout_width = "140dip"
android:layout_height = "wrap_content" >
</Spinner>

Code XML ในการจัด Layout ของ Spinner สําหรับ หน่วยเริ่มต้น

id : มีชื่อตัวแปรว่า input
width : กว้าง เท่ากับ 140 dip
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่งในที่นี้คือ ความสูงของ Spinner
 <Spinner
android:id = "@+id/output"
android:layout_width = "140dip"
android:layout_height = "wrap_content" >
</Spinner>

Code XML ในการจัด Layout ของ Spinner สําหรับ หน่วยที่จะแปลง

id : มีชื่อตัวแปรว่า output
width : กว้าง เท่ากับ 140 dip
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่งในที่นี้คือ ความสูงของ Spinner

<LinearLayout
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:gravity = "center" >

Code XML ในการจัด Layout ของ LinearLayout สําหรับ การวาง TextView ที่จะแสดงคําตอบ
orientation : ให้อะไรก็ตามที่ใส่เข้าไปใน linearLayout ต่อกันในแนว
width : กว้าง เท่ากับขนาดของ parent ในที่นี้ คือ LinearLayout
height : สูง เท่ากัยขนาดของ parent ในที่นี้ คือ LinearLayout แต่จะถูก ลบ ด้วย ความสูงของข้อมูล
ที่อยู่ก่อนหน้า
 <TextView
android:id = "@+id/result"
android:layout_width = "250dip"
android:layout_height = "wrap_content"
android:gravity = "center"
android:textSize = "25pt"
android:lines = "1" >
</TextView>

Code XML ในการจัด Layout ของ TextView ที่จะแสดงคําตอบ

id : มีชื่อตัวแปรว่า result
width : กว้าง เท่ากับ 250 dip
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่งในที่นี้คือ ตัวอักษรขนาด 25 pt
gravity : เป็นการจัดให้ข้อความที่อยู่ข้างใน อยู่ตรงกลาง TextView
textSize : กําหนดให้ขนาดตัวอักษรคือ 25 pt
line : เป็นการกําหนดให้แสดงข้อความแค่เพียง 1 บรรทัด

<TextView
android:id = "@+id/unit"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:textSize = "10pt" >
</TextView>

Code XML ในการจัด Layout ของ TextView ที่จะแสดงคําตอบ

id : มีชื่อตัวแปรว่า unit
width : กว้าง เท่ากับ สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่งในที่นี้คือ หน่วยของอุณหภูมิ
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่งในที่นี้คือ หน่วยของอุณหภูมิ
textSize : กําหนดให้ขนาดตัวอักษรคือ 10 pt
 Model
สําหรับในส่วนของ Model ก็จะเป็นสร้าง Class ที่เก็บข้อมูลที่จําเป็นต้องใช้ในโปรเจ็กนี้
โดยการ File .java เพิ่มขึ้นมา ดังนี้
1. คลิกขวาที่ Package ในที่นี้คือ bom.TemperatureConverter จากนั้นเลือก New > Class

2. ให้ชื่อ Class คือ TempConv จากนั้นคลิก Finish

 จากนั้นเราก็มาดูว่า ใน Class นี้จําเป็นต้องมีอะไรบ้าง?

package bom.TemperatureConverter;

public class TempConv {

//--> Attribute
public static String unitList[] = { "Celsius" , "Kelvin" };
public static int inputPosition = 0,
outputPosition = 0;
//--> Method
public static String getResult(String temp){
String result = "";
if( unitList[inputPosition] == "Celsius" ){
if(unitList[outputPosition] == "Kelvin"){
result = convertCelsiustoKelvin(Double.parseDouble(temp));
}
else
result = temp;
}
else if(unitList[inputPosition] == "Kelvin"){
if(unitList[outputPosition] == "Celsius"){
result = convertKelvintoCelsius(Double.parseDouble(temp));
}
else
result = temp;
}
return result;
}
//-->private Method

//-->Celsius to Other
private static String convertCelsiustoKelvin(double temp){
return Double.toString(temp+273.15 );
}
private static String convertCelsiustoFahrenheit(double temp){
return Double.toString(temp*1.8+32);
}
//-->Kelvin to other
private static String convertKelvintoCelsius(double temp){
return Double.toString(temp-273.15);
}
private static String convertKelvintoFahrenheit(double temp){
return Double.toString((temp-459.67)*1.8);
}
//-->Fahrenheit to other
private static String convertFahrenhitetoCelsius(double temp){
return Double.toString((temp-32)/1.8);
}
private static String convertFahrenhitetoKelvin(double temp){
return Double.toString(temp*1.8+459.67);
}
}
Attribute :
list หน่วยของ อุณหภูมิ จะได้ว่า

public static String unitList[] = { "Celsius" , "Kelvin" };

ตําแหน่ง ของ หน่วยของอุณหภูมิที่ input และ ตําแหน่งของ หน่วยของอุณหภูมิที่ output จะได้ว่า

public static int inputPosition = 0,

outputPosition = 0;

Method :
Method ในส่วนที่ซ่อน( Encapsulation ) คือกระปวนการในการแปลง หน่วยแต่ละแบบ
โดย Method ในส่วนนี้ เราจะ รับค่าอุณหภูมิมาเป็น double เพื่อให้ง่ายต่อการคํานวน และ
return ค่า มาเป็น String เพื่อให้เอาค่าไปใช้ กับ TextView ได้ทันที จะได้ว่า

//-->Celsius to Other
private static String convertCelsiustoKelvin(double temp){
return Double.toString(temp+273.15 );
}
private static String convertCelsiustoFahrenheit(double temp){
return Double.toString(temp*1.8+32);
}
//-->Kelvin to other
private static String convertKelvintoCelsius(double temp){
return Double.toString(temp-273.15);
}
private static String convertKelvintoFahrenheit(double temp){
return Double.toString((temp-459.67)*1.8);
}
//-->Fahrenheit to other
private static String convertFahrenhitetoCelsius(double temp){
return Double.toString((temp-32)/1.8);
}
private static String convertFahrenhitetoKelvin(double temp){
return Double.toString(temp*1.8+459.67);
}

การใส่คําว่า Static ในภาษา Java หมายความว่าสามารถเรียกใช้

Attribute หรือ Method ที่อยู่ภายใน Class ได้โดยไม่ต้อง ประกาศตัวแปรของ Class ก่อน
เพียงแค่อ้างชื่อ Class แล้วตามด้วยข้อมูลภายใน Class
แน่นอนว่า จะใช้ได้แค่ ในนส่วนที่ public เท่านั้น
 Method ในส่วนที่ เอามาใช้งาน คือการหาคําตอบ ในที่นี้เราจะแสดงตัวอย่าง ในการแปลงจาก
Celsius เป็น Kelvin และ Kelvin เป็น Celsius โดยฟังก์ชันนี้เราจะ return ค่าคําตอบไปเป็น
String สําหรับ TextView จะได้นําไปใช้ได้เลย แล้ว รับค่าจาก EditText เป็น String ด้วย
วิธีการ
1. ตรวจสอบดูว่า Spinner ที่เป็น input เป็นหน่วยอะไร
เราก็จะรู้ว่า user ต้องการแปลงจากหน่วยอะไร
2. จากนั้นดูว่า Spinner ที่เป็น output เป็นหน่วยอะไร แล้วแปลงค่าตามนั้น
เราก้จะรู้ว่า user ต้องการแปลงเป็นหน่วยอะไร
จาก ก็เรียกใช้ Method ที่เขียนเอาไว้ จะได้ว่า

public static String getResult(String temp){

String result = "";
if( unitList[inputPosition] == "Celsius" ){
if(unitList[outputPosition] == "Kelvin"){
result = convertCelsiustoKelvin(Double.parseDouble(temp));
}
else
result = temp;
}
else if(unitList[inputPosition] == "Kelvin"){
if(unitList[outputPosition] == "Celsius"){
result = convertKelvintoCelsius(Double.parseDouble(temp));
}
else
result = temp;
}
return result;
}
 Controller
สําหรับในส่วนของ Controller ก็เป็นส่วนที่ เชื่อมการทํางานระหว่าง View และ Model

import bom.TemperatureConverter.TempConv;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnKeyListener;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.Spinner;
import android.widget.TextView;

public class TemperatureConverter extends Activity {

EditText input;
Spinner inputUnit,outputUnit;
TextView result,unit;
ArrayAdapter<String> list;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

input = (EditText)findViewById(R.id.temperature);
input.setOnKeyListener(onKey);

inputUnit = (Spinner)findViewById(R.id.input);
list = new ArrayAdapter<String>(
this,
android.R.layout.simple_spinner_item,
TempConv.unitList);
list.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
inputUnit.setAdapter(list);
inputUnit.setOnItemSelectedListener(onSelect);

outputUnit = (Spinner)findViewById(R.id.output);
list = new ArrayAdapter<String>(
this,
android.R.layout.simple_spinner_item,
TempConv.unitList);
list.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
outputUnit.setAdapter(list);
outputUnit.setSelection(1);
outputUnit.setOnItemSelectedListener(onSelect);

result = (TextView)findViewById(R.id.result);
unit = (TextView)findViewById(R.id.unit);
}
 import bom.TemperatureConverter.TempConv;

Code Java ในการเอา TempConv.java ( Model ) มาใช้

EditText input;
Spinner inputUnit,outputUnit;
TextView result,unit;
ArrayAdapter<String> list;

Code Java ในการประกาศตัวแปร

EditText สําหรับการ input ข้อมูล ,
Spinner สําหรับการแสดง ตัวเลือก หน่วยของอุณหภูมิ ,
TextView สําหรับ แสดงค่าคําตอบ และ หน่วยที่เป็นคําตอบ
และ ArrayAdapter สําหรับ ข้อมูลใน Spinner

input = (EditText)findViewById(R.id.temperature);
input.setOnKeyListener(onKey);

Code Java ในการการเชื่อม ตัวแปร EditText กับ Layout ( XML )

และ กําหนดเหตุการณ์ เมื่อมีการ พิมพ์ข้อมูลลงใน EditText
โดยเราจะเขียน ฟังก์ชัน OnkeyListener โดยใช้ชื่อว่า onKey จะได้ว่า
 วิธีการ
1. ตรวจสอบดูว่า EditText ว่าหรือป่าว ถ้าว่าง ให้ TextView คําตอบ ว่างด้วย
2. ถ้ามีข้อมูล ให้ แสดงคําตอบทาง TextView โดยคําตอบได้มาจาก
TempConv.getResult ในส่วนของ Model จะได้ว่า

OnKeyListener onKey = new OnKeyListener() {

@Override
public boolean onKey(View arg0, int arg1, KeyEvent arg2) {
// TODO Auto-generated method stub
if(input.getText().length() > 0){
result.setText(TempConv.getResult(input.getText().toString()));
}
else
result.setText("");

return false;
}
};

inputUnit = (Spinner)findViewById(R.id.input);
list = new ArrayAdapter<String>(
this,
android.R.layout.simple_spinner_item,
TempConv.unitList);
list.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
inputUnit.setAdapter(list);
inputUnit.setOnItemSelectedListener(onSelect);

Code Java ในการการเชื่อม ตัวแปร Spinner กับ Layout ( XML )

และ กําหนด List ข้อมูลใน Spinner สําหรับ หน่วยเริ่มต้น
โดยใช้ข้อมูลจาก TempConv.unitList ( ในส่วนของ Model )
จากนั้น กําหนดเหตุการณ์ เมื่อมีการเมื่อมีการ คลิกเลือกรายการ ด้วยฟังก์ชัน
AdapterView.OnItemSelectListener ซึ้งจะเขียนแยก โดยใช้ชื่อว่า onSelect
 outputUnit = (Spinner)findViewById(R.id.output);
list = new ArrayAdapter<String>(
this,
android.R.layout.simple_spinner_item,
TempConv.unitList);
list.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
outputUnit.setAdapter(list);
outputUnit.setSelection(1);
outputUnit.setOnItemSelectedListener(onSelect);

Code Java ในการการเชื่อม ตัวแปร Spinner กับ Layout ( XML )

และ กําหนด List ข้อมูลใน Spinner สําหรับ หน่วยที่จะแปลง
โดยใช้ข้อมูลจาก TempConv.unitList ( ในส่วนของ Model )
และ กําหนดให้ List ถูกเลือก ด้วยฟังก์ชัน setSelection
ในที่นี้คือ index 1 ของ TempConv.unitList นั้นคือ “Kelvin”
จากนั้น กําหนดเหตุการณ์ เมื่อมีการเมื่อมีการ คลิกเลือกรายการ ด้วยฟังก์ชัน
AdapterView.OnItemSelectListener ซึ้งจะเขียนแยก โดยใช้ชื่อว่า onSelect

จากนั้นเราก็มาเขียนฟังก์ชัน AdapterView.OnItemSelectListener โดยใช้ชื่อว่า onSelect

โดยที่ข้างใน จะมีอีก 2 ฟังก์ชันที่เราต้องเขียนคือ
onItemSelected : เมื่อมีการเลือกรายการ
onNotThingSelected : เมื่อไม่มีการเลือกรายการ
วิธีการ
ถ้ามีการ คลิกเลือก item ใน Spinner ตัวใดก็ตาม
1. ให้เก็บค่า ตําแหน่งที่ถูกเลือก ของ Spinner แต่ละตัวไว้ ในตัวแปรที่ใช้เก็บ
ตําแหน่งของแต่ละตัวใน TempConv ด้วยฟังก์ชัน
getSelectedItemPosition ของ Spinner แต่ละตัว
2. ให้ TextView ที่แสดงหน่วย แสดงค่าตําแหน่งของ หน่วยที่จะแปลง
จาก ตําแหน่งที่ถูกเลือก
 3. ตรวจสอบดูว่า EditText ว่าหรือป่าวถ้าว่า ให้ประมลผล หาคําตอบ จะได้ว่า

AdapterView.OnItemSelectedListener onSelect = new

AdapterView.OnItemSelectedListener(){
public void onItemSelected(android.widget.AdapterView<?> arg0,
View arg1, int arg2, long arg3) {
TempConv.inputPosition = inputUnit.getSelectedItemPosition();
TempConv.outputPosition = outputUnit.getSelectedItemPosition();
unit.setText(TempConv.unitList[TempConv.outputPosition]);

if(input.getText().length() > 0){
result.setText(TempConv.getResult(input.getText().toString()));
}
};
public void onNothingSelected(android.widget.AdapterView<?> arg0) {

};
};

drbomkung@gmail.com