Responsive Design — kiến thức cơ bản, thích ứng giao diện với các màn hình

Responsive Design là gì?

Responsive Design là phương pháp xây dựng giao diện mà bố cục phản ứng với kích thước màn hình, hướng và không gian có sẵn, sắp xếp lại các phần tử mà không mất chức năng. Thuật ngữ này được Ethan Marcotte đặt ra vào năm 2010 cho thiết kế web, nhưng các nguyên tắc hoàn toàn áp dụng được cho các ứng dụng di động gốc.

Trong phát triển di động, responsive design có nghĩa là cùng một ứng dụng hiển thị chính xác trên tất cả các thiết bị: từ iPhone SE (375 pt) đến iPad Pro (1024 pt ở chế độ dọc) và từ điện thoại thông minh Android (360 dp) đến máy tính bảng (800 dp). Các yếu tố chính là lưới linh hoạt, hình ảnh thích ứng và truy vấn phương tiện ở cấp độ framework (size classes, qualifiers).

Theo Tài liệu dành cho nhà phát triển Apple, ứng dụng phải là universal — hoạt động trên tất cả các thiết bị mà không cần bản dựng riêng cho iPad. Google Play khuyến nghị sử dụng bố cục thích ứng thông qua Jetpack WindowManager và canonical layouts. Việc thiếu khả năng thích ứng với máy tính bảng là nguyên nhân phổ biến gây ra các đánh giá tiêu cực.

Responsive vs Adaptive Design

Các thuật ngữ responsive và adaptive thường bị nhầm lẫn, mặc dù chúng mô tả các cách tiếp cận khác nhau. Responsive design sử dụng lưới linh hoạt liên tục điều chỉnh theo chiều rộng màn hình. Adaptive design sử dụng bố cục cố định cho các breakpoints được xác định trước — ứng dụng chuyển đổi giữa chúng một cách đột ngột.

Trong thực tế, các ứng dụng di động sử dụng kết hợp cả hai cách tiếp cận. Lưới cơ bản được xây dựng theo hướng responsive (Auto Layout với các phụ thuộc constraint) và khi đạt đến breakpoint (ví dụ: chiều rộng > 600 pt), bố cục chuyển sang phiên bản thích ứng với cách sắp xếp phần tử khác. iOS kết hợp Auto Layout (responsive) với Size Classes (adaptive). Android kết hợp ConstraintLayout (responsive) với tài nguyên qualifier (adaptive).

iOS Size Classes: Compact và Regular

Size Classes là cơ chế iOS phân loại không gian màn hình có sẵn theo hai trục: ngang và dọc. Mỗi trục có thể là Compact (C) hoặc Regular (R). Sự kết hợp tạo ra bốn tùy chọn thích ứng bố cục: CR (iPhone dọc điển hình), RR (iPad dọc/ngang), RC (iPhone ngang trên Plus/Pro Max), CC (iPad Split View).

// Định nghĩa Size Classes trong Swift
import UIKit

class AdaptiveViewController: UIViewController {

    override func traitCollectionDidChange(
        _ previousTraitCollection: UITraitCollection?
    ) {
        super.traitCollectionDidChange(previousTraitCollection)
        adjustLayout(for: traitCollection)
    }

    private func adjustLayout(for traits: UITraitCollection) {
        switch (traits.horizontalSizeClass, traits.verticalSizeClass) {
        case (.regular, .regular):
            showSplitView() // iPad — hiển thị master-detail
        case (.compact, .regular):
            showStackedView() // iPhone dọc — bố cục xếp chồng
        case (.compact, .compact):
            showCompactView() // iPhone SE ngang — thu nhỏ
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // Sử dụng UISplitViewController hoặc HStack
    }

    private func showStackedView() {
        // Stack dọc cho iPhone
    }

    private func showCompactView() {
        // Ẩn các phần tử phụ, hiển thị phần tử chính
    }
}

Trong Interface Builder, Size Classes được cấu hình thông qua bảng "wAny hAny" — nhà phát triển chọn một tổ hợp cụ thể (wRegular hRegular, wCompact hRegular) và thêm các biến thể constraint. SwiftUI sử dụng @Environment(\.horizontalSizeClass) và @Environment(\.verticalSizeClass) để thích ứng phản ứng — khi hướng hoặc kích thước cửa sổ thay đổi, SwiftUI tự động vẽ lại view.

// Size Classes trong SwiftUI
import SwiftUI

struct ResponsiveView: View {
    @Environment(\.horizontalSizeClass) private var hSizeClass

    var body: some View {
        if hSizeClass == .regular {
            // iPad — bố cục ngang với thanh bên
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — stack dọc toàn màn hình
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers là cơ chế Android để tải các tài nguyên khác nhau (layout, values, drawables) dựa trên đặc điểm thiết bị. Các bộ định tính bao gồm kích thước màn hình (small, normal, large, xlarge), hướng (port, land), chiều rộng tối thiểu (sw<N>dp), chiều rộng khả dụng (w<N>dp) và chiều cao (h<N>dp).

// Phát hiện cấu hình thiết bị trong Kotlin
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val config = resources.configuration
        val screenWidthDp = config.screenWidthDp
        val screenHeightDp = config.screenHeightDp
        val orientation = config.orientation

        when {
            screenWidthDp >= 900 -> setContentView(R.layout.activity_main_tablet)
            screenWidthDp >= 600 -> setContentView(R.layout.activity_main_sw600)
            else -> setContentView(R.layout.activity_main_phone)
        }
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.container, LandscapeFragment())
                .commit()
        }
    }
}

Cấu trúc tài nguyên cho các màn hình khác nhau: res/layout/activity_main.xml (điện thoại), res/layout-sw600dp/activity_main.xml (máy tính bảng 7"), res/layout-sw720dp/activity_main.xml (máy tính bảng 10"). Android tự động chọn bố cục chính xác dựa trên smallestWidth — chiều rộng màn hình tối thiểu tính bằng dp bất kể hướng. Bộ định tính sw<N>dp là phương pháp thích ứng ổn định nhất.

// Jetpack Compose — WindowSizeClass để thích ứng
@Composable
fun ResponsiveScreen() {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

    when {
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.EXPANDED -> {
            TabletLayout() // >= 840 dp
        }
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.MEDIUM -> {
            MediumLayout() // 600–840 dp
        }
        else -> {
            CompactLayout() // < 600 dp
        }
    }
}

Jetpack WindowManager (thư viện androidx.window) cung cấp WindowSizeClass với ba loại chiều rộng: COMPACT (0–600 dp), MEDIUM (600–840 dp), EXPANDED (>840 dp). Đây là giải pháp thay thế hiện đại cho các thư mục qualifier cũ. Google khuyến nghị sử dụng nó để thích ứng với các thiết bị có thể gập lại và máy tính bảng.

Lưới thích ứng và breakpoints

Lưới thích ứng là nền tảng của responsive design. Thay vì kích thước cố định, các phần tử sử dụng tỷ lệ phần trăm, constraints linh hoạt và kích thước nội dung nội tại. Breakpoints là các điểm chiều rộng màn hình mà tại đó bố cục chuyển đổi giữa các trạng thái.

Breakpoints được khuyến nghị từ Google Material Design và Apple HIG: 0–599 dp (điện thoại, một cột), 600–839 dp (máy tính bảng, hai cột, navigation rail), 840+ dp (máy tính bảng, ba cột, navigation drawer). Số lượng breakpoints không được vượt quá 4 — các điểm chuyển tiếp quá nhiều làm phức tạp việc bảo trì và kiểm thử.

Các phương pháp hay nhất về thiết kế thích ứng

Responsive design thành công đòi hỏi tuân theo một bộ quy tắc được cộng đồng nhà phát triển iOS và Android xây dựng trong thập kỷ qua. Dưới đây là các khuyến nghị chính dựa trên Apple HIG, Google Material Design và kinh nghiệm dự án sản xuất.

• Bắt đầu với màn hình nhỏ nhất — thiết kế bố cục cho iPhone SE (375 pt) hoặc Android compact (360 dp), sau đó thêm phần mở rộng cho màn hình lớn hơn. Điều này đảm bảo nội dung quan trọng phù hợp ở mọi nơi
• Sử dụng kích thước nội dung nội tại — UILabel, UIButton, ImageView có kích thước tự nhiên. Auto Layout và ConstraintLayout sử dụng chúng để định vị tự động mà không cần constraints thừa
• Đừng ẩn nội dung trên màn hình nhỏ — thay vì ẩn, hãy sắp xếp lại (reflow). Người dùng sẽ có quyền truy cập vào cùng một chức năng, chỉ khác thứ tự
• Kiểm thử trên tất cả Size Classes — trình mô phỏng iOS cho phép chuyển đổi Size Classes mà không cần khởi động lại. Trình giả lập Android cung cấp các cấu hình thiết bị khác nhau. Hãy đảm bảo kiểm thử trên máy tính bảng và thiết bị có thể gập lại
• Material 3 Adaptive Layout — Google cung cấp các canonical layouts có sẵn cho danh sách/chi tiết, thanh công cụ và điều hướng. Hãy sử dụng chúng thay vì phát minh ra các mẫu của riêng bạn

Nguyên tắc chính của thiết kế thích ứng: nội dung xác định bố cục, chứ không phải ngược lại. Nếu iPad hiển thị cùng một chồng thẻ như iPhone, chỉ kéo dài ra — đó không phải là responsive design. Responsive design xem xét lại bố cục: trên iPhone — cuộn dọc, trên iPad — master-detail với thanh bên.