Hướng dẫn lập trình Android bài 2

Bài 2: Các view cơ bản trong Android


Nội dung bài học

1.
2.
3.

Các layout cơ bản trong Android
Các view cơ bản trong Android
Các đơn vị đo trong Android


Các layout cơ bản trong Android
1.1. LinearLayout

-

Là layout rất phổ biến và hay được dùng trong thiết kế giao diện.
Sắp xếp các view theo hai hướng từ trái qua phải hoặc từ trên xuống dưới.


Các layout cơ bản trong Android

 Các thuộc tính cần lưu ý
- android:orientation: Thuộc tính này định nghĩa layout theo hướng từ trái sang
-

phải hoặc từ trên xuống dưới.

android:layout_weight: Thuộc tính chia layout thành các phần bằng nhau.
android:weightSum: Thuộc tính này quyết định giá trị lớn nhất cho thuộc tính
layout_weight. Ví dụ nếu ta set thuộc tính android:weightSum là 1 thì các view
con bên trong phải có tổng layout_weight = 1.


Các layout cơ bản trong Android
 Ví dụ:
<LinearLayout xmlns:android=" />xmlns:tools=" />android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1" >
 
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:text="Textview 1" />
 
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:text="Textview 2" />
</LinearLayout>

 
</LinearLayout>


Các layout cơ bản trong Android

1.2. RelativeLayout

-

Là layout phổ biến nhất hiện nay trong thiết kế giao diện.
Sắp xếp các view theo vị trí tương đối giữa các view khác thông qua id của view.
Hạn chế việc thay đổi id của view nếu không layout sẽ bị xáo trộn.


Các layout cơ bản trong Android
Các thuộc tính cần lưu ý

-

android:layout_below: Thuộc tính này cho phép một view bên dưới một view khác thông qua Id của view.
android:layout_toRightOf: Thuộc tính này cho phép một view nằm bên phải một view khác thông qua Id của view.
android:layout_toLeftOf: Thuộc tính này cho phép một view nằm bên trái một view khác thông qua Id
android:layout_alignParentLeft: Thuộc tính này cho phép một view nằm ở bên trái của view cha(RelativeLayout ngoài
cùng).

-

android:layout_alignParentRight: Thuộc tính này cho phép một view nằm ở bên phải của view cha(RelativeLayout
ngoài cùng).

-

android:layout_alignParentTop: Thuộc tính này cho phép một view nằm ở phía trên cùng (Top) của view
cha(RelativeLayout ngoài cùng).

-

android:layout_alignParentBottom: Thuộc tính này cho phép một view nằm ở dưới đáy của view cha(RelativeLayout
ngoài cùng).


Các layout cơ bản trong Android


Ví dụ:

<RelativeLayout xmlns:android=" />xmlns:tools=" />android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
 
android:id="@+id/tv_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Textview 1" />
 
android:id="@+id/tv_2"
android:layout_width="match_parent"

android:layout_height="wrap_content"
android:text="Textview 2"
android:layout_below="@+id/tv_1"/>
 
</RelativeLayout>


Các layout cơ bản trong Android
1.3. FrameLayout

-

Khi chúng ta sử dụng FrameLayout thì các view luôn được gắn ở góc trái trên cùng màn hình, nó không
cho phép chúng ta thay đổi vị trí của các view.

-

Các view đưa vào sau sẽ đè lên trên và che khuất các view trước đó.


Các layout cơ bản trong Android


Ví dụ:

xmlns:android=" />xmlns:tools=" />android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

android:id="@+id/tv_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:text="Textview 1" />
android:id="@+id/tv_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#0033CC"
android:layout_marginTop="10dp"


Các layout cơ bản trong Android
1.4. TableLayout
Layout này trong thực tế ít được sử dụng đến. Layout này cho phép
chúng ta sắp xếp các view theo dạng bảng (dòng và cột).
TableLayout sẽ xem dòng nào có view nhiều nhất để xác định rằng nó
có bao nhiêu cột.

-


Các layout cơ bản trong Android


-

Các thuộc tính cần lưu ý

-

android: stretchColumns : Thuộc tính này để dãn đều các view, các cell (Thường
dùng dấu *)

android:layout_span: Thuộc tính này để trộn các cột.
android:layout_column: Thuộc tính này để di chuyển các view đến một cột nào
đó trên một dòng.


Các layout cơ bản trong Android


Ví dụ:

<TableLayout xmlns:android=" />xmlns:tools=" />android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:stretchColumns="*" > 
android:layout_width="match_parent"
android:layout_height="wrap_content" > 
android:id="@+id/tv_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:text="Textview 1" /> 
android:layout_width="match_parent"

android:layout_height="wrap_content"
android:background="#FF0000"
android:text="Textview 11" /> 
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:text="Textview 12" />
</TableRow> 


Các layout cơ bản trong Android
1.5. AbsoluteLayout

-

Layout này ít được sử dụng.
Các bạn tự tìm hiểu.


Các view cơ bản trong Android
2.1. Textview

- Dùng để hiển thị nội dung là text.
 Các thuộc tính cần lưu ý
- android:text : Thuộc tính này để setText cho Textview. Chúng ta truyền chữ vào để
-

hiển thị lên giao diện.

android:textColor: Thuộc tính này để thiết lập màu chữ cho text.
android:textSize: Thuộc tính này để thiết lập cỡ chữ cho text.
android: textStyle: Thiết lập style cho text(bold, italic).


Các view cơ bản trong Android



Ví dụ:

android:id="@+id/tv_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:text="Textview 1"
android:textColor="#ffffff"
android:textSize="16dp"
android:textStyle="bold"/>


Các view cơ bản trong Android
2.2. EditText


-

Cho phép người dùng nhập nội dung bất kỳ từ bàn phím.

-

android:inputType: Thuộc tính này cho phép bạn thiết lập nội dung mà người
dùng nhập vào là chữ, là số hay là mật khẩu.

-

Các thuộc tính cần lưu ý
android:hint: Thuộc tính này dùng để hiển thị suggestion cho người dùng. Nếu
người dùng nhập nội dung vào thì suggestion đó sẽ biến mất. (suggestion: Bạn
hãy nhập tên, bạn hãy nhập mật khẩu...)

android:password: Thuộc tính này cho phép người dùng nhập vào nội dung với
mục đích là password. Nội dung nhập xong sẽ bị ẩn đi.


Các view cơ bản trong Android



Ví dụ:

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Nhap noi dung vao day"/>


Các view cơ bản trong Android

2.3. ImageView

- Dùng để hiển thị ảnh lên giao diện.
 Các thuộc tính cần lưu ý
- android:scaleType: Thuộc tính này cho phép resize ảnh.
- android:background: Thuộc tính này sẽ scale ảnh.
- android:src: Thuộc tính này không làm scale ảnh


Các view cơ bản trong Android



Ví dụ:

android:layout_width="200dp"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />


Các view cơ bản trong Android
2.4. Button
- Nếu các bạn muốn cho người dùng thực hiện một hành động nào đó như nhấn
button để đăng ký, nhấn button để đăng nhập thì chúng ta sử dụng Button.



Ví dụ:

android:id="@+id/btn_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"/>


Các view cơ bản trong Android

 Xử lý sự kiện click
Button btnLogin = (Button) findViewById(R.id.btn_login);
btnLogin.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
System.out.println("Bạn đã click
}
});

vào button");


Các view cơ bản trong Android
2.5. Checkbox



Cho phép người dùng lựa chọn 1 hay nhiều tùy chọn.
Ví dụ:

<LinearLayout xmlns:android=" />xmlns:tools=" />android:layout_width="match_parent"

android:layout_height="match_parent"
android:orientation="vertical" >
 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Android" /> 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ios" /> 
</LinearLayout>


Các view cơ bản trong Android
2.6. RadioButon

-

Chỉ cho phép người dùng chọn 1 trong nhiều tùy chọn.

Ví dụ:
<LinearLayout xmlns:android=" />xmlns:tools=" />android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > 
android:layout_width="match_parent"
android:layout_height="wrap_content" > 

android:id="rb_nam"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="true"
android:text="Nam" /> 
android:id="rb_nu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nữ" />
</RadioGroup>
</LinearLayout>


Các đơn vị đo trong Android
3.1. px - pixel

-

Thường được dùng để nói về độ phân giải của điện thoại. Thiết bị có độ phân giải
càng cao thì càng có nhiều pixels.
Không nên dùng pixel làm đơn vị trong các view như Textview,Button... vì px sẽ
bị thay đổi theo độ phân giải của máy và làm hỏng layout.