Giới thiệu
Những dòng chữ hiển thị trên thiết bị Android (TextView), cho đến những khung nhập liệu (EditText), những hình ảnh (ImageView), danh sách có thể cuộn lên, cuộn xuống (ListView, GridView, RecycleView) hay những cái button (Button) các bạn thể click… đều là những View trong android, những view này đều có một chức năng riêng. Trong bài viết này tôi sẽ cùng các bạn tìm hiểu một số view cơ bản trong android cũng như một số thuộc tính của nó để giúp các bạn có thể thiết kế những giao diện đơn giản khi mới lập trình di động với nền tảng này.
Căn bản về View
Những gì chúng ta nhìn thấy trên màn hình thiết bị android được gọi là View (trong window thường được gọi là control). View được vẽ trên thiết bị android với một hình chữ nhật.
Các view cơ bản và thường xuyên sử dụng trong android đó là:
- TextView
- EditText
- ImageView
- Button
- CheckBox
- RadioButton
Class View là class đại diện cho tất các các view khác, các view ở trên đều được kế thừa từ class View.
Các bạn có thể tìm hiểu chi tiết về class view ở ĐÂY.
Để tạo view trong android chúng ta có hai cách như sau:
Cách 1: Tạo bằng mã nguồn xml.
Ví dụ
1 2 3 4 5 6 7 8 |
<TextView android:id="@+id/tv_Hello" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#31a18c" android:textSize="18sp" android:textStyle="bold" android:text="Hello World!" /> |
Cách 2: Tạo bằng mã nguồn java.
1 2 3 |
TextView tvHello = new TextView(this); tvHello.setBackgroundColor(Color.parseColor("31a18c")); tvHello.setText("Hello World"); |
Các thuộc tính của view
layout_height
Thuộc tính này quy định chiều cao của view đó và thường có các giá trị như sau:
- match_parent: chiều cao của view sẽ bằng đúng chiều cao của phần tử cha chứa nó.
- wrap_content: chiều cao của view phụ thuộc vào content của view.
- giá trị xác định: xác định chiều cao của view theo một đơn vị nào đó (dp, px, in, mm, sp…)
layout_width
- match_width: chiều rộng của view sẽ bằng đúng chiều rộng của phần tử cha chứa nó.
- wrap_content: chiều rộng của view phụ thuộc vào content của view.
- giá trị xác định: xác định chiều rộng của view theo một đơn vị nào đó (dp, px, in, mm, sp…)
id
Thuộc tính này xác định id của view, được khai báo ở file định nghĩa giao diện xml và sử dụng lại trong code java để ánh xạ đối tượng.
Trong file xml
1 2 3 4 5 |
<TextView android:id="@+id/tv_message" android:layout_width="wrap_content" android:text="eitguide.com" android:layout_height="wrap_content"/> |
Và ánh xạ đối tượng TextView trong xml thông qua id trong java
1 |
TextView tvMessage = (TextView)findViewById(R.id.tv_message); |
Phương thức findViewById sẽ return về View cho nên chúng ta cần ép kiểu về kiểu chúng ta mong muốn, ở đây là TextView.
background
Thuộc tính này xác định màu nền của view.
1 |
android:background="#ffffff" // white color |
margin và padding
Hai thuộc tính margin và padding khá là quen thuộc với tất cả các bạn lập trình web, trong android hai thuộc tính này cũng như lập trình web và rất dễ nhầm lẫn.
Margin là khoảng từ các cạnh của view hiện tại tới các view khác.
Padding là khoảng cách từ các cạnh của view tới phần content của nó.
Minh họa bằng hình ảnh:
Để hiểu rõ các bạn theo dõi phần dưới đây:
View này tôi chưa set margin và padding cho nó
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/tv_message" android:text="Welcome to eitguide.com" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#1090a4"/> </FrameLayout> |
Và kết quả như sau:
Tôi thêm thuộc tính marginTop và marginLeft
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/tv_message" android:text="Welcome to eitguide.com" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="50dp" android:layout_marginLeft="32dp" android:background="#1090a4"/> </FrameLayout> |
Và cuối cùng là thêm thuộc tính paddingTop và padingBottom
Tới đây chắc rằng các bạn không còn nhầm lẫn hay cảm thấy khó khăn với hai thuộc tính này nữa. Tiếp theo chúng ta sẽ cùng nhau tìm hiểu các view trong android đã nêu ở trên.
Các View cơ bản trong android
TextView
TextView là view sử dụng để hiển thị text màn hình. TextView được định nghĩa bởi thẻ <TextView> trong xml.
1 2 3 4 5 |
<TextView attribute1="value" attribute2="value" attribute3="value" ... /> |
Tất cả các view được khởi tạo bằng xml BẮT BUỘC phải có hai thuộc tính đó là layout_width và layout_height.
Các thuộc tính:
android:text: Thuộc tính này xác định text (văn bản) sẽ hiển thị lên TextView.
1 2 3 4 |
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="text in here" /> |
android:textColor: Xác định màu chử của TextView.
1 2 3 4 |
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#19b698" /> |
android:textSize: Xác định size chử của TextView
1 2 3 4 |
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="18sp"/> |
android:textStyle: Xác định style chữ TextView, có ba giá trị là normal, bold (in đậm), ilalic (nghiêng).
android:background: Xác định màu nền TextView.
1 2 3 4 |
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#c0392b"/> |
android:drawableLeft: Xác định drawable (với những người mới bắt đầu thì có thể xem như là hình ảnh) nằm bên trái text.
1 2 3 4 5 6 7 |
<TextView android:id="@+id/tv_message" android:text="Welcome to eitguide.com" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/cast_ic_notification_0" android:background="#1090a4"/> |
Tương tự chúng ta có các thuộc tính android:drawableRight, android:drawableTop, android:drawableBottom nằm bên phải, trên, dưới text.
EditText
EditText là view dùng để lấy giá trị từ người dùng nhập vào. EditText được định nghĩa bởi thẻ <EditText> trong xml.
1 2 3 4 5 |
<EditText attribute1="value" attribute2="value" attribute3="value" .../> |
Hình ảnh EditText trên màn hình android
Một số thuộc tính của EditText
android:text: Xác định text hiển thị lên EditText
android:textColor: Xác định màu của text.
android:textSize: Xác định kích thước của text.
android:textStyle: Xác định style của text gồm các giá trị italic (nghiêng), bold (in đậm), normal (kiểu thường).
android:inputType: Xác định phương thức nhập của Edittext, có các giá trị như sau: text, number, textPassword, phone, textUrl…
Để lấy text của EditText trong java chúng ta làm như sau:
Bước 1: Lấy về EditText thông qua id trong file xml
1 |
EditeText edtMessage = (TextView)findViewById(R.id.edt_message); |
Bước 2: Sử dụng phương thức getText() của EditText để lấy text.
1 |
String value = edtMessage.getText().toString(); |
Ví dụ tôi có file xml
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <EditText android:id="@+id/edt_message" android:text="eitguide.com" android:layout_width="match_parent" android:layout_height="wrap_content" /> </FrameLayout> |
Và get text của EditText trong Java
1 2 |
EditText edtMessage = (EditText)findViewById(R.id.edt_message); String value = edtMessage.getText().toString(); |
Button
Button là view được sử dụng khá nhiều trong android, hầu như sử dụng ở mọi nơi cùng với EditText, TextView. Button có chức năng là làm nhiệm vụ nào đó khi mà người dùng click trong phương thức onClick.
Ví dụ về Button khai báo trong file xml.
1 2 3 4 5 6 7 |
<Button android:id="@+id/btn_Click" android:text="Click Me" android:textStyle="italic" android:textColor="@color/colorAccent" android:layout_width="wrap_content" android:layout_height="wrap_content" /> |
Một số thuộc tính của Button
android:id: Xác định id cho Button
android:text: Xác định văn bản sẽ hiển thị lên Button
android:textColor: Xác định màu văn bản của Button.
android:background: Xác định màu nền của Button
Để thực hiện những khối lệnh khi chúng ta click vào button, chúng ta làm như sau:
Bước 1: Lấy về đối tượng Buton thông qua id được khai báo button ở file xml
1 |
Button btnClick = (Button)findViewById(R.id.btn_click); |
Bước 2: Set bộ lắng nghe sự kiện cho Button thông qua phương thức setOnClickListener và handle các công việc cần xữ lý trong phương thức onClick
1 2 3 4 5 6 |
btnClick.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); |
ImageView
ImageView là một view sử dụng rất nhiều trong ứng dụng android, ImageView sử dụng để hiển thị hình ảnh.
Một số thuộc tính phổ biến của ImageView
android:id: Xác định id.
android:src: Xác định source hình ảnh hoắc drawable
android:scaleType: kiểu hiển thị hình ảnh của ImageView, có các giá trị fitCenter, fitStart, fitEnd, center, centerCrop, centerInside, matrix. Những kiểu hiển thị này tôi sẽ giới thiệu chi tiết ở bài viết sau.
Ví dụ khai báo ImageView trong file xml
1 2 3 4 5 6 |
<ImageView android:scaleType="centerCrop" android:src="@drawable/keep_calm" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" /> |
Các bạn thử thay đổi thuộc tính scaleType để thấy rõ sự khác biệt như thế nào nhé.
Để gán hình ảnh động trong java chúng ta sử dụng các phương thức sau:
Nếu Soure là một bitmap
1 |
void setImageBitmap(Bitmap bm) |
Nếu Soure là một id của image nằm trong thư mục drawable
1 |
void setImageResource(@DrawableRes int resId) |
Nếu Soure là một drawable
1 |
void setImageDrawable(@Nullable Drawable drawable) |
Lời kết
Qua bài viết này tôi và các bạn đã cùng tìm hiểm view trong android cũng như những view căn bản, thường dùng trong ứng dụng. Tuy kiến thức này không quá khó những các bạn phải tự làm lại để nắm vững những kiến thức này. Nếu có bất cứ thắc mắc khó khắn nào có thể để lại comment dưới bài viết, tôi sẽ sẵn sàng giải đáp thắc mắc của các bạn.
Anh cho em hỏi với ạ.
Ví dụ ta tạo 2 EditText trên cùng 1 hàng ngang, vậy phải làm sao để giữ cho cái khung bao quanh EditText có chiều rộng không đổi cho dù nhập nhiều giá trị vào đó, width luôn bằng 50% ý.
Em sử dụng LinearLayout nhé. chiều của nó là horizontal (chiều ngang). Với hai EditText trong LInearLayout này, mỗi EditText em set layout_width=”1″. Như vậy thì EditText thứ nhất sẽ chiếm 1/2 chiều ngang. EditText thứ hai cũng sẽ chiếm 1/2 chiều ngang.
Em xem qua bài viết về Layout trong Android: http://eitguide.com/layout-trong-android/
Cảm ơn anh ạ :))
mình có 2 câu hỏi về xml, m.n rep hộ với 😀
1) trong 1 textview có thể chèn 2 giá trị background khác nhau dc ko vậy ae?
2) mình có file css.xml chứa cặp tag … và khi muốn add vào 1 view trong main.xml thì mình dùng lệnh android:background=”@drawable/css” . Vậy nếu trong file css.xml mình có 2 cặp tag … khác nhau thì add vào main.xml như nào?
1) Không. Mỗi View có một background duy nhất. Nếu ý bạn đang nói là về gradient hay layer thì làm trong 1 file XML background.
2) Mình cho là bạn vẫn chưa hiểu rõ ý bạn muốn gì. Nhưng tạm trả lời là dùng layer-list hoặc clip.