မိုဘိုင်း Navigation Patterns များကို သဘောတရားအရ

နားလည်ထားရမယ့် အချက်

Mobile framework တိုင်းမှာ screen တွေကြားရွှေ့ဖို့ ကိုယ်ပိုင် navigation API ရှိပေမယ့် အောက်ခြေမှာ universal pattern အနည်းငယ်တည်းပဲ ရှိနေပါတယ်။ ဒါကို သိထားရင် framework ဘယ်ခုမဆိုမှာ navigation ကို reasoning လုပ်နိုင်ပါတယ်။

• Stack — Home -> Course -> Lesson, back button က last in, first out ပုံစံ pop ချသည်
• Tabs — Home/Search/Downloads/Profile ကဲ့သို့ parallel top-level section
• Drawer — side menu နောက်ကွယ်က destination list, Android မှာ ပိုအသုံးများသည်
• Modal — ယာယီ focused overlay, confirmation/create-item အတွက်
• Deep Link — app အပြင်ဘက်က specific screen တစ်ခုကို တိုက်ရိုက်ဖွင့်ခြင်း

Stack Navigation

screen တွေကို push/pop လုပ်ပြီး last-in-first-out ပုံစံ ရွှေ့ကြသည့် navigation pattern — back button/gesture က stack ရဲ့ အပေါ်ဆုံး screen ကို ဖယ်ချသည်။

Deep Link

notification, external link, app တခြားတစ်ခု စတဲ့ app အပြင်ဘက်က source တစ်ခုက app အတွင်း specific screen တစ်ခုကို တိုက်ရိုက် ဖွင့်ပေးသော mechanism။

FOUR NAVIGATION PATTERNS
------------------------
FOUR NAVIGATION PATTERNS
-----
STACK (push/pop, LIFO)            TABS (parallel sections)
Home -> Course -> Lesson          [Home][Search][Downloads][Profile]
      <- back pops top                ^ tap switches instantly

DRAWER (side menu)                MODAL (temporary overlay)
+------------------+              current screen
| =  menu          |              +----------------+
|   Home           |              | Confirm Delete |
|   Settings       |              +----------------+
|   Logout         |              dismiss -> back to screen
+------------------+

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Real app အများစုဟာ pattern တစ်ခုတည်းကို ရွေးမယ့်အစား pattern အများကို ပေါင်းစပ်သုံးကြပါတယ် — top-level tabs အထဲမှာ tab တစ်ခုစီအတွက် stack navigator ခွဲထားလေ့ရှိသည်။

tab ပြောင်းရင်တောင် tab တစ်ခုစီရဲ့ stack ကို background မှာ သီးခြားစီ ထိန်းသိမ်းထားပြီး, Modal တွေက short-lived focused task တွေအတွက် ဒီ structure အပေါ် layer ချထားကြသည်။

• Stack, Tab, Drawer, Modal, Deep Link ဟာ framework ဘယ်ခုမဆိုအောက်မှာ ရှိနေတဲ့ universal navigation pattern ငါးမျိုးဖြစ်သည်
• Real app တွေဟာ pattern တစ်ခုတည်းမဟုတ်ဘဲ (ဥပမာ tabs အထဲမှာ stack) ပေါင်းစပ်သုံးလေ့ရှိသည်
• Screen transition ပုံစံကို ခွဲခြားသိနိုင်ခြင်းက API name ပြောင်းသွားလည်း framework မည်သည့်ခုမဆိုအတွက် transfer ဖြစ်နိုင်သည်

အတူတူ စမ်းရေးကြည့်မယ်

function createNavigationStack(initialScreen) {
  const stack = [initialScreen];
  return {
    push(screen) {
      stack.push(screen);
      return { currentScreen: screen, depth: stack.length };
    },
    pop() {
      if (stack.length > 1) stack.pop();
      return { currentScreen: stack[stack.length - 1], depth: stack.length };
    }
  };
}

const courseNav = createNavigationStack("Home");

console.log("push Course:", JSON.stringify(courseNav.push("Course")));
console.log("push Lesson:", JSON.stringify(courseNav.push("Lesson")));
console.log("pop (back):", JSON.stringify(courseNav.pop()));
console.log("pop (back):", JSON.stringify(courseNav.pop()));

push Course: {"currentScreen":"Course","depth":2}
push Lesson: {"currentScreen":"Lesson","depth":3}
pop (back): {"currentScreen":"Course","depth":2}
pop (back): {"currentScreen":"Home","depth":1}

Home ကနေ Course, Lesson ဆီ push နှစ်ကြိမ်လုပ်ပြီးနောက် pop နှစ်ကြိမ်က stack ကို depth 1 (Home) ဆီ last-in-first-out အတိုင်း ပြန်ချသွားသည်ကို တွေ့ရသည်။

Navigation — Android Developers — How Mobile Apps Work