[Android] Thiết kế giao diện đa màn hình trong Android

Bài đăng này đã không được cập nhật trong 7 năm

I.Giới thiệu

Trên Android có rất nhiều màn hình có kích thước to nhỏ khác nhau, việc thiết kế layout để phù hợp với nhiều loại màn hình như vậy làm các bạn mất rất nhiều thời gian và công sức.
Mình sẽ hướng dẫn các bạn thực hiện điều đó nhanh hơn, đơn giản hơn, tiết kiệm thời gian hơn
Mình đã có một bài hướng dẫn về việc thiết kế giao diện đa màn hình rồi. https://viblo.asia/p/android-su-dung-tool-ho-tro-thiet-ke-giao-dien-da-man-hinh-trong-android-WEMkBYZLeQK
Ở đây mình sẽ update nó cho các bạn dễ sử dụng hơn, và không cần dùng đến Tool nữa

II.Các thực hiện

Xác định các tỷ lệ màn hình bạn muốn thiết kế
- Các kích thước màn hình mình thường dùng
  - 360dp
  - 480dp
  - 540dp
  - 600dp
  - 640dp
  - 720dp
  - 800dp
- Tạo thư mục tương ứng cho các kích thước màn hình đó (/app/src/main/res/)
  - values-sw360dp
  - values-sw480dp
  - values-sw540dp
  - values-sw600dp
  - values-sw640dp
  - values-sw720dp
  - values-sw800dp

Mình làm như vậy là do Android đã hỗ trợ việc lấy resource dimen ứng với mỗi màn hình từ các thư mục mình vừa tạo bên trên. (nghĩa là nếu màn hình < 360dp sẽ lấy dimen trong file values-sw360dp)

Tạo file dimen tương ứng cho các màn hình ( dùng các hàm hỗ trợ của Xml và file build.gradle )

Trong file build.gradle tạo ra hàm sinh file dimen

Lựa chọn 1 kích thước màn hình mà bạn muốn làm chuẩn để thiết kế giao diện (mình lấy màn hình 360 làm chuẩn)

    def xmlFile360 = "${project.rootDir}/app/src/main/res/values-sw360dp/dimens.xml"
    def xmlFile480 = "${project.rootDir}/app/src/main/res/values-sw480dp/dimens.xml"
    def xmlFile540 = "${project.rootDir}/app/src/main/res/values-sw540dp/dimens.xml"
    def xmlFile600 = "${project.rootDir}/app/src/main/res/values-sw600dp/dimens.xml"
    def xmlFile640 = "${project.rootDir}/app/src/main/res/values-sw640dp/dimens.xml"
    def xmlFile720 = "${project.rootDir}/app/src/main/res/values-sw720dp/dimens.xml"
    def xmlFile800 = "${project.rootDir}/app/src/main/res/values-sw800dp/dimens.xml"
    // đọc file dimens.xml trong thư mục values-sw360dp rồi tìm các con số trong đó nhân với tỷ lệ tương ứng để tạo ra file dimens.xml của các kích thước màn hình khác.
    def xmlOriginal = new XmlParser().parse(xmlFile360)

    //Tạo dimens.xml cho các thư mục chưa có file dimens.xml
    def xml480 = xmlOriginal.clone()
    def xml540 = xmlOriginal.clone()
    def xml600 = xmlOriginal.clone()
    def xml640 = xmlOriginal.clone()
    def xml720 = xmlOriginal.clone()
    def xml800 = xmlOriginal.clone()

Xử lý tính toán tỷ lệ và set lại kích thước cho các màn hình khác

Bên dưới mình đang tính toán lại file dimen trong thư mục values-sw480dp bằng cách đọc các con số trong file dimens.xml rồi nhân nó với tỷ lệ (480/360) (lợi dụng cấu trúc của file dimens.xml, đằng sau mỗi con số là các giá trị [sp, px, dp])
Tương tự các bạn làm với các màn hình còn lại

   xml480.dimen.each { dimen ->
        def value = dimen.text();
        if (value.contains("sp")) {
            def newValue = value.replace("sp", "").toFloat()
            newValue = round((480 / 360 * newValue).toFloat(), 2);
            dimen.value = newValue + "sp"
        } else if (value.contains("px")) {
            def newValue = value.replace("px", "").toFloat()
            newValue = round((480 / 360 * newValue).toFloat(), 2);
            dimen.value = newValue + "px"
        } else {
            def newValue = value.replace("dp", "").toFloat()
            newValue = round((480 / 360 * newValue).toFloat(), 2);
            dimen.value = newValue + "dp"
        }
    }

Cuối cùng là save lại file đó rồi build lại app là xong

   new XmlNodePrinter(new PrintWriter(new FileWriter(xmlFile480))).print(xml480)

IV.Kết Thúc - Cách dụng: các bạn chỉ cần (thêm, sửa, xóa, dùng) kích thước dimen trong file (app/src/main/res/values-sw360dp/dimens.xml) rồi build lại app là ok - Việc tính toán tỷ lệ tạo file dime trong file build.gradle làm cho quá trình build app lâu hơn 1 chút, nhưng nó mang lại nhiều lợi ích cho việc tùy chỉnh lại tỷ lệ giao diện cho các loại màn hình khác nhau. - Demo: https://github.com/oBuiTienDat/screen - Xin cảm ơn các bạn đã đọc.

Mục lục