EditText

Project : EditTextDemo

สําหรับโปรเจ็กนี้ จะแนะนําให้รู้จักกับ EditText ซึ่งใช้ในการ Input ข้อมูล โดยที่เราจะนําค่าที่ user

ใส่ใน EditText ไปแสดงใน TextView โดยการคลิก Button

<?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" >

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

<EditText
android:id = "@+id/editText"
android:layout_width = "240dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "2dip"
android:inputType = "textAutoComplete"
android:hint = "Enter Text Here!" >
</EditText>

<Button
android:id = "@+id/button"
android:layout_width = "50dip"
android:layout_height = "wrap_content"
android:text = "OK" >
</Button>
</TableRow>

<TextView
android:id = "@+id/textView"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:layout_margin = "10dip"
android:background = "#252525" >
</TextView>

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

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

orientation : อะไรก็ตามที่ใส่เข้าไปใน linear จะเรียงต่อกันตามแนวดิ่ง
width : กว้าง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ
height : สูง เท่ากับขนาดของ parent ในที่นี้ คือ จอภาพ

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

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

width : กว้าง เท่ากับ ขนาดของ parent ที่ TableRow อยู่ ในที่นี้คือ LinearLayout
height : สูง เท่ากับ ขนาดของข้อมูลที่อยู่ข้างใน ซึ่งในที่นี้คือ EditText , Button
margin : คือให้ถูกดันเข้ามา จาก 4 ด้านเท่าๆกัน คือ บน ล่าง ซ้าย ขวา ขนาด 10 dip
gravity : มีค่าเป็น center_horizontal คือ ให้อะไรก็ตามที่อยู่ข้างใน เรียงต่อกันในแนวนอน และ อยู่ตรงกลาง

<EditText
android:id = "@+id/editText"
android:layout_width = "240dip"
android:layout_height = "wrap_content"
android:layout_marginTop = "2dip"
android:inputType = "textAutoComplete"
android:hint = "Enter Text Here!" >
</EditText>

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

id : มีชื่อตัวแปรว่า editText
width : กว้าง เท่ากับ 240 dip
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ EditText , Button
marginTop : คือให้ถูกดันลงมาจาก ด้านบน ขนาด 2 dip
inputType : เป็นการกําหนดชนิดของการ input ในที่นี้คือ AutoComplete
hint : เป็นตัวอักษรที่แสดงเมื่อ EditText ว่าง
 <Button
android:id = "@+id/button"
android:layout_width = "50dip"
android:layout_height = "wrap_content"
android:text = "OK" >
</Button>

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

id : มีชื่อตัวแปรว่า button
width : กว้าง เท่ากับ 50 dip
height : สูง เท่ากับขนาดของข้อมูลที่อยู่ข้างใน ซึ่ง ในที่นี้คือ คําว่า OK
text : เป็นการใส่ข้อความให้กับปุ่ม ในที่นี้คือ OK

<TextView
android:id = "@+id/textView"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:layout_margin = "10dip"
android:background = "#252525" >
</TextView>

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

id : มีชื่อตัวแปรว่า textView
width : กว้าง เท่ากับขนาดความกว้างของ parent ในที่นี้คือ LinearLayout
height : สูง เท่ากับขนาดความสูงของ parent ในที่นี้คือ LinearLayout
margin : เป็นการดันเข้ามาเท่าๆกัน จาก 4 ด้าน คือ บน ล่าง ซ้าย ขวา ขนาด 10 dip
background : เป็นการกําหนดสีพื้นในที่นี้คือ #252525 คือสีเทา
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class EditTextDemo extends Activity {

EditText editText;
Button button;
TextView textView;

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

editText = (EditText)findViewById(R.id.editText);
textView = (TextView)findViewById(R.id.textView);
button = (Button)findViewById(R.id.button);
button.setOnClickListener( new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
textView.setText( editText.getText() );
}
});

}
}

EditText editText;
Button button;
TextView textView;

Code Java ในการประกาศตัวแปร EditText , Button , TextView

editText = (EditText)findViewById(R.id.editText);

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

 textView = (TextView)findViewById(R.id.textView);

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

button = (Button)findViewById(R.id.button);
button.setOnClickListener( new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
textView.setText( editText.getText() );
}
});

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

และ การกําหนดเหตุการณ์เมื่อ กดปุ่ม คือ
ให้เอา ข้อความที่ถูกใส่ใน EditText มาแสดงใน TextView

เราจะ เอาค่าจาก EditText ได้ด้วย ฟังก์ชัน getText() มาใส่ให้ TextView จะได้ว่า

textView.setText( editText.getText() );

drbomkung@gmail.com