Kiến trúc màn hình và điều hướng trong phát triển di động: nó là gì, các loại và cách hoạt động

Kiến trúc màn hình và điều hướng là gì

Kiến trúc màn hình và điều hướng là khung của ứng dụng di động xác định các màn hình có sẵn và cách di chuyển giữa chúng. Mỗi màn hình giải quyết một tác vụ cụ thể: danh sách sản phẩm, thẻ sản phẩm, giỏ hàng hoặc biểu mẫu thanh toán. Theo Apple Human Interface Guidelines (2025), điều hướng được thiết kế tốt giúp giảm 40% tải nhận thức của người dùng. Các nhà phát triển mới bắt đầu nên bắt đầu với một sơ đồ đơn giản gồm ba đến năm màn hình.

Kiến trúc màn hình bao gồm những gì

Bất kỳ kiến trúc màn hình nào cũng bao gồm ba yếu tố cơ bản: màn hình, chuyển tiếp và bộ chứa điều hướng. Màn hình hiển thị nội dung, chuyển tiếp quản lý hoạt ảnh thay đổi màn hình và bộ chứa lưu trữ lịch sử di chuyển của người dùng. Trên Android, vai trò này do FragmentManager đảm nhận, trên iOS — UINavigationController. Hiểu ba thành phần này là bước đầu tiên để thiết kế giao diện thân thiện với người dùng.

Các loại điều hướng chính trong ứng dụng di động

Trong ứng dụng di động, có bốn loại điều hướng chính: ngăn xếp, phương thức, tab và dựa trên cử chỉ. Mô hình ngăn xếp hoạt động như một chồng thẻ — mỗi màn hình mới được đặt lên trên và nút "Quay lại" loại bỏ thẻ trên cùng. Theo Nielsen Norman Group (2024), điều hướng ngăn xếp là mẫu dễ dự đoán nhất, được 94% người dùng hiểu mà không cần đào tạo. Bắt đầu với ngăn xếp được khuyến nghị vì nó trực quan đối với người dùng trên mọi nền tảng.

Khi nào nên sử dụng cửa sổ phương thức

Cửa sổ phương thức là màn hình tạm thời yêu cầu một hành động trước khi quay lại nội dung chính. Chúng được sử dụng cho một tác vụ duy nhất: xác nhận hành động, biểu mẫu đăng nhập hoặc chọn tùy chọn. Không giống như ngăn xếp, cửa sổ phương thức không được lưu trong lịch sử điều hướng. Loại điều hướng được chọn dựa trên các trường hợp sử dụng của ứng dụng.

Điều hướng trên iOS với UINavigationController

Trên iOS, điều hướng được xây dựng xung quanh UINavigationController — một bộ điều khiển quản lý ngăn xếp màn hình. UINavigationController tự động thêm thanh điều hướng với tiêu đề và nút "Quay lại". Theo Apple Developer Documentation (2025), 85% ứng dụng trong App Store sử dụng UINavigationController làm mẫu điều hướng chính. Các nhà phát triển iOS mới bắt đầu chỉ cần thành thạo push và pop kết hợp với kiến thức cơ bản về thiết kế UX/UI.

Ngăn xếp màn hình hoạt động như thế nào trong iOS

Trong quá trình chuyển tiếp push, một màn hình mới được đặt vào ngăn xếp điều hướng và người dùng thấy hoạt ảnh trượt vào từ bên phải. Trong quá trình chuyển tiếp pop, màn hình hiện tại bị xóa khỏi ngăn xếp và người dùng quay lại màn hình trước đó. UINavigationController lưu trữ tham chiếu đến tất cả các màn hình trong ngăn xếp, cho phép người dùng quay lại nhiều bước. Tại IT Sectr, chúng tôi sử dụng cách tiếp cận này trong tất cả các dự án iOS để xây dựng các kịch bản người dùng tuyến tính.

Điều hướng trên Android hoạt động như thế nào

Trên Android, kiến trúc màn hình được triển khai thông qua Navigation Component — một thư viện của Google để xây dựng điều hướng. Navigation Component sử dụng đồ thị điều hướng (nav graph), trong đó mỗi màn hình là một nút và chuyển tiếp là các cạnh giữa chúng. Theo Android Developers Guide (2025), Navigation Component giảm 60% lỗi điều hướng so với FragmentManager thủ công. Các nhà phát triển Android mới bắt đầu được khuyến nghị nên thành thạo Navigation Component ngay lập tức.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

// Trong nav_graph.xml:
<!-- 
  <fragment android:id="@+id/homeFragment"
    android:name=".HomeFragment" />
  <fragment android:id="@+id/detailFragment"
    android:name=".DetailFragment" />
  <action android:id="@+id/toDetail"
    app:destination="@id/detailFragment" />
-->

// Điều hướng khi nhấn nút:
view.findViewById<Button>(R.id.open_detail).setOnClickListener {
    findNavController().navigate(R.id.toDetail)
}

FragmentManager và vai trò của nó

Trước Navigation Component, các nhà phát triển quản lý chuyển tiếp thông qua FragmentManager — một lớp hệ thống để thay thế fragment. FragmentManager làm việc với các giao dịch: replace, add, remove để thay đổi fragment trên màn hình. Tuy nhiên, nó yêu cầu quản lý ngăn xếp và trạng thái thủ công, điều này thường dẫn đến lỗi. Google chính thức khuyến nghị Navigation Component như một giải pháp thay thế an toàn hơn cho FragmentManager thủ công.

Lỗi thường gặp của người mới bắt đầu trong kiến trúc màn hình

Các nhà phát triển mới bắt đầu thường mắc lỗi điển hình khi thiết kế kiến trúc màn hình. Phổ biến nhất là thiếu một trung tâm kiểm soát điều hướng duy nhất, khi các chuyển tiếp nằm rải rác khắp mã nguồn. Theo phân tích của Google Play Console (2025), các ứng dụng có điều hướng hỗn loạn có báo cáo sự cố liên quan đến chuyển tiếp nhiều hơn 37%. Một bộ định tuyến duy nhất hoặc đồ thị điều hướng giải quyết vấn đề này.

Bỏ qua nút "Quay lại"

Nhiều người mới bắt đầu quên xử lý nút "Quay lại" của hệ thống trên Android hoặc cử chỉ vuốt trên iOS. Việc quay lại không được xử lý dẫn đến ứng dụng bị treo hoặc thoát bất ngờ. Trên Android, Navigation Component xử lý nút "Quay lại" tự động nếu đồ thị điều hướng được cấu hình. Dưới đây là một ví dụ về xử lý nút "Quay lại" bằng OnBackPressedDispatcher.

class MyFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val callback = OnBackPressedCallback(true) {
            if (isSheetExpanded) {
                collapseSheet()
                isEnabled = false
            } else {
                isEnabled = false
                requireActivity().onBackPressedDispatcher.onBackPressed()
            }
        }
        requireActivity().onBackPressedDispatcher.addCallback(
            viewLifecycleOwner, callback
        )
    }
}

Mã kiểm tra xem bảng Bottom Sheet có được mở rộng không: nếu có — thu gọn nó, nếu không — chuyển sự kiện đến bộ điều phối hệ thống. Đây là một mẫu tiêu chuẩn để xử lý "quay lại" tùy chỉnh trong Android.