Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Cách viết một Màn hình Thiết lập trong một Ứng dụng Android

by
Difficulty:BeginnerLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Nhóm thiết kế Material Design của Google đưa ra định nghĩa rõ ràng về cài đặt trong ứng dụng Android của bạn như sau:

Cài đặt ứng dụng cho phép người dùng thiết lập tùy chọn sao cho ứng dụng hoạt động như mong muốn.

Họ tại Google cũng nói rằng người dùng của bạn nên điều hướng đến cài đặt ứng dụng hoặc từ thanh điều hướng cạnh bên hoặc thanh công cụ với mục được gắn nhãn Settings.

Bao gồm các cài đặt trong ứng dụng của bạn cho phép người dùng của bạn có thể kiểm soát một số chức năng của ứng dụng. Điều này làm cho người dùng của bạn trở nên vui vẻ thay vì bực tức - bởi vì họ đang kiểm soát ứng dụng hoạt động nên như thế nào.

Thành thật khuyên bạn nên cho phép truy cập cài đặt ứng dụng. Điều này sẽ cung cấp trải nghiệm người dùng tốt hơn cho người dùng của bạn, điều này dẫn đến đánh giá tốt hơn trên Google Play Store, sau đó là dẫn đến tăng số lần tải ứng dụng (tăng doanh thu).

Tôi giả sử bạn phải tương tác với cài đặt của một ứng dụng trên thiết bị của bạn, ví dụ bằng cách chọn một nhạc chuông mặc định hoặc bằng cách kiểm soát quyền riêng tư trên ứng dụng. Hầu như tất cả các ứng dụng phổ biến nhất mà bạn tải về hoặc sẽ tải về trên Google Play Store đều bao gồm màn hình cài đặt để bạn kiểm soát hoạt động của ứng dụng.

Ví dụ về một ứng dụng phổ biến mà có màn hình cài đặt là ứng dụng Chrome Android của Google. Trong màn hình cài đặt của ứng dụng này, người dùng có thể lựa chọn công cụ tìm kiếm mặc định, thay đổi hành vi thông báo, kiểm soát sự riêng tư của người dùng, v.v ... Bạn có thể tự kiểm tra điều này bằng cách tải về ứng dụng Chrome từ Google Play Store (nếu bạn chưa có ứng dụng này trên thiết bị của mình). Ảnh chụp màn hình sau đây là từ ứng dụng Chrome, đang hiển thị màn hình cài đặt của ứng dụng.

Screenshot of Chrome app settings screen

Trong bài viết này, bạn sẽ được học cách tạo màn hình cài đặt ứng dụng từ đầu đến cuối và cũng như cách đọc các giá trị mà người dùng đã chọn từ cài đặt ứng dụng. Thêm vào đó, bạn cũng sẽ được học cách sử dụng tính template của Studio Studio để khởi động nhanh dự án của bạn với một màn hình cài đặt.

Một dự án mẫu (trong Kotlin) cho hướng dẫn này có thể được tìm thấy trên repo GitHub của chúng tôi để bạn có thể dễ dàng theo dõi.

Yêu cầu

Để có thể thực hiện theo hướng dẫn này, bạn sẽ cần:

  • Hiểu biết cơ bản về một số API của Android (như SharedPreferences)
  • Android Studio 3.0 hoặc mới hơn
  • Plugin Kotlin 1.1.51 hoặc mới hơn

1. Tạo một Dự án Studio Android

Mở Android Studio lên và tạo một dự án mới (bạn có thể đặt tên nó là SettingsScreenDemo) với một empty activity có tên là SettingsActivity. Hãy chắc chắn bạn cũng tích vào hộp kiểm Include Kotlin support.

Android Studio create project screen

2. Tạo một PreferenceFragment

Để hỗ trợ API Level 11 (Honeycomb) trở lên, chúng ta có thể sử dụng PreferenceFragment. Lớp này chỉ đơn giản là một Fragment hiển thị thứ bậc của các đối tượng Preference dưới dạng các danh sách.

Trong đoạn code ở trên, chúng ta đã tạo ra một lớp SettingsFragment lồng bên trong SettingsActivity (vì lớp SetttingsFragment quá nhỏ). Lưu ý rằng lớp SettingsFragment của chúng ta mở rộng lớp cha PreferenceFragment và có một phương thức addPrerenceFromResource bên trong onCreate(). Trong phương thức này, chúng ta cung cấp cho nó một resource ID R.xml.preference của reference XML để khởi chạy - khi Fragment được nạp. Cuối cùng, chúng ta lưu trữ Fragment vào activity bằng cách sử dụng FragmentTransaction để thêm nó vào UI - bên trong onCreate() của SettingsActivity.

3. Preference của Chúng ta

Tạo một tập tin XML và đặt tên là preferences.xml. Lưu tập tin này bên trong thư mục res/xml bên trong dự án của bạn. Lưu ý rằng bạn có thể đặt bất kỳ tên nào cho tập tin này, nhưng bạn nên sử dụng tên "preferences". Ngoài ra, bạn chỉ nên có một tập tin như vậy trong một dự án ứng dụng.

Node gốc cho tập tin preference.xml của chúng ta phải là một phần tử <PreferenceScreen>. Bên trong phần tử gốc này, giờ chúng ta có Preference riêng lẻ. Đây là các thuộc tính phổ biến liên quan đến một Preference:

  • android:key: thuộc tính này được sử dụng để lấy giá trị trong đối tượng SharedPreferences.
  • android:title: thiết lập tiêu đề cho Preference. Đây là văn bản in đậm.
  • android:summary: tạo tóm tắt cho Preference (cái này không bắt buộc). Đây là văn bản màu nhạt bên dưới tiêu đề.
  • android:defaultValue: thiết lập giá trị mặc định cho Preference.

Chúng ta sẽ sớm lượt qua từng Preference mà chúng ta đã định nghĩa ở trên. Lưu ý rằng bạn cũng có thể thêm hoặc tùy chỉnh Preference thông qua preference editor của Android Studio - tương tự như layout resource editor mà bạn đã từng làm việc. Hoặc bạn có thể chọn add/edit tập tin preference XML của bạn trực tiếp trong chế độ "Text" hoặc sử dụng giao diện kéo và thả trong chế độ "Design".

Android Studio preference editor

Như bạn có thể thấy, trong editor này, bạn có thể kéo và thả bất kỳ Preference nào trong phần palette (ở bên trái). Sau khi thả, bạn nên chọn nó và sửa đổi thuộc tính của nó trên panel attributes (ở phía bên phải) của editor. Lưu ý rằng mặc định, chúng ta sẽ có được một vài thuộc tính để sửa đổi. Để xem hoặc sửa đổi tất cả các thuộc tính liên quan đến một Preference đã được chọn, hãy chắc chắn rằng bạn nhấp vào liên kết View all atrributes ở bên dưới cùng của panel attributes. Điều này rất giống với layout editor mà bạn đã biết.

Bây giờ, chúng ta hãy lượt qua từng Preference mà chúng ta có.

Checkbox Preference

Một CheckBoxPreference chỉ đơn giản là một widget CheckBox được bao gồm trong màn hình preference. Preference này trả về giá trị "true" nếu được tích chọn hoặc "false" nếu không. Nói theo cách khác, nó trả về một boolean tùy thuộc vào trạng thái của widget.

CheckBoxPreferense

Các thuộc tính khác mà bạn có thể thêm vào một CheckBoxPreference là:

  • android:summaryOff: đặt tóm tắt cho Preference trong một màn hình preference khi nó được bỏ chọn.
  • android:summaryOn: đặt tóm tắt cho Preference bên trong màn hình preference khi nó được chọn.
  • android:disableDependentsState: Trạng thái (true cho on, hoặc false cho off) làm cho dependents bị tắt. Có thể là một giá trị boolean, chẳng hạn như "true" hoặc "false".

Switch Preference

SwitchPreference thực hiện chức năng tương tự với CheckBoxPreference. Nó cung cấp một tùy chọn có thể chuyển đổi trạng thái ("on" hoặc "off"). Cái này sử dụng một widget Switch cho phép người dùng trượt trái ("off") và phải ("on"). Preference này cũng bao gồm các thuộc tính được mô tả đối với CheckBoxPreference ở trên. Ngoài ra, nó có các thuộc tính sau:

  • android:switchTextOff: thiết lập văn bản được sử dụng trên chính switch khi ở trạng thái "off".
  • android:switchTextOn: thiết lập văn bản được sử dụng trên chính switch khi ở trạng thái "on".
SwitchPreference

EditText Preference

Preference này, khi được nhấp vào, hiển ra một hộp thoại để cho người dùng nhập văn bản. Nó sử dụng EditText - bao gồm tất cả các thuộc tính của widget đó cái mà bạn đã biết.

Lưu ý rằng giá trị được lưu trữ trong SharedPreferences là một chuỗi.

EditTextPreference

List Preference

Loại Preference này sẽ hiển thị một danh sách các mục bên trong một hộp thoại khi được chạm vào. Ở đây, bạn có thể chỉ định một cặp string-array trong XML preference của bạn. String-array này chỉ chứa một tập hợp các chuỗi. Tài nguyên này được lưu tại res/values​/arrays.xml.

Đây là ListPreference mẫu sử dụng tài nguyên này.

Chúng ta thiết lập các mục và các giá trị của mục bằng cách sử dụng các thuộc tính android:entriesandroid:entryValues ​tương ứng.

  • android:entries: mảng để được biểu diễn dưới dạng một danh sách.
  • android:entryValues: mảng để tìm giá trị để lưu cho một preference khi một mục từ các mục được chọn.
ListPreference dialog when clicked

Ví dụ, nếu chúng ta sử dụng số phút trong mỗi khoảng thời gian làm giá trị nhập, khi người dùng chọn một thời lượng (ví dụ, 30 phút), giá trị số nguyên tương ứng sẽ được lưu trữ trong SharedPreferences (ví dụ, 30).

MultiSelect List Preference

Cái này giống với ListPreference nhưng thay vì có các nút radio, chúng ta lại có các hộp kiểm. Nói cách khác, người dùng có thể chọn nhiều mục trong hộp thoại. Lưu ý rằng kết quả được lưu trữ trong một "bộ chuỗi" bên trong SharedPreferences. Nó có thể được truy vấn bằng getStringSet().

Ringtone Preference

Khi một RingtonePreference được chạm vào, một hộp thoại sẽ được hiện ra có chứa danh sách các nhạc chuông hiện có trên thiết bị hoặc emulator.

  • android:showDefault: khi nào Default rington sẽ được hiển thị.
  • android:showSilent: tùy chọn Silent được hiển thị trong danh sách hay không. Người dùng có thể chọn tùy chọn này nếu họ không muốn chơi bất kỳ nhạc chuông nào.
RingtonePreference

Lưu ý rằng giá trị được lưu trữ trong SharedPreferences cho preference này là một chuỗi đặc biệt. Chuỗi đặc biệt này là một URI trỏ đến một ContentProvider.

4. Tạo nhóm Cài đặt

Sẽ là một vấn đề khi bạn có một danh sách dài các preference hoặc cài đặt, bởi vì người dùng có thể gặp khó khăn khi nhìn hoặc hiểu chúng. Để giải quyết vấn đề này, chúng ta có thể nhóm các preference của chúng ta. Hãy xem lại ảnh chụp màn hình của ứng dụng Chrome mà tôi đã trình bày cho bạn lúc bắt đầu - để ý nó nhóm các preference thành hai loại: BasicsAdvanced. Điều này giúp người dùng dễ dàng hiểu được các preference và không làm cho danh sách có vẻ quá rối.

Bây giờ hãy xem nó đơn giản như thế nào để thực hiện việc này.

Chúng ta chỉ đơn giản là bao quanh các preference mà chúng ta muốn nhóm trong một thẻ <PreferenceCategory> và đặt cho mỗi nhóm một tiêu đề bằng thuộc tính android:title.

Preferences grouped with PreferenceCategory

5. Khởi chạy một Intent

Lưu ý, có thể mở một activity chỉ bằng cách nhấp vào một preference từ màn hình cài đặt. Điều này có thể có ích khi bạn muốn mở một trang web. Đây là code để làm việc đó:

Ở đây, chúng ta thêm một phần tử <intent> bên trong phần tử <Preference>.

  • android:action: thiết lập hành động cho Intent (điều này tương tự như việc gọi setAction() trên một đối tượng Intent).
  • android:targetClass: thiết lập phần lớp của tên component (giống như việc gọi setComponent() trên đối tượng Intent).
  • android:targetPackage: thiết lập phần package của tên component.
  • android:data: thiết lập dữ liệu để gán (giống như việc gọi setData()) trên đối tượng Intent.

Ví dụ như, để mở một trang web, bạn có thể sử dụng code như sau:

6. Gắn Preference Summary với Giá trị được chọn

Bây giờ hãy xem làm thế nào để cập nhật Preference Summary bằng giá trị được lựa chọn bởi người dùng.

Trong lớp này, chúng ta đã tạo ra một phương thức helper, gọi là bindPreferenceSummaryToValue() nằm bên trong companion object của chúng ta để cập nhật văn bản Preference Summay bằng giá trị mà người dùng đã chọn. Chúng ta truyền cho nó một đối tượng Preference như là một đối số. findPreference() sẽ trả về một Preference bằng key của Preference.

Chúng ta có một biến sBindPreferenceSummaryToValueListener là một đối tượng của Preference.OnPreferenceChangeListener. Đây chỉ đơn giản là một preference change listener sẽ giúp chúng ta cập nhật Preference Summary thành giá trị mà người dùng đã chọn. Chúng ta kiểm tra các trường hợp đặc biệt, chẳng hạn như khi preference chọn là một RingtonePreference hoặc một ListPreference. Đối với những loại preference đó, chúng ta thực hiện một số thao tác đặc biệt để lấy chuỗi summary Nếu preference không giống nhau (ví dụ như một EditTextPreference), chúng ta chỉ cần thiết lập summary thành giá trị chuỗi của preference.

Bên trong bindPreferenceSummaryToValue(), chúng ta thiết lập preference change listener bằng cách gọi onPreferenceChangeListener (trong Java, thì nó là setOnPreferenceChangeListener) trên đối tượng Preference.

Bây giờ chạy lại dự án để xem nó hoạt động như thế nào!

Settings screen showing changed summary in response to selection

7. Truy vấn các giá trị Preference

Để bắt đầu lấy các giá trị preference cho màn hình cài đặt, chúng ta gọi hàm getDefaultSharedPreference() nằm bên trong lớp PreferenceManager - truyền cho nó một đối tượng Context của các preference mà có các giá trị mong muốn. Lưu ý rằng chúng ta lấy các giá trị từ SharedPreferences mặc định cho ứng dụng của chúng ta.

Bạn gọi phương thức getter tương ứng đối với kiểu mà chúng ta muốn truy vấn giá trị từ trong SharedPreferences. Bạn truyền vào nó key dưới dạng đối số đầu tiên, và giá trị mặc định là đối số thứ hai.

8. Phần phụ: Sử dụng Template của Studio Android

Giờ thì bạn đã được học về các API liên quan đến việc tạo màn hình cài đặt từ đầu đến cuối trong Android, tôi sẽ hướng dẫn cho bạn một đường tắt sẽ làm cho nó nhanh hơn trong những lần tiếp theo. Bạn có thể chọn sử dụng một template thay vì tự viết code cho màn hình cài đặt từ đầu.

Android Studio cung cấp các template tuân theo các thực tiễn tốt nhất về thiết kế và phát triển Android. Các template hiện có (có sẵn trong Java và Kotlin) có thể giúp bạn nhanh chóng bắt đầu dự án của bạn. Một template như vậy có thể được sử dụng để tạo một màn hình cài đặt.

Để sử dụng tính năng tiện dụng này cho một dự án mới, trước tiên hãy mở Android Studio lên.

Android Studios Create Android Project dialog

Nhập tên ứng dụng và nhấp vào nút Next. Bạn có thể để mặc định trong hộp thoại Target Android Devices.

Nhấp vào nút Next một lần nữa.

Android studios Add an Activity to Mobile dialog

Trong hộp thoại Add an Activity to Mobile, cuộn xuống và chọn Settings Activity. Sau đó nhấp vào nút Next.

Android Studios Configure Activity dialog

Trong hộp thoại cuối cùng, bạn có thể đổi tên Activity, tên layout hoặc tiêu đề nếu muốn. Cuối cùng, nhấn vào nút Finish để chấp nhận tất cả các cấu hình.

Android Studio giờ đã giúp chúng ta tạo một dự án với một setting activity. Thật tuyệt! Tôi khuyên bạn nên khám phá các code được tạo ra.

Bạn cũng có thể sử dụng các template cho một dự án Studio Android đã có. Chỉ cần vào File > New > Activity > Settings Activity

Navigation flow to creating a new settings activity in Android Studio

Lưu ý rằng các template được bao gồm trong Android Studio là rất phù hợp với những layout đơn giản và tạo các ứng dụng cơ bản, nhưng nếu bạn thật sự muốn nâng cao ứng dụng của mình, bạn có thể cân nhắc một số template ứng dụng có sẵn từ Envato Market.

Chúng giúp tiết kiệm rất nhiều thời gian cho các nhà phát triển có kinh nghiệm, giúp họ bỏ qua việc tạo ứng dụng từ đầu và tập trung vào tài năng của họ thay vì các phần tạo ứng dụng mới

Tóm tắt

Trong bài hướng dẫn này, bạn đã được học cách tạo cài đặt ứng dụng trong Android từ đầu. Chúng ta cũng đã khám phá cách sử dụng template của Studio Studio để dễ dàng và nhanh chóng tạo cài đặt ứng dụng.

Tôi thành thật khuyên bạn nên đọc các nguyên tắc thiết kế material design chính thức cho các cài đặt để tìm hiểu thêm về cách thiết kế và sử dụng cài đặt đúng cách trong Android. Ngoài ra, hãy kiểm tra hướng dẫn API chính thức để tìm hiểu thêm về các API khác cho việc tạo activity cài đặt.

Để tìm hiểu thêm về viết code cho Android, hãy kiểm tra một số các khóa học và hướng dẫn khác của chúng tôi ở đây trên Envato Tuts+!


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.