Bài 13. TextView, EditText, Button trong Android phần 1

Android cung cấp rất nhiều View/Control để ta có thể tùy chọn thiết kế giao diện tương tác người dùng. TextView dùng để hiển thị dữ liệu, EditText để hiển thị và cho phép thay đổi thông tin, Button để ra lệnh, CheckBox để chọn nhiều lựa chọn, RadioButton để chọn một lựa chọn, ImagView để hiển thị hình ảnh…

Trong bài này Tui sẽ trình bày về 3 View cơ bản nhất, mà bất kỳ một phần mềm cùi bắp nào cũng có đó là: TextView, EditText và Button.

13.1 TextView

TextView là view dùng để chỉ hiển thị dữ liệu không cho phép người sử dụng thay đổi dữ liệu. TextView thuộc nhóm Common và Text trong công cụ Palette:

Ta có thể kéo thả các View vào giao diện thiết kế một cách dễ dàng.

Bảng 13.1. Các thuộc tính/sự kiện quan trọng của TextView

Các thuộc tính/sự kiện Mô tả
android:id Id của TextView
android:layout_width Độ rộng
android:layout_height Độ cao
android:text Chữ hiển thị lên giao diện
android:textColor Màu chữ
android:textSize Cỡ chữ
android:background Màu nền
android:hint Chữ gợi ý khi android:text rỗng

Để truy suất TextView ta cần đặt Id cho nó trong thanh công cụ Properties hoặc trong XML. Hàm findViewById đã được giới thiệu trước đó dùng để truy suất View (Hoặc dùng ViewBinding được trình bày trong bài 12):

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

Để thiết lập nội dung hiển thị ta có hai cách:

  • Trong Java code (Activity):

txtMessage.setText(“ Thầy Trần Duy Thanh ”);

  • Trong XML:

android:text=“ Thầy Trần Duy Thanh ”

[code language=”xml”]
<TextView
android:id="@+id/txtMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_red_light"
android:textColor="@android:color/holo_blue_light"
android:text="Khoa Hệ Thống Thông Tin"
android:textSize="30sp"
/>
[/code]

Ngoài id, text thì TextView còn có các thuộc tính quan trọng khác như: layout_width(thiết lập độ rộng), layout_height(thiết lập chiều cao), background(màu nền), textColor(màu chữ), textSize(cỡ chữ). Các thuộc tính cho TextView rất nhiều và được cung cấp sẵn trong công cụ Properties ta có thể vào đây để thao tác.

13.2 EditText

EditText là lớp kế thừa từ TextView, được dùng thay đổi nội dung text, chứa tất cả thuộc tính của TextView nên TextView hoạt động như thế nào thì EditText hoạt động như vậy, nằm trong nhóm Text của Palette. Đặt Id nên bắt đầu là là edt hoặc txt

Android đã tự động phân EditText thành nhiều loại khác nhau: Nhập chuỗi, số, điện thoại, email, mật khẩu … dựa vào thuộc tính inputType. Nhờ thuộc tính inputType mà trải nghiệm người dùng được tốt hơn, điện thoại sẽ hiển thị bàn phím tương ứng với inputType mà ta cấu hình giúp người dùng thao tác một cách dễ dàng và nhanh chóng:

EditText có nhiều thuộc tính quan trọng ta cần quan tâm:

Bảng 13.2. Các thuộc tính/sự kiện quan trọng của EditText

Các thuộc tính/sự kiện Mô tả
android:id Id của EditText
android:layout_width Độ rộng
android:layout_height Độ cao
android:text Chữ hiển thị lên giao diện
android:textColor Màu chữ
android:textSize Cỡ chữ
android:background Màu nền
android:hint Chữ gợi ý khi android:text rỗng
android:inputType Thiết lập loại dữ liệu nhập để có bàn phím phù hợp

Ta thấy trong nhóm Text rất nhiều View (EditText), tùy vào nhu cầu sử dụng mà ta kéo thả các EditText phù hợp ra.

Cấu trúc XML của Edittext:

[code language=”xml”]
<EditText
android:id="@+id/edtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="1"
android:textColor="@android:color/holo_blue_light"
android:inputType="textPassword"
android:text="hoilamgi"

/>

[/code]

Thuộc tính inPutType= “textPassword” giúp ta khi nhập dữ liệu vào thì phần mềm tự động mã hóa thành các ký tự * để bảo mật. Edittext ngoài ra còn sử dụng Hint để nhắc nhớ người dùng, ta có thể bổ sung android:hint = “nhập mật khẩu ở đây”, người dùng sẽ biết ô này dùng để làm gì.

Để truy suất ta cũng dùng hàm findViewById (Hoặc dùng ViewBinding được trình bày trong bài 12):

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

Để thay đổi nội dung hiển thị ta dùng: edtPassword.setText(“obama”)

Để lấy nội dung người dùng nhập liệu: edtPassword.getText().toString()

13.3. Button

Đối tượng Button được xây dựng từ TextView, cho phép thể hiện các nội dung văn bản, hình ảnh – nhận và phản hồi tương tác nhấn từ người dùng. Nên đặt Id cho Button bắt đầu bằng btn

Button thuộc nhóm Buttons hoặc Common trong công cụ Palette:

Các thuộc tính trong Button tương tự như trong TextView và EditText

Bảng 13.3. Các thuộc tính/sự kiện quan trọng của Button

Các thuộc tính/sự kiện Mô tả
android:id Id của EditText
android:layout_width Độ rộng
android:layout_height Độ cao
android:text Chữ hiển thị lên giao diện
android:textColor Màu chữ
android:textSize Cỡ chữ
android:background Màu nền
android:onClick Gán sự kiện cho Button

Cấu trúc XML của Button:

[code language=”xml”]
<Button
android:id="@+id/btnDangNhap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Đăng Nhập"
/>

[/code]

Button thường dùng để cho phép người dùng ra lệnh thực thi một nghiệp vụ nào đó, sự ra lệnh này gọi là các sự kiện (event). Button ngoài hiển thị dữ liệu còn có nhiệm vụ lắng nghe các sự kiện người dùng, hai cách nhanh nhất để lắng nghe sự kiện:

  • Lắng nghe trong XML: android:onClick=“tenPhuongThuc”
  • Lắng nghe trong java code:

btnDangNhap.setOnCLickListener(new OnClickLisntener() {

@Override

public void onClick(View v) {

xuLyDangNhap();

}

});

Chi tiết các kỹ thuật xử lý sự kiện sẽ được trình bày ở các bài sau.

Như vậy Tui đã trình bày xong phần lý thuyết của TextView, EditText và Button. Bài sau Tui sẽ làm một ví dụ cụ thể về ứng dụng của 3 Control này, dĩ nhiên Tui sẽ dùng kỹ thuật mới là ViewBinding để tương tác với các control trên giao diện, còn bạn nào  muốn dùng findViewById thì có thể xem tại đây).

Các bạn chú ý theo dõi nhé

Chúc các bạn thành công.

One thought on “Bài 13. TextView, EditText, Button trong Android phần 1”

Leave a Reply