BÀI 32 - HIỆU ỨNG CHUYỂN CẢNH TRONG LẬP TRÌNH ANDROID
Video bài học:
Bước 1: Tạo thư mục chứa layout chuyển cảnh. res > chọn New > Android resource directory:
Và tạo một folder resource mới, ở Resource type các bạn chọn là Anim và nhấn OK:
Bước 2: Bây giờ chúng ta sẽ tạo ra file xml chứa hiệu ứng di chuyển từ phải sang trái và từ trái sang phải cho 2 activity đã tạo từ đầu nhé: Chuột phải vào thư mục anim/ , chọn New > Animation Resource file:
Chúng ta soạn 2 file xml trong /anim , file code xml có tên và nội dung tương ứng là:
slide_in_right.xml
slide_out_left.xml
Và cuối cùng, nhét 2 hiệu ứng này vào Activity thông qua hàm overridePendingTransition:
MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
btnChange = (Button) findViewById(R.id.btn_change);
final Intent changeActivity = new Intent(this, SecondActivity.class);
btnChange.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startActivity(changeActivity);
SecondActivity.java
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_second);
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
}
Để thực hành phần này, chúng ta cần có một chút thay đổi là nâng mức API lên 16 vì một số hàm chỉ có trong API 16.
Bước 1: Các bạn mở file build.gradle (Module: app) lên như hình. Có 2 file build.gradle, nhớ chọn đúng cái nó ghi Module: app nhé:
Sửa số bên cạnh dòng minSdkVersion thành 16 (1) rồi nhấn Sync Now (2):
Đợi một lúc cho Android Studio sync project rồi sang bước tiếp theo.
Bước 2: Chúng ta sẽ sử dụng lại code ở ví dụ thứ nhất, và thêm một button nữa, đặt chữ trong nút đó là “Di chuyen”:
Bước 3: Phần hay là đây: Chúng ta sẽ đặt thuộc tính chuyển động cho View bằng ViewPropertyAnimator. Ở ví dụ này là translationX:
btnMove.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (!clicked) {
btnMove.animate().translationX(400).withLayer();
clicked = true;
} else {
btnMove.animate().translationX(0).withLayer();
clicked = false;
}
}
});
Kết quả là nút "DI CHUYEN" sẽ nhảy qua nhảy lại 400dp sau mỗi lần click
Layout Animation
Bằng cách sử dụng lớp LayoutTransition, chúng ta cũng có thể thay đổi hiệu ứng ở layout bao ngoài, và những thay đổi của các thành phần con trong nó cũng sẽ được tạo hiệu ứng.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
overridePendingTransition(R.anim.slide_in_right, R.anim.slide_out_left);
container = (LinearLayout) findViewById(R.id.activity_main);
LayoutTransition l = new LayoutTransition();
l.enableTransitionType(LayoutTransition.CHANGING);
container.setLayoutTransition(l);
btnAdd = (Button) findViewById(R.id.btn_add);
btnAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
container.addView(new Button(MainActivity.this));
}
});
Giải thích một chút với các bạn:
Đối tượng LayoutTransition nhằm tạo hiệu ứng khi nhấn nút tạo ra nút mới.
LinearLayout hay RelativeLayout đều là ViewGroup, nên chúng đều có hàm setLayoutTransition.
Nếu không sử dụng hàm setLayoutTransition thì khi nhấn nút Thêm, chúng ta sẽ chỉ thấy nút mới hiện ra mà không có hiệu ứng gì cả.
Và kết quả là:
