Trong bài này mình sẽ giới thiệu cho các bạn học android về EditText và TextView 2 thành phần được dùng khá nhiều trong các app android.
EditText: Các bạn có thể hiểu đơn giản giống như ô đăng nhập nhập của yahoo hay Facebook nó là một loại View trong android hỗ trợ người dùng nhập dữ liệu.
TextView: là một loại View trong andoird dùng để hiển thị nội dung các text (có thể là nội dung bất kỳ hoặc các bài báo,bài hát …)
Mình sẽ demo bằng một ứng dụng đơn giản theo kịch bản sau: Giao diện gồm có 3 thành phần 1 EditText, 1 TextView, 1 Button. Khi bạn click vào Button thì nội dung text trong EditText sẽ được gán cho TextView
Để làm được ví dụ này các bạn thực hiện lần lượt các bước sau
Bước 1: Vào thư mục res->values
– Mở file: strings.xml – thông thường các bạn nên khai báo tất cả các String được dùng trong app ở đây. Điều này rất có lợi cho việc multi Langues trong các android app cũng như dễ dàng sửa đổi nội dung String mà không phải sửa lại code vi vậy các bạn nên quen làm với các file strings hay color để hạn chế Hardcoded
1
2
3
4
5
6
7
8
9
10
11
| <?xml version="1.0" encoding="utf-8"?><resources><string name="app_name">TextViewEdittextExample</string> <string name="action_settings">Settings</string> <string name="hello_world">Hello world!</string> <string name="EnterChar">Nhap chuoi bat ky</string> <string name="ChuoiVuaNhap">Chuoi ban nhap se hien thi o day!</string> <string name="ClickMe">Click de hien thi text</string> <string name="MustEnterString">Ban khong the nhap chuoi ky tu trong</string></resources> |
– Tạo file color.xml – để tao file này bạn chuột phải vào folder value -> New -> Android XML File
(Nếu k có Android XML File bạn chọn Other -> Android -> Android XML File)
Đây là các tạo chung cho tất cả các file XML trong android. Mình thường tạo file này để lưu tất cả giá trị màu được sử dụng trong android app
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <?xml version="1.0" encoding="utf-8"?><resources><color name="red">#FF0000</color> <color name="grey">#808080</color> <color name="white">#FFFFFF</color> <color name="black">#000000</color> <color name="yellow">#FFFF00</color> <color name="lightgreen">#66FF33</color> <color name="yellow1">#F9E60E</color> <color name="yellow2">#F9F89D</color> <color name="orange4">#F7BE45</color> <color name="orange5">#F7D896</color> <color name="blue">#0000FF</color> <color name="blue2">#19FCDA</color> <color name="blue25">#D9F7F2</color> <color name="grey05">#ACA899</color> <color name="white1">#FFFFFF</color> <color name="white2">#DDDDDD</color></resources> |
Bước 2: Vào thư mục res->layout -> activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| <!-- cac thanh phan android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" de xac dinh bien cua cac View và ViewGroup con cua RelativeLayout cu the trong vi du nay thi cac View va ViewGroup cach bien phai ben trai ben tren va ben duoi "16dp" gia tri nay duoc khai bao trong file dimens.xml cac ban co the thay doi gia tri nay de ro hon va padding--> 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=".MainActivity" ><!-- thuoc tinh android:orientation="vertical" de qui dinh ViewGroup LineLayout co huong theo chieu doc dieu nay co nghia cac View va ViewGroup con cua LinearLayout se duoc sap xep theo chieu doc neu ban chon horizontal thi cac View nay se duoc sap theo chieu ngang minh se lam ro hon van de nay trong bai ve Layout --><LinearLayout android:id="@+id/ln1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginBottom="50dp" android:orientation="vertical" ><!-- thuoc tinh android:hint duoc the hien mo trong EditText de goi y cho nguoi dung ve viec nhap du lieu thuoc tinh android:inputType dung de qui dinh INPUT cho EditText Cac ban co the thu voi cac loai inputType khac --><EditText android:id="@+id/etInput" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="@string/EnterChar" android:inputType="text" /><!-- android:text="@string/ChuoiVuaNhap" android:textColor="@color/red" android:textSize="18sp" 3 thuoc tinh text, textColor, va textSize de qui dinh ve noi dung mau sac va do lon cua TextView --><TextView android:id="@+id/tvShow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" android:text="@string/ChuoiVuaNhap" android:textColor="@color/red" android:textSize="18sp" /> </LinearLayout><!-- android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" 2 thuoc tinh nay qui dinh Button o duoi cung va chinh duoi cua RelativeLayout --><Button android:id="@+id/btShowText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:text="@string/ClickMe" /></RelativeLayout> |
Bước 2: Mở file MainActivity.Java trong folder src
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| package truongbs.fet.hut.textviewedittextexample;import android.app.Activity;import android.os.Bundle;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.EditText;import android.widget.TextView;import android.widget.Toast;public class MainActivity extends Activity {// khai bao cac View private Button btShowText; private EditText etInput; private TextView tvShow;@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);// ket noi bien voi layout de dieu khien btShowText = (Button) findViewById(R.id.btShowText); etInput = (EditText) findViewById(R.id.etInput); tvShow = (TextView) findViewById(R.id.tvShow);// handler su kien click vao button btShowText.setOnClickListener(new OnClickListener() {@Override public void onClick(View arg0) { // TODO Auto-generated method stub String strET = etInput.getText().toString();if ((strET.equals("")) || (strET == null)) { // neu chuoi la "" hoac null thi hien thi thong bao String strToast = getResources().getString( R.string.MustEnterString); Toast.makeText(MainActivity.this, strToast, Toast.LENGTH_LONG).show(); } else { // hien thi chuoi vua duoc nhap // bang cach setText cho TextView tvShow.setText(strET);}} });}@Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; }} |
Kết quả:
0 nhận xét:
Đăng nhận xét