Dưới gốc độ Java, mỗi view là một lớp con của lớpandroid.view.View. Việc tạo ra
một view trên giao diện chính là tạo ra một thể hiện (instance) của lớp View tương
ThS. Bùi Trung Úy 50
các views khác được thêm đến view gốc nhờ phương thức addView() của đối tượng view gốc này.
Mỗi view có nhiều thuộc tính (properties) như Id (định danh), Margin (canh biên),
Padding (canh lề), BackgroundColor (màu nền), v.v. và việc sử dụng hay cung cấp các
giá trị của các thuộc tính của một view thông qua các phương thức dạng get hay set
tương ứng. Chẳng hạn, phương thức setBackgroundColor() dùng để thiết lập màu nền
cho một view (như Button) và getBackgroundColor()dùng để lấy màu nền của view đó.
Và điều quan trọng cần nhớ rằng, các views trên cùng một giao diện luôn có mối
quan hệ mật thiết với nhau như quan hệ anh-em, quan hệ cha-con,…Mối quan hệ giữa
các views hay cách thức các views xuất hiện được kiểm soát thông qua các layout.
Đối tượng LayoutParams (ViewGroup.LayoutParams) có vai trò quan trọng trong việc
kiểm soát các views trong các layouts tương ứng thông qua các quy định hay luật lệ
(rules), các luật lệ của một đối tượng LayoutParams được thiết lập nhờ phương thức
addRule(). Với layout đặc biệt như ConstraintLayout chúng ta phải kết hợp với đối
tượng ConstraintSet,...
Thực hành tạo views
Quay lại với ứng dụng HelloAndroid, mở tập tin MainActivity.java:
Vì chúng ta cần tạo một giao diện mới hoàn toàn bằng Java nên sẽ không dùng
giao diện trong tập tin activity_main.xml bằng cách comment hay xóa dòng mã sau
trong phương thứconCreate:
//setContentView(R.layout.activity_main);
Bây giờ chúng ta sẽ thêm view đầu tiên hay view gốc là một layout kiểu
LinearLayout. Đoạn mã tạo thể hiện cho đối tượng LinearLayout trong phương thứconCreate:
LinearLayout myLayout = new LinearLayout (this);
Lưu ý, khi chúng ta dùng lớp LinearLayout có thể phát sinh lỗi như sau trong
ThS. Bùi Trung Úy 51
Nguyên nhân là chúng ta chưa tham chiếu lớp ConstraintLayout đến dự án. Xử lý
đơn giản bằng cách (theo gợi ý của Android Studio) đặt con trỏ chuột trên từ
LinearLayout và nhấn tổ hợp phím Alt + Enter. Lúc này sẽ xuất hiện thêm dòng mã
khai báo phía trên:
import android.widget.LinearLayout;
Kế tiếp chúng ta sẽ thêm một Button (view con) đến LinearLayoutnhờ phương thức
addView của đối tượng myLayout.
Cuối cùng là hiển thị layout trên Activity bằng phương thức:
setContentView(myLayout);
Code củaMainActivity.javanhư sau:
package com.example.helloandroid; import android.widget.LinearLayout; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.widget.Button;
public class MainActivity extends AppCompatActivity { public static final String TAG ="HelloAndroid"; @Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
Log.d(TAG, "onCreate called!");
LinearLayout myLayout = new LinearLayout(this); Button myButton = new Button(this);
myButton.setText("NEXT"); myLayout.addView(myButton); setContentView(myLayout); }
}
ThS. Bùi Trung Úy 52
Thay đổi thuộc tính của view
Bây giờ giả sử chúng ta muốn Button có dòng chữ“Press Me”và có màu nền là
màu xanh lá cây (green), layout của chúng ta có màu nền là màu vàng (yellow). Các phương thức setText() và setBackgroundColor() của từng đối tượng tương ứng được sử dụng để thiết lập giá trị cho các thuộc tính Text hay BackgroundColor. Đoạn mã
trong phương thức onCreate() được cập nhật như sau:
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
Log.d(TAG, "onCreate called!");
LinearLayout myLayout = new LinearLayout(this); myLayout.setBackgroundColor(Color.YELLOW); Button myButton = new Button(this);
myButton.setBackgroundColor(Color.GREEN); myButton.setText("Press Me");
myLayout.addView(myButton); setContentView(myLayout); }
Định vị view trong giao diện
Mặc định, Button của chúng ta sẽ ở vị trí góc trái trên của layout. Chúng ta có thể
thay đổi kích thước và vị trí của Button trong layout, như hiển thị ở vị trí giữa màn
hình hay nằm về một hướng nào đó trong màn hình,…
Đểthiết lập quan hệ về kích cỡ (chiều cao và chiều rộng) giữa layout (view cha) và
Button (view con) chúng ta sử dụng thông qua đối tượng LayoutParams. Chú ý là tùy
thuộc view cha là loại ViewGroup nào (LinearLayout, RelativeLayout hay
ConstraintLayout,...) mà tham số của setLayoutParams() cần được khởi tạo từ lớp
LayoutParams của ViewGroup đó như: LinearLayout.LayoutParams,... và hai tham số
khởi tạo là chiều rộng và chiều cao của phần tử đó.
Chẳng hạn, để tạo kích cở cho view trong LinearLayout chúng ta dùng đối tượng
LayoutParamstương ứng là LinearLayout.LayoutParamsđược khởi tạo như sau:
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
Hai tham số trong phương thức khởi tạo là chiều rộng (width) và chiều cao
(height) của view. Giá trị của các tham số này có thể là:
• WRAP_CONTENT: điều chỉnh kích cỡ view vừa khớp với nội dung bên trong.
• MATCH_PARENT: mở rộng kích cỡ các view con khớp với view cha. • FILL_PARENT: điền đầy theo kích cở của view cha.
ThS. Bùi Trung Úy 53
Gán đối tượng LayoutParams đến Button qua phương thức setLayoutParams:
myButton.setLayoutParams(params);
Thiết lập kết nối vị trí giữa view con (Button) đến view cha (LinearLayout) dùng
phương thức setMargins() của đối tượng LayoutParams. Chẳng hạn, thiết lập khoảng
cách từ button đến mép trái layout là 60 pixels và và từ mép trên của button đến đến
mép trên layout là 100 pixels như sau:
params.setMargins(60, 100, 0, 0); //left, top, right, bottom
Code của onCreate được cập nhật như sau: @Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
Log.d(TAG, "onCreate called!");
LinearLayout myLayout = new LinearLayout(this); //myLayout.setBackgroundColor(Color.YELLOW); Button myButton = new Button(this);
myButton.setBackgroundColor(Color.GREEN); myButton.setText("Press Me");
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT); params.setMargins(60, 100, 0, 0); //left, top, right, bottom myButton.setLayoutParams(params);
myLayout.addView(myButton); setContentView(myLayout); }
Kết quả khi chạy ứng dụng:
Đối vớilayout đặc biệt nhưConstraintLayoutchúng ta có thể xác định kích cở và vị
trí của view thông qua đối tượng ConstraintSet như sau:
- Khai báo một thể hiện ConstraintSet:
ThS. Bùi Trung Úy 54
- Sao chép lại các ràng buộc trong ConstraintLayout hiện tại đến đối tượng
ConstraintSet dùng phương thứcclone: conSet.clone(myLayout);
- Thiết lập kích cở button thông qua đối tượng ConstraitSet:
conSet.constrainHeight(myButton.getId(), ConstraintSet.WRAP_CONTENT); conSet.constrainWidth(myButton.getId(), ConstraintSet.WRAP_CONTENT);
- Thiết lập kết nối vị trí giữa view con (Button) đến view cha (ConstraintLayout)
dùng phương thức connect.
conSet.connect(myButton.getId(), ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, 60); conSet.connect(myButton.getId(), ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP, 100);
- Cuối cùng là gán đối tượng ConstraintSet đến đối tượng ConstraintLayout dùng
phương thứcapplyTo:
conSet.applyTo(myLayout);
Code của phương thức onCreate() được sửalại như sau:
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
Log.d(TAG, "onCreate called!");
ConstraintLayout myLayout = new ConstraintLayout(this); Button myButton = new Button(this);
myButton.setText("Press Me"); myButton.setId(1001);
myLayout.addView(myButton); setContentView(myLayout);
ConstraintSet conSet = new ConstraintSet(); conSet.clone(myLayout); conSet.constrainHeight(myButton.getId(), ConstraintSet.WRAP_CONTENT); conSet.constrainWidth(myButton.getId(), ConstraintSet.WRAP_CONTENT); conSet.connect(myButton.getId(), ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, 60); conSet.connect(myButton.getId(), ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP, 100); conSet.applyTo(myLayout); }
Trong trường hợp muốn đưa Button đến giữa màn hình chúng ta có thể dùng các
phương thức đặc biệt làcenterHorizontally và centerVertically:
conSet.centerHorizontally(myButton.getId(), ConstraintSet.PARENT_ID); conSet.centerVertically(myButton.getId(), ConstraintSet.PARENT_ID);
ThS. Bùi Trung Úy 55