تصميم واجهة متعددة الأطب مع سويفتوي من أجل تحسين الملاحة

(سويفتو) إطار (آبل) الإفصاحي لبناء واجهات المستخدمين عبر جميع منابر آبل، يوفر وسيلة قوية وبسيطة لخلق واجهات متعددة الأطب، والملاحة المُضبوطة هي واحدة من أكثر الأنماط شيوعاً في أجهزة الهواتف المحمولة والحواسيب المكتبية، مما يسمح للمستعملين بالتبادل السريع بين الأقسام المختلفة دون فقدان السياق، سواء كنت تبني جهازاً للأخبار عن المحتوى الثقيل، أو لوحة لمسحوقات، أو لوحة بيانية، أو لوحة بيانية،

وتسير هذه المادة من خلال كل ما تحتاج إلى معرفته عن تصميم وصلات متعددة الأطبائين مع سويفتو.() وببدءاً من أساسيات [(FLT:0]]TabView]، سنستكشف التكييف، وإدارة الدولة، والأنماط المتقدمة، وإمكانية الوصول، والأمثلة الحقيقية للعالم، وفي النهاية، ستكونون مجهزين لبناء أجهزة مختصرة في مجال الإنتاج.

فهم عنصر تابيفيو

وفي قلب الملاحة في سويفتو، يقع TabView]، وهو رأي حاويات يعرض مجموعة من آراء الأطفال، يرتبط كل منها ببند من مواد التبويب، وعندما يلتقط المستخدم شريطا، يُعرض الرأي المقابل، وتُظهر الحاوية الحالة النشطة بإبراز.

العيون و السلوك

وبحسب التقصير، فإن TabView] تجعل من الحانات في قاع الشاشة على الشاشة في ال iOS وعلى القمة في ماكوس، وتكيف أيبادوس مع توجه الأجهزة، وتستخدم المراقبة أسلوباً مجزأ، ولا تحتاج إلى إدارة تصميم شريط التاب نفسه؛ وتعالج شركة SwiftUI عملية اختيار الموقع، وتضعه في موضعه.

بنود مع SF Symbols

Apple recommends using SF Symbols for tab icons because they scale perfect across devices and accessibility settings. The modifier accepts a view builder where you typically place an ] with an SF Symbol name and a label.

TabView {
 ContentView()
 .tabItem {
 Label("Home", systemImage: "house.fill")
 }
}

The Label] view automatically combines an icon and a title, ensuring proper alignment and accessibility labels. You can always fall back to separate and views for more control.

بناء واجهة متعددة الجوانب

إن إنشاء تطبيق بسيط يتطلب فقط بضعة خطوط من الرموز، ولنبني مثالاً ضئيلاً على ثلاثة رسومات: البيت والبحث والموجز.

تنفيذ الإجراءات المتعلقة بالإطار

1. Create a new SwiftUI view (e.g., ) and add a ]TabView] as the root.
2. For each tab, provide a child view (such as a or a custom view).
3. Attach the ] modifier with an appropriate SF Symbol and a localized string.

الرمز مثال

struct ContentView: View {
 var body: some View {
 TabView {
 HomeView()
 .tabItem {
 Label("Home", systemImage: "house.fill")
 }

 SearchView()
 .tabItem {
 Label("Search", systemImage: "magnifyingglass")
 }

 ProfileView()
 .tabItem {
 Label("Profile", systemImage: "person.crop.circle")
 }
 }
 }
}

struct HomeView: View {
 var body: some View {
 Text("Welcome Home")
 }
}

struct SearchView: View {
 var body: some View {
 Text("Find what you need")
 }
}

struct ProfileView: View {
 var body: some View {
 Text("Your profile")
 }
}

وتنتج هذه المدونة شريطاً للعمل يتضمن ثلاثة بنود، ويظهر كل شريط مضمونه عند اختياره، ويدير سويفت أوي تلقائياً الدولة النشطة والتقديرات الانتقالية.

المواد التي تستخدم التاب في الأغراض العرفية

وفي حين أن النظرة الافتراضية نظيفة، فإنكم غالبا ما تحتاجون إلى تصميم شريط التابوت ليطابق علامة تطبيقكم أو يقدمون تعليقات إضافية من المستعملين.

إضافة البدغات والمؤشرات

(سويفتو) يسمح لك بإيداع شارة إلى أي بند من بنود المقذوفات باستخدام ] تعديل على وجهة نظر الطفل، وتظهر شركة بادجز عدداً صغيراً أو نصاً (مثل عدد الإخطارات غير المرئية).

TabView {
 InboxView()
 .tabItem { Label("Inbox", systemImage: "tray.fill") }
 .badge(5) // Shows a red badge with "5"

 SettingsView()
 .tabItem { Label("Settings", systemImage: "gearshape") }
}

(ب) تحديث البدغات تلقائياً عند الالتزام بـ @ State أو الممتلكات المراقَبة، وفيما يتعلق باليوس، تبدو الشارة دائرة حمراء بعدد منها؛ وعلى منابر أخرى، قد تختلف.

تغيير صورة نقابة المحامين (اللوحات المتحركة والمعلومات الأساسية)

To change the لهجة لون الشريط المختار، Set the ]] modifier on the TabView] (deprecated in newer iOS versions) or use the ]] modifier in iOS 15+:

TabView {
 // tabs...
}
.tint(.purple)

ولزيادة التكييف المتطور، مثل الخلفية أو الشكل التقليدي، يمكن استخدام من خلال أو بناء حانة توب مصممة خصيصاً تماماً باستخدام مجموعة أفقية من الأزرار (انظر قسم حانة التابوت العادم لاحقاً). غير أن التمسك بقاعة النظامية عندما يكون ممكناً يكفل سلوكاً متسقاً مع توقعات المستخدمين وتوقعات مستويات النظام.

الإدارة العامة والاختيار

والرقابة على أي شريط فعال هي أساسية بالنسبة لملامح مثل الربط العميق، أو تفضيلات المستعملين، أو إعادة صياغة التطبيق إلى أول جدول بعد إجراء معين.

استخدام @ State for Selection

Bind a @State] changing of the same type as the tag values to the parameter of TabView]. Assign each child view an integer (or any value) using the .

struct ContentView: View {
 @State private var selectedTab = 0

 var body: some View {
 TabView(selection: $selectedTab) {
 HomeView()
 .tabItem { Label("Home", systemImage: "house.fill") }
 .tag(0)

 SearchView()
 .tabItem { Label("Search", systemImage: "magnifyingglass") }
 .tag(1)

 ProfileView()
 .tabItem { Label("Profile", systemImage: "person.crop.circle") }
 .tag(2)
 }
 }
}

وعندما تتغير [مثلاً، عبر زر على شاشة المنزل]، يتحول النظرة التافهة تلقائياً إلى الجدول المقابل، وهذا النهج يتيح أيضاً قراءة الكتاب الحالي في مكان آخر من تطبيقك.

برنامجي

ويمكنك تغيير السلاسل من داخل أي نظرة للطفل عن طريق إصدار مُلزم لمتغير الاختيار، وعلى سبيل المثال، زر " الذهاب إلى المُوطن " على حساب المنزل:

struct HomeView: View {
 @Binding var selectedTab: Int

 var body: some View {
 VStack {
 Text("Home")
 Button("Open Settings") {
 selectedTab = 2
 }
 }
 }
}

Integrate this by passing the binding when creating the child view inside the TabView. This gives you full control over navigation without breaking the tab state.

Persisting Tab Selection with UserDefaults

For a user-friendly touch, remember the last selected tab after the app restarts. Use to automatically persist the selection to UserDefaults:

struct ContentView: View {
 @AppStorage("selectedTab") private var selectedTab = 0

 var body: some View {
 TabView(selection: $selectedTab) {
 // tabs...
 }
 }
}

التطبيق سيبدأ الآن على حساب المستعمل الذي زاره آخر مرة

أنماط الملاحة المتقدمة

وكثيرا ما تحتاج التطبيقات المتعددة الأطبائط إلى الاندماج في أكوام الملاحة، أو معالجة المفاعلات المحتوية على ترددات، أو تبادل البيانات بين المشابك.

Combining TabView with NavigationView

ويمكن أن يحتوي كل شريط على ما لديه من آراء خاصة به [(FLT:25]) (أو ) في نظام سويفتو (SiftUI) الأكبر سناً) مما يسمح بحفر الآراء بالتفصيل في إطار حساب بينما يظل شريط التابوت واضحاً.

struct HomeView: View {
 var body: some View {
 NavigationStack {
 List(1..<20) { item in
 NavigationLink("Item \(item)", value: item)
 }
 .navigationDestination(for: Int.self) { item in
 DetailView(item: item)
 }
 .navigationTitle("Home")
 }
 }
}

وضع داخل وجهة نظر الطفل في التابوت، ليس خارج TabView]، للحفاظ على أكوام ملاحية منفصلة لكل شريط، وهذا هو النمط الموصى به لمقابلات مثل البريد أو المنشطات.

Handling Deep Links

وعندما يتلقى تطبيقك وصلة عالمية أو مخططاً للعادة، قد تحتاج إلى التحول إلى حساب محدد وبحرية اختيارية إلى استعراض فرعي، واستخدام تعديل على TabView ] (أو الرأي الجذري) وضبط القانون الاتحادي لتحديث حالة الاختيار أو تحريك الملاحة.

TabView(selection: $selectedTab)
 .onOpenURL { url in
 // e.g., myapp://tab/2
 if let tabNumber = extractTab(from: url) {
 selectedTab = tabNumber
 }
 }

For more complex scenarios, combine with a path binding.

بيانات المرور بين التابس

ونظراً لأن لكل كتاب تسلسل هرمي من وجهة نظره، فإن البيانات التي تُنقل فيما بينها تتطلب مصدراً مشتركاً من مصادر الدولة، وتشمل الخيارات ما يلي:

• Environment Objects]: Inject an via at the root of the ]TabView.]
• StateObject with a shared manager]: Create a singleton or observable class and pass it down.
• Using the selection binding]: For simple values, the selection state itself can act as a communication channel (e.g., “I shifted to tab 2 because data is ready”).

تجنب التكثيف؛ إبقاء تدفق البيانات غير اتجاهي عند الإمكان.

إمكانية الوصول إلى المعلومات وخبرة المستعملين

وجود واجهة مُيسّرة للكتاب أمر حاسم للوصول إلى أوسع جمهور، يوفر الدعم المُبني في مجال الوصول، لكن يجب أن تُحقّق منه وتُعززه.

دعم الصوت

(أ) تُصبح المواد المُتَصَلة تلقائياً بطاقات دخول من [(FLT:0]]Label أو النص الذي تقدمينه، اختبار أن كل كتاب ينقل غرضه بوضوح.

لوحة مفاتيح الملاحة

On iPadOS with a equipment keyboard, users can navigate between tabs using Command[number] or Option — SwiftUI’s TabView] inherits this behavior automatically. Ensure your custom tab implementation also supports keyboard commands by added modifiers.

العيون التأديبية

وفي حالة " إيفونز " في وضعية المناظر الطبيعية، قد يبدو أن حانة التابوت مختلفة.

نقابة المحامين في تاب مع سويفتو

أحياناً تحتاج إلى تصميم يبتعد عن حانة التابوت النظامية مثل زر عائم في الوسط، شكل منحني أو أجهزة محاكاة، بينما تخسر بعض السلوكيات المبنية (مثل غموض المناطق الآمنة)، (سويفتو) تصنع حواجز تاب عادية

اعادة تابفيو مع الشباك العتيقة

(ج) إيجاد وجهة نظر معتادة تستخدم فيها ) أزراراً مغلوطة في القاع، ] للاختيار والتبديل بممتلكات حاسوبية أو بيان داخل .

struct CustomTabView: View {
 @State private var selection = 0

 var body: some View {
 VStack(spacing: 0) {
 // Content area
 Group {
 if selection == 0 {
 HomeView()
 } else if selection == 1 {
 SearchView()
 } else {
 ProfileView()
 }
 }
 .frame(maxWidth: .infinity, maxHeight: .infinity)

 // Custom tab bar
 HStack {
 TabBarButton(icon: "house.fill", label: "Home", isSelected: selection == 0)
 .onTapGesture { selection = 0 }
 Spacer()
 TabBarButton(icon: "magnifyingglass", label: "Search", isSelected: selection == 1)
 .onTapGesture { selection = 1 }
 Spacer()
 TabBarButton(icon: "person.fill", label: "Profile", isSelected: selection == 2)
 .onTapGesture { selection = 2 }
 }
 .padding(.horizontal)
 .padding(.top, 8)
 .background(Color(uiColor: .systemBackground)
 .shadow(radius: 2))
 }
 .ignoresSafeArea(.keyboard) // Prevent tab bar from moving with keyboard
 }
}

الانتقال من منطقة تاب

إضافة انتقال سلس عند تبديل المقالات بتغليف المحتوى في مبنى ، مثلاً، إضافة إنزلاق أو تحول في حالة عدم قدرة على الاستمرار، ويمكنك أيضاً أن تُقلّد الأيقونة نفسها باستخدام على الـ iOS 17+ (مثل القفز أو النبض).

الأداء على الوجه الأمثل

ويمكن أن يعاني من تلف الذاكرة المتعددة الأطراف إذا قمت بتحميل جميع المشابك بحذر، أما الكاتب سويفتوي (SwiiftUI) ]TabView ] فهو كسول من جراء التقصير: فهو لا يخلق سوى ويجعل من رأيه حاصلا على حرف مختار، ولكن إذا استخدمت آراء الدولة المتحركة، فقد لا تزال ترغب في تحقيق المثل الأمثل.

وحدة التعبئة الكسولة

Use or inside tabs to postponed view creation until scrolling. Avoid using complex computations in the initializer of tab child views; instead, rely on to start data loading.

تجنب الذاكرة

ونظراً لأن القرطاسية كثيراً ما تحمل إشارات إلى حالات، فإنها تضمن عدم إنشاء دورات مرجعية قوية غير ضرورية، واستخدام للأجسام المملوكة و] للأجسام المشتركة، وإذا لم يُظهر قط، فإن رأيها لا يزال قائماً في الذاكرة - استخدام [غطاء تقليدي] لإرجاء عملية الاستدلال إلى أن يتم اختيار القرض.

اختبار وجهك المتقطع

وتساعد الاختبارات الآلية على ضمان أن تعمل الملاحة المُقبوطة بشكل صحيح عبر الولايات المُستخدمة للأجهزة.

اختبارات الوحدة لاختيار تاب

لأن وجهة نظرك محركة بمتغير ، يمكنك اختبار المنطق الذي يغير ]، على سبيل المثال، التحقق من أن هناك صلة عميقة صحيحة وتُسند الرقم القياسي للكتاب.

func testTabSelectionViaDeepLink() {
 let url = URL(string: "myapp://tab/2")!
 let tabNumber = extractTab(from: url)
 XCTAssertEqual(tabNumber, 2)
}

اختبارات الأشعة فوق البنفسجية مع اختبارات الأشعة السينية

(أ) استخدام نظام XCUITest للتحقق من أن تداول صنف من المواد المشابهة يعرض المحتوى الصحيح.

func testTappingSearchTab() {
 let app = XCUIApplication()
 app.launch()

 let searchTab = app.tabBars.buttons["Search"]
 XCTAssertTrue(searchTab.exists)
 searchTab.tap()
 XCTAssertTrue(app.staticTexts["Find what you need"].exists)
}

معرض العالم الحقيقي: لوحة متعددة الأطب

فلنجمع كل شيء مع مثال عملي: تطبيق لوحات مظلة مع ثلاثة ملصقات - لمحة عامة، تحليلات، تعيينات.

لمحة عامة

(ب) يُظهر موجزاً للمقاييس الرئيسية (مثل المستخدمين النشطين اليوميين، الإيرادات) في مُتَجَهِّر .() ويستخدم للسماح بالحفر في تقارير مفصلة.() ويستمر اختيار الكتب بـ .]

محلل

يحتوي على رسوم بيانية ورسوم بيانية مُبنىة برسومات سويفت لأن الرسم البياني يمكن أن يكون ثقيلاً، ويُعتبر أن ويُحدث تحميل البيانات فقط عندما يظهر التابوت.

Settings Tab

يعرض قائمة بالضحكات والصلات وزر السحب، وقد يحتاج هذا الحساب إلى الوصول إلى جسم بيئي يحتوي على دورة المستعملين، ويضمن عبر أن تتقاسم جميع المقالات نفس البيانات.

الروايات والحلول المشتركة

Even experienced SwiftUI developers run into a few recurring issues with TabView].

تاب بار اختفت في مأزق الملاحة

إذا ضغطت على مشهد ملاحي داخل علبة، قد يختفي شريط التابوت في دفعة، وحل: استخدام (أيوس 16+) بدلاً من - يُبقي شريط التبويب مرئياً، وكبديل لذلك، يُخفي/يُظهر شريط التابوت باستخدام .

القيمة غير الصحيحة للتاج

وإذا لم تُسند إلى كل طفل ، لا يجوز أن يُكرِّم العرض الملزم الاختيار بشكل صحيح، ويوفر دائماً علامة مميزة ومتسرعة لكل كتاب.

Tab View Reting State

وأحياناً عندما يبدل المطالعة، فإن نظرة الطفل إلى الدولة، وهذا هو التصميم - يخلق نظام سويفتول حالة جديدة من وجهة نظر الطفل في كل مرة يحتاج فيها إلى عرضه، وللحفاظ على الدولة عبر مفاتيح التأليف، أو رفع الدولة إلى وجهة نظر الوالدين أو استخدام على مستوى أعلى من ينبغي أن يستخدم هذا النوع من البيانات البديل.

خاتمة

ويُعد تصميم واجهة متعددة الجوانب مع سويفتو (SwiiftUI) بسيطة وشديدة التكييف، ويعطي عنصر Tabiew ) أساسا صلبا، ومع عدد قليل من الخطوط الإضافية من الرموز، يمكنك إضافة الشارات وإدارة الدولة، وإدماج أكوام الملاحة، بل وبناء بار منصات من الطين العادم تماما، وذلك باتباع أفضل الممارسات المتعلقة بإمكانية الوصول والأداء والاختبار.

Continue exploring by diving into Apple’s official TabView documentation], learning about ]human interface guidelines for tab bars], and experimenting with SF Symbols to give your system, tabs a