Animation và Transition trong lập trình Android cơ bản

Khóa học lập trình Android cơ bản

5.0 (1 đánh giá)
Tạo bởi HowKteam Cập nhật lần cuối 5 năm trước 62.961 lượt xem 0 bình luận
Tác giả/Dịch giả: HowKteam
Học nhanh

Danh sách bài học

01. Giới thiệu lập trình Android và cài đặt môi trường 02. Các chức năng cơ bản của Android Studio 03. Cài đặt máy ảo Android - Có thể bạn chưa biết 04. Cách debug cơ bản với Android Studio 05. Các thành phần giao diện (UI) cơ bản 06. Intent & Manifest trong Lập trình Android 07. Vòng đời của Activity trong Android 08. Fragment và cơ chế BackStack 09. Material Design và Coding Convention 10. ListView và Custom Adapter 11. RecyclerView và ViewHolder trong Android Studio 12. Giao diện trượt ngang với ViewPager và Tab trong Android cơ bản 13. Animation và Transition trong lập trình Android cơ bản 14. Xử lý bất đồng bộ trong lập trình Android cơ bản 15. JSON và web API trong lập trình Android cơ bản 16. Permission trong Android 17. Xử lý nội dung đa phương tiện 18. Lưu trữ dữ liệu với SharedPreferences 19. Lưu trữ dữ liệu với SQLite 20. Lưu trữ dữ liệu với SQLite (Thực hành) 21. Thực hành SQLite với Sugar ORM 22. Tích hợp mạng xã hội - Tạo app Facebook 23. Tích hợp mạng xã hội - Login với Facebook 24. Tích hợp mạng xã hội vào ứng dụng Android (Google) 25. Tích hợp mạng xã hội vào ứng dụng Android (Google) - Phần 2 26. Google Cloud Messaging và Push Notification trong Android - Phần 1 27. Google Cloud Messaging và Push Notification trong Android - Phần 2

Animation và Transition trong lập trình Android cơ bản

Dẫn nhập

Ở các bài học trước, chúng ta đã cùng nhau tìm hiểu về GIAO DIỆN TRƯỢT NGANG BẰNG VIEWPAGER & TAB (nhằm tạo ra các ứng dụng đọc sách / truyện / báo. Và cũng nhờ đó mà các bạn cũng thấy được một chút về hiệu ứng chuyển động trong các thành phần giao diện Android.

Hôm nay chúng ta sẽ đào sâu thêm một chút vào nó: Animation và Transition – các loại hiệu ứng trong Android. Mình sẽ cố gắng đưa nhiều hình ảnh để các bạn xem cho sướng lỗ mắt. À nhưng đừng quên đọc code để hiểu nhé.


Nội dung

Để đọc hiểu bài này tốt nhất các bạn nên có kiến thức cơ bản về các phần:

Trong bài học này, chúng ta sẽ cùng tìm hiểu các vấn đề:

  • Animation trong Android.
  • Cách tạo một số animation thông dụng.
  • Một số thư viện hỗ trợ animation.

Animation

Bước 1: Để bắt đầu thực hành, chúng ta tạo một project mới toanh mang tên AnimationExample nhé:

Animation và Transition trong lập trình Android cơ bản

Các bạn chú ý: Do Animation API được cung cấp từ API 11, tuy nhiên sau một vài level thì API mới đầy đủ hơn, nên chúng ta đặt mức API của project là 13:

Animation và Transition trong lập trình Android cơ bản

Bước 2: Chọn loại Activity là Empty Activity. Đặt tên là MainActivity. Sau đó tạo thêm một Activity thứ hai là SecondActivity. Cả 2 Acitivty đều có layout XML tương ứng là activity_main.xml activity_second.xml:

Animation và Transition trong lập trình Android cơ bản

Ok, chúng ta sẽ đi từ animation đơn giản đầu tiên. Nhìn chung tùy loại máy Android mà hiệu ứng chuyển cảnh giữa các Activity khác nhau. Nhưng mình để ý thì kiểu sau đây khá phổ biến:


Animation chuyển giữa các Activity

Các bạn xong 2 bước dạo đầu ở trên rồi chứ? Chúng ta sang một phần mới ngay đây:

Bước 1: Tạo một Button có nhiệm vụ chuyển từ MainActivity.java sang SecondActivity.java. Quá dễ phải không? Nếu chưa biết các bạn hãy xem lại bài INTENT & MANIFEST nhé.

Activity_main.xml:

MainActivity.java 

Và đừng quên khai báo SecondActivity trong file AndroidManifest.xml nhé, nếu không sẽ bị crash app đó:

AndroidManifest.xml

Và chạy app, chúng ta sẽ được một màn chuyển cảnh dạng như sau (để ý lúc ấn nút):

Animation và Transition trong lập trình Android cơ bản

Bước 3: Các bạn chuột phải vào thư mục /res trong cửa sổ Android Studio > chọn New > Android resource directory:

Animation và Transition trong lập trình Android cơ bản

Và tạo một folder resource mới, ở Resource type các bạn chọn là Anim và nhấn OK:

Animation và Transition trong lập trình Android cơ bản

Và chúng ta có folder anim ở cột trái như hình:

Animation và Transition trong lập trình Android cơ bản

Bước 4: 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:

Animation và Transition trong lập trình Android cơ bản

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

SecondActivity.java

Chạy lại app. Ngạc nhiên chưa?

Animation và Transition trong lập trình Android cơ bản

OK chắc các bạn cần lời giải thích một chút về animation. Ở đây mình giải thích file slide_in_right.xml nhé:

  • Thời gian diễn ra hiệu ứng là 400ms (mili giây): android:duration=400
  • fromXdelta: Đặt vị trí gốc là bên trái 100% so với vị trí ban đầu (giống như bước từ cánh gà trên sân khấu ra.
  • 2 thuộc tính alpha là để chỉ định độ trong suốt. Ở đây đều đặt là 100 (không dùng đến). Các bạn thử thay đổi sổ và chạy lại xem sao.

OK. Vậy là chúng ta đã xong một dạng animation hết sức cơ bản rồi nhé. Nào, cùng sang vòng tiếp theo!


Hiệu ứng với ViewPropertyAnimator

Để 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é:

Animation và Transition trong lập trình Android cơ bản

Nếu như vì lý do nào đó mà cột bên trái của bạn trông như này thì đừng lo, nó là file build.gradle trong thư mục app/

Animation và Transition trong lập trình Android cơ bản

Sửa số bên cạnh dòng minSdkVersion thành 16 (1) rồi nhấn Sync Now (2):

Animation và Transition trong lập trình Android cơ bản

Đợ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”:

activity_main.xml

* Ghi chú: Các bạn có để ý là mình sử dụng thuộc tính layout_below không? Đó là vì ViewGroup bao ngoài là RelativeLayout, nếu không sử dụng layout_below thì nút nọ sẽ đè lên nút kia. Học bài mới nhưng không quên bài cũ, nhỉ? CÁC THÀNH PHẦN GIAO DIỆN CƠ BẢN 

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:

MainActivity.java

Và chúng ta có được màn hình MainActivity với 2 nút. Bấm vào để xem hiệu ứng nhé:

Animation và Transition trong lập trình Android cơ bản


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.

Bước 1: Thêm id cho layout bao ngoài (cái RecyclerView ý), đổi nó thành LinearLayout (để làm gì thì lát nữa bạn sẽ thấy), đồng thời thêm 1 button thứ ba để khi click vào, ta tạo một button :

activity_main.xml

Bước 2: Và kế tiếp là file MainActivity.java

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à:

Animation và Transition trong lập trình Android cơ bản

Click vào nút “Them”, bạn sẽ thấy hiệu ứng diễn ra.


Kết luận

Qua bài này chúng ta đã nắm được Animation cơ bản trong Android và một số cách tạo hiệu ứng cơ bản.

Bài sau chúng ta sẽ tìm hiểu Cách kết nối với Web API, gửi nhận dữ liệu và phân tích chúng bằng OkHttp và Moshi thông qua bài XỬ LÝ BẤT ĐỒNG BỘ.

Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.


Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Animation và Transition trong lập trình Android cơ bản dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên likeshare để ủng hộ Kteam và tác giả nhé!


Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Tác giả/Dịch giả

Khóa học

Khóa học lập trình Android cơ bản

Serial tutorial hướng dẫn lập trình Android cơ bản

Đánh giá

5.0
1 đánh giá
Đánh giá
5
1
4
3
2
1
dungdep0907 đã đánh giá 3 năm trước

Tuyệt vời

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập
Không có video.