Di động cho mọi người: Các hoạt động (Activities) và biểu tượng (icons) trong vòng đời ứng dụng Android của bạn

Di động cho mọi người: Các hoạt động (Activities) và biểu tượng (icons) trong vòng đời ứng dụng Android của bạn Thêm điều hướng cá tính vào ứng dụng Android của bạn Lớp Activity chính là một khung màn hình công việc (workhouse) của ứng dụng di động, và nó cũng là nơi bạn có thể tinh chỉnh những tương tác của ứng dụng di động với người dùng. Giúp mọi thứ hoạt động chính xác theo cách mà bạn muốn trong vòng đời ứng dụng, sau đó sử dụng các biểu tượng (icon) và thanh hoạt động (Action-bar) hướng dẫn người dùng thông qua điều hướng giao diện người dùng (UI) và các tính năng khác của ứng dụng. Giới thiệu Vòng đời của lớp Activity Vòng đời của một Activity ánh xạ (maps) trực tiếp tới vòng đời của ứng dụng di động Android. Giống khi người dùng sử dụng ứng dụng của bạn hoặc thiết bị lưu trữ nó, nền tảng Android sẽ thực thi ngược trên một thể hiện Activity. Khi người dùng khởi động ứng dụng của bạn, một Activity đầu tiên thực thi định nghĩa vòng đời; nó thực thi các trạng thái khác nhau khi ứng dụng chạy nền, và những trạng thái khác nữa khi bị tắt. Hình 1 thể hiện mỗi trạng thái ứng với tương tác trong vòng đời của Activity. Hình 1. Vòng đời Activity của Android Vòng đời của ứng dụng di động Android gồm 4 trạng thái:  Khởi động (Start)  Tạm ngưng và tiếp tục (Pause and resume)  Dừng và khởi động lại (Stop and restart)  Hủy bỏ (Destroy) Tìm hiểu về từng giai đoạn và phương thức gọi của nó (mà bạn có thể thực hiện trong một thể hiện Activity) trong các phần tiếp theo. Giai đoạn Start trong vòng đời Activity Ứng dụng chạy thử (Demo) Nếu bạn đang làm theo hướng dẫn của loạt bài này, thì chắc hẳn bạn đã tạo ứng dụng demo trong bài đầu tiên và bài thứ hai. Nếu bạn chưa có ứng dụng demo, tôi khuyên bạn nên tạo một cái trước khi tiếp tục. Ngoài ra, bạn có thể sao chép các kho Git cho riêng ứng dụng demo Overheard Word của tôi (xem Tài nguyên). Trong bài viết trước, bạn đã sử dụng phương thức gọi lại tương ứng với việc bắt đầu một Activity, đó là onCreate. Bạn cũng có thể làm quen với onStart và onResume, hai phương thức bổ sung được gọi khi bắt đầu. Bây giờ hãy xem xét các phương thức trong phạm vi của vòng đời Activity. Trong môi trường phát triển Android của Eclipse, bạn có thể dễ dàng ghi đè các phương thức bằng cách chọn tùy chọn Override/Implement Methods Hình 2. Ghi đè các phương thức vòng đời Activity Tiếp theo, chọn cả hai phương thức onStart và onResume: Hình 3. Chọn một phương thức gọi Bây giờ sử dụng lớp Log của Android để tạo ra một số lời phát biểu, giống như tôi làm ở Liệt kê 1. Liệt kê 1. Thực hiện các phương thức gọi Activity của Android @Override protected void onResume() { super.onResume(); Log.d("overheardword", "onResume Invoked"); } @Override protected void onStart() { super.onStart(); Log.d("overheardword", "onStart Invoked"); } Bạn có thể kiểm tra kết quả bằng cách xuất ra vài thể hiện và xem chúng trong Logcat, giống như Hình 4. Hình 4. Các thông tin debug của LogCat Ghi log Android với LogCat Android có hệ thống ghi log của riêng mình, android.util.Log. Với lớp tiện ích này, bạn có thể ghi log ở nhiều cấp độ khác nhau (chẳng hạn như info, warn, debug, v.v...) và xem các bản ghi thông qua công cụ logcat liên kết với Android SDK của bạn. Trong Eclipse, bạn sẽ thấy LogCat như một tab, mà bạn có thể sử dụng để lọc các thẻ (tag) và thậm chí là các thể hiện của ứng dụng. Logcat cũng cho phép bạn truy cập các bản ghi trên một thiết bị đơn giản bằng cách cắm thiết bị vào máy tính để bàn của bạn hoặc máy tính xách tay thông qua cổng USB. Như bạn có thể thấy, onCreate được gọi lần đầu tiên khi ứng dụng của bạn được nạp, trong khi onStart và onResume được sử dụng trong phạm vi của các giai đoạn khác, chẳng hạn như khi một ứng dụng được chạy nền và khởi động lại. Pause (tạm ngừng) và resume (tiếp tục) trong vòng đời Activity Bởi vì các thiết bị di động thường chứa nhiều ứng dụng, các ứng dụng này cạnh tranh với nhau theo nhiều cách để thu hút sự chú ý của người dùng, điều quan trọng là ứng dụng của bạn biết khi nào để một ứng dụng khác chiếm màn hình và sử dụng tài nguyên của thiết bị. Đôi khi người dùng sẽ cần phải thực hiện một cuộc gọi đến trong khi sử dụng ứng dụng của bạn, hoặc ứng dụng của bạn có thể đưa ra một hộp thoại pop-up như một yêu cầu thông tin hoặc thông báo lỗi. Hoặc hành động sẽ phần nào cản trở các Activity hiện tại. Khi một Activity bị che khuất một phần, phương thức onPause được gọi. Khi Activity tạm ngưng để lấy lại tiêu điểm, phương thức onResume được gọi. Mỗi phiên pause-and-resume (tạm-ngưng-và-tiếp-tục) có nghĩa là các Activity bị ảnh hưởng đã được che khuất một phần nhưng không hoàn toàn ẩn. Khi ứng dụng được ẩn hoàn toàn, chẳng hạn, khi người dùng có một cuộc gọi điện thoại, onPause cũng được gọi, nhưng trong trường hợp này nó được theo sau bởi onStop. Khi ứng dụng được khôi phục một lần nữa, onRestart được gọi, tiếp theo là onStart, và sau đó onResume. Hãy xem điều gì sẽ xảy ra khi bạn thực hiện onPause, onRestart, và onStop. Nếu bạn đã có một ứng dụng Android trong quá trình làm việc theo loạt bài này, hãy thêm một số thông báo vào mã của bạn và sau đó chạy nó. Bấm vào nút Home để ẩn hoàn toàn ứng dụng, và sau đó nhấn vào biểu tượng của ứng dụng để đưa nó trở lại. Đầu tiên, bạn sẽ thấy phương thức onPause theo sau bởi onStop. Khi bạn nhấn vào biểu tượng để gọi lại ứng dụng, bạn sẽ thấy phương thức onRestart theo sau bởi onStart, và sau đó là onResume. Việc hủy bỏ một Activity cũng là một điều gì đó bình thường trong quá trình chạy một ứng dụng. Ví dụ, bạn có thể là chấm dứt một thể hiện Activity bằng cách gọi phương thức finish của nó. Điều quan trọng ở đây là bởi vì một Activity đang được tắt, nó sẽ theo vòng đời giống như khi nó được ẩn, nhưng lời gọi cuối cùng của nó là phương thức onDestroy. Trong Liệt kê 2, tôi sử dụng ứng dụng Overheard Word (xem bài "Di động cho mọi người: Lập trình xử lý cử chỉ trong Android" hay lấy về tệp nguồn từ Github) để làm rõ cho quá trình này, bằng cách gọi phương thức finish khi vuốt lên. Liệt kê 2. Ví dụ hủy bỏ một Activity public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { try { final SwipeDetector detector = new SwipeDetector(e1, e2, velocityX, velocityY); if (detector.isDownSwipe()) { return false; }else if (detector.isUpSwipe()) { finish(); }else if (detector.isLeftSwipe()) { Toast.makeText(getApplicationContext(), "Left Swipe", Toast.LENGTH_SHORT).show(); }else if (detector.isRightSwipe()) { Toast.makeText(getApplicationContext(), "Right Swipe", Toast.LENGTH_SHORT).show(); } } catch (Exception e) { // nothing } return false; } Các phương thức vòng đời Activity mà bạn dùng nhiều là onCreate, onRestart, và onDestroy. Ví dụ, tôi đã dùng onRestart để làm mới khía cạnh khung nhìn giao diện người dùng của ứng dụng và phương thức onDestroy để phát hành kết nối đến một cơ sở dữ liệu như SQLite chạy cục bộ trên các thiết bị Android. Có thể nó chưa rõ ràng, nhưng một khi bạn bắt đầu làm việc với các mã nguồn bên ngoài — chẳng hạn như các dịch vụ web bên ngoài hoặc hệ thống tập tin của thiết bị hoặc cơ sở dữ liệu — các giai đoạn vòng đời này sẽ trở nên cực kỳ quan trọng. Tiếp theo chúng ta hãy xem những gì sẽ xảy ra khi chúng ta sử dụng hai phương thức móc Activity—onCreateOptionsMenu và onOptionsItemSelected— để thực hiện hành vi Thực đơn (Menu) của ứng dụng. Một khi chúng ta có được hai phương thức đồng bộ, chúng ta sẽ liên kết tính năng của nó với các biểu tượng giao diện người dùng pizazz. Chuyển hướng với Menu và Action Khi tôi tạo ra dự án Overheard Word trong Eclipse, phương thức Activity đầu tiên mà tôi định nghĩa là onCreateOptionsMenu. Như bạn có thể đoán, phương thức này tạo ra một Menu tùy chọn. Trên các thiết bị Android cũ, Menu tùy chọn được đại diện bởi nút Menu. Trên các thiết bị mới hơn, nó được biểu diễn như là một loạt các dấu chấm theo chiều dọc, được hiển thị riêng trong những ứng dụng. Các thiết bị Android mới hơn không cần phải có một nút Menu. Trong trình giả lập của một thiết bị cũ, bạn sẽ thấy một nút trên là "Menu". Bằng cách nhấn vào nó, một thể hiện của ứng dụng sẽ hiển thị một Menu tùy chọn. Trong trường hợp này, chúng tôi sẽ xem xét các tùy chọn cho việc điều hướng. Ví dụ, nếu người dùng nhấn vào nút Home, anh ta sẽ thấy thông tin giống như thể hiện ở Hình 5. Hình 5. Một Menu chưa được thực hiện Trên máy tính bảng không có nút Menu. Thay vì lựa chọn các mục từ menu (thanh thực đơn), người dùng được hỏi để thực hiện các actions (hành động) khác nhau. Giao diện người dùng mới này được gọi là Action-bar (thanh hành động), được hiển thị trong Hình 6. Hình 6. Action-bar mới của Android Nút Menu và Action-bar hoạt động như nhau, Action-bar được dùng trên nhiều thiết bị mới hơn. Vì mục tiêu của chúng ta là đang phát triển trên phiên bản Android cũ hơn (hãy nhớ lại rằng hơn 50% thiết bị Android chạy Gingerbread!), tôi sẽ sử dụng nút Menu quen thuộc cho mục đích minh họa. Sau đó, tôi sẽ chỉ bạn các cập nhật mã định hướng để dùng Action-bar, trong trường hợp bạn muốn viết ứng dụng cho các thiết bị Android phiên bản mới hơn. Tạo một Menu tùy chọn Bước đầu tiên để trang bị cho Overhead Word một giao diện người dùng tương tác hiệu quả hơn là việc sử dụng một Menu tùy chọn cho phép người dùng thoát ứng dụng. Thoát ứng dụng là một giai đoạn của vòng đời Activity, vì vậy chúng tôi sẽ dùng các phương thức Activity để thực hiện chức năng này. Hãy nhớ rằng tất cả mọi thứ liên quan đến giao diện người dùng trong một ứng dụng Android ứng với một tập tin XML, vì vậy chỉnh sửa tập tin XML chính là cách bạn tạo ra giao diện người dùng. Các tập tin XML của ứng dụng Android nằm trong thư mục tương ứng trong thư mục res của dự án (ví dụ, tập tin layout nằm trong thư mục layout). Một bài tập nhanh, hãy nhìn vào thực thi mặc định của phương thức onCreateOptionsMenu trong hoạt động chính của Overheard Word — bạn thấy được gì từ những dòng mã? public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.overheard_word, menu); return true; } Nếu bạn đang nghĩ rằng bạn sẽ phải tìm một tập tin XML có tên overheard_word.xml trong thư mục nguồn menu, thì bạn đang trên đường trở thành một chuyên gia Android rồi đấy! I... Quit! (Tôi... thoát!) Tiếp theo, hãy chỉnh sửa tập tin mã nguồn XML của Menu để thêm vào một mục quit. Bắt đầu bằng cách tìm tập tin strings.xml trong thư mục res/values. Sau đó tạo một dòng như bên dưới: Quit Dòng này tạo ra từ Quit tham chiếu đến định danh quit_menu (bằng cách này, ta có thể tạo điều kiện để đa ngôn ngữ hóa ứng dụng sau này). Tiếp theo, mở tệp overheard_word.xml trong thư mục menu. Trong tệp đó, ta thay đổi tiêu đề thành @string/quit_menu, như vậy ta đã liên kết từ Quit với mục của Menu. Bây giờ hãy khởi động trình giả lập và nhấn vào nút Menu. Bạn sẽ thấy một Menu xuất hiện ở dưới cùng của màn hình với một tùy chọn: Quit. Tuy nhiên nếu bạn nhấn chọn nó thì cũng chưa có gì xảy ra cả bởi vì ta vẫn chưa làm gì với nó. Chúng ta sẽ thêm mã thực thi cho tùy chọn Quit trong một phút. Nhưng trước tiên, hãy xem xét một yếu tốt quan trọng khác của bất kỳ chức năng của ứng dụng, đó là cảm giác nhìn nhận của mình. Bạn có thể thấy rất nhiều giao diện người dùng di động hiện nay (thậm chí cả những ứng dụng Web ngày càng đầu tư vào diện người dùng) sử dụng những biểu tượng để điều hướng. Hãy xem những gì sẽ xảy ra khi chúng ta thay thế các nút có tên chung chung sang một biểu tượng tự do. Các biểu tượng (icon) trong thiết kế giao diện người dùng Trước khi tôi bước vào lĩnh vực phát triển di động, tôi cũng đã thiết kế các biểu tượng, nhưng hiếm khi sử dụng chúng trong các ứng dụng thương mại của tôi. Khi các ứng dụng Web trở nên tương tác hơn thì tôi sử dụng biểu tượng nhiều hơn. Tuy nhiên đó cũng vẫn chưa phải lúc cho đến khi tôi bước vào lĩnh vực di động, đó mới thật sự là mối quan tâm của tôi. Biểu tượng của tôi ở đâu? Ngày nay thật dễ dàng để tìm các biểu tượng để dùng tự do trong các ứng dụng thương mại và nguồn mở. Bạn cũng có thể trả một chi phí nhỏ để mua các biểu tượng mà bạn cần. Tôi có tạo ra một gói biểu tượng gọi là Glyphish (xem Tài nguyên), chứa hàng trăm biểu tượng với mức giá hợp lý. Glyphish cũng cung cấp một giấy phép miễn phí. Hãy dùng tính năng tìm kiếm để tìm các biểu tượng phù hợp mà bạn muốn trong phần này. Nếu bạn sử dụng các biểu tượng trong việc thiết kế giao diện người dùng di động cho Android, bạn cần phải nắm thật kỹ về độ phân giải màn hình của thiết bị. Bởi hệ sinh thái Android là vô cùng lớn, ứng dụng của bạn có thể chạy trên hàng loạt các thiết bị, từ thiết bị có màn hình nhỏ với độ phân giải thấp đến những máy tính bảng có độ phân giải cao với màn hình 7-inch. Một biểu tượng hiển thị tốt trên một thiết bị cầm tay có thể bị vỡ trên máy tính bảng. Thật may mắn là bạn có thể điều khiển hình dạng của các biểu tượng ứng dụng trong các thiết bị khác nhau. Hãy xem trong thư mục res trong ứng dụng Android của bạn. Bạn sẽ thấy một vài thư mục có tên là drawable-something-pdi (trong đó "something" là một loạt các ký tự). Các thư mục này tương ứng với các độ phân giải màn hình thiết bị. Đặt biểu tượng đúng kích cỡ và các tập tin hình ảnh khác trong các thư mục này sẽ đảm bảo rằng các biểu tượng hiển thị chính xác trên các loại thiết bị khác nhau. Ví dụ, đối với thiết bị độ phân giải siêu cao, Android sẽ tìm các biểu tượng trong thư mục drawable-xxhdpi. Một biểu tượng trong thư mục này phải có độ phân giải là 96 x 96 pixels và ít nhất là 320 dpi. Một biểu tượng trong thư mục drawable-ldpi phải là 36 x 26 pixels và 120 dpi. Bạn cũng có tùy chọn để tạo ra một thư mục drawable mặc định mà Android sẽ sử dụng nếu nó không tìm thấy tập tin có độ phân giải tương ứng. Để đơn giản, tôi sẽ tạo ra một thư mục drawable trong ứng dụng Overheard Word. Trong đó, tôi sẽ đặt một biểu tượng có kích thước 26 x 26 (a .png) để dùng cho tùy chọn thoát (Quit). Hình 7. Thêm một biểu tượng vào thư mục drawable Tiếp theo, tôi tham chiếu đến biểu tượng trong Menu tùy chọn của tôi, bằng cách cập nhật các mục menu trong tập tin overheard_word.xml như bên dưới: android:icon="@drawable/quit_icon" Nếu bạn đang cùng làm với tôi thì bạn nên cập nhật id của phần tử như bên dưới. Cung cấp cho nó một giá trị chuỗi mô tả: android:id="@+id/quit_item" Việc có một mô tả, một chuỗi giá trị dễ hiểu sẽ giúp ích rất nhiều cho chúng ta trong các bước tiếp theo để thực hiện hành động thoát bên trong phương thức onOptionsItemSelected. Chúng ta có thể tham khảo các mục Menu trong trường hợp lựa chọn, thông qua ID của quit_item. Ngay bây giờ, hãy mở trình giả lập của bạn lên và nhấn vào Menu. Tôi nghĩ bạn sẽ thích những gì bạn thấy! Hình 8. Biểu tượng tuyệt đẹp! (Courtesy của Glyphish) Thực hiện các hành vi của Menu Bây giờ tôi đã có một biểu tượng đẹp đẽ cho nút Quit (và tôi hy vọng bạn cũng có một cái tương tự cho ứng dụng của bạn), tuy nhiên tôi cần phải viết thêm mã để nói cho ứng dụng biết cần phải làm gì khi nút Quit được nhấn. Việc thực hiên bất kỳ hành vi nào trong Menu tùy chọn đều bắt đầu bằng việc nạp chồng phương thức onOptionsItemSelected. Vì vậy hãy nạp chồng phương thức đó, và cập nhật mã của bạn giống như tôi ở bên dưới (nhưng nhớ chỉnh lại ID của mục Menu phù hợp với ứng dụng của bạn): Liệt kê 3. Xử lý lựa chọn các mục Menu public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.quit_item: this.finish(); return true; default: return super.onOptionsItemSelected(item); } } Lưu ý rằng đây chỉ là một câu switch (chuyển đổi) đơn giản. Nếu id của quit_item được chọn, phương thức finish sẽ được gọi, về cơ bản sẽ thoát ứng dụng. Hãy chạy thử đoạn mã mới trong trình giả lập của bạn: chạm vào nút Menu, nhấn tùy chọn thoát (X), và xem điều gì xảy ra trong LogCat. Bạn sẽ thấy một vòng đời Activity đầy đủ chạy các giai đoạn: onPause rồi onStop và sau đó là onDestroy. Action-bars trong Android 3.x Như tôi đã đề cập, các phiên bản mới hơn của Android (Honeycomb và các bản sau này) tránh sử dụng các tùy chọn Menu trong Action-bar. Các thiết bị mới hơn thậm chí còn không yêu cầu phải có một nút Menu, vì vậy thật đáng để tìm hiểu cách làm việc của chức năng điều hướng trong ứng dụng của bạn (hay các tính năng khác) với một Action-bar. Sẽ không mất nhiều bước để kiểm tra chắc chắn rằng tính năng điều hướng mà trước đây được viết cho một Menu tùy chọn giờ đây sẽ làm việc với một Action- bar. Bạn đã thực hiện tất cả các phương thức cần thiết; những gì còn lại là thực hiện một số thay đổi mã nguồn XML của bạn. Trước tiên, bạn cần phải tạo ra một thiết bị giả lập giống với thiết bị thật có sử dụng một Action-bar chứ không phải là một nút Menu. Cách dễ nhất để làm điều đó là tạo ra một thiết bị giả lập máy tính bảng. Mở ứng dụng dòng lệnh của Android SDK Manager bên trong thư mục mà bạn đã cài đặt Android SDK (công cụ dòng lệnh của android được tìm thấy trong thư mục tools). Khi SDK Manager chạy, hãy chọn tùy chọn Manage AVDs... từ Menu Tools. Nó sẽ hiển thị cho bạn một hộp thoại để bạn định nghĩa một giả lập mới hay Android Virtual Device (AVD). Chọn 7.0'' WSVGA (Tablet) (1024 x 600: mdpi), sau đó thiết lập Target cho trình giả lập từ Android 4.2.2 trở lên. Sau khi thiết lập thì bạn sẽ có một trình giả lập không có các nút Menu, như trong Hình 9. Hình 9. Tạo một trình giả lập cho máy tính bảng Tiếp theo, chạy ứng dụng của bạn trên trình giả lập đó. Bạn sẽ thấy một đường thẳng đứng với dấu ba chấm ở bên góc phải. Nhìn đẹp phải không? Theo mặc định, Android vẫn giữ lại các Menu, ngay cả trong phiên bản hiển thị mới hơn. Bằng cách cập nhật mã nguồn XML của ứng dụng bạn có thể nâng cấp xuất hiện Action- bar và hành vi để nó tự nhiên hơn. Bắt đầu với tập tin AndroidManifest.xml của ứng dụng, nơi bạn sẽ cập nhật Target của SDK: Kế tiếp, vào Properties (thuộc tính) của dự án trong Eclipse và cập nhật Project Build Target lên bất kỳ phiên bản nào cao hơn Android 4.2.2. Nhấn OK và để dự án của bạn tự build (xây dựng) lại. Sau đó, tìm tập tin XML của Menu trong thư mục menu. Cập nhật nó như bên dưới mà vẫn giữ lại định nghĩa item cho Quit. android:showAsAction="always" Cuối cùng, nếu dự án của bạn không có hai thư mục con trong thư mục res tên là values-v11 và values-v14, thì hãy tạo các thư mục đó. Sau đó, trong thư mục values-v11, thêm vào tệp XML như sau: Trong thư mục values-v14, thêm vào tệp: <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar"> Bây giờ hãy khởi động lại trình giả lập và bạn sẽ thấy biểu tượng của bạn nằm ở góc phải bên trên: Hình 10. Một Action-bar với các biểu tượng Bây giờ hãy trở về tập tin Menu trong thư mục menu nơi mà mục quit item được định nghĩa và thay đổi showAsAction thành never. Chạy lại ứng dụng và bạn sẽ thấy dấu ba chấm ở góc phải. Đừng quên thiết lập lại nhé Lưu ý rằng nếu bạn muốn giữ thiết bị của bạn chạy Gingerbread, bạn cần phải tái thiết lập dự án của bạn và những thay đổi trong tệp XML. Những thay đổi này không tương thích. Thú vị hơn với các biểu tượng Hơn nữa, khi bạn thêm một Menu tùy chọn vào ứng dụng chạy trên Gingerbread, bạn sẽ thấy nó chuyển đổi khá tốt sang các thiết bị mới có Action-bar, và học cách làm thế nào để nâng cấp tính năng đó, nếu bạn chọn, chỉ cần một vài cập nhật XML trong ứng dụng của bạn. Bây giờ chúng ta hãy điểm lại những gì bạn đã học về các biểu tượng. Bạn đã hoàn thành một việc nặng nhọc là thêm một biểu tượng vào Menu điều hướng trong ứng dụng, vì thế sẽ không vất vả để cập nhật biểu tượng chính của nó. Biểu tượng này đại