WXNavigationBar

WXNavigationBar

WeChat NavigationBar

• คุณสมบัติ
• ความต้องการ
• การติดตั้ง
  • โกโก้พอดส์
  • คาร์เธจ
  • ผู้จัดการแพ็คเกจ Swift
• หลักการออกแบบ
• เริ่มต้นใช้งาน
  • การกำหนดค่าตาม UINavigationController
  • การกำหนดค่าตาม ViewController
    • สีพื้นหลัง
    • ภาพพื้นหลัง
    • ระบบนำทางเบลอแถบ
    • สีอ่อนของแถบ NavigationBar
    • สีอ่อนของแถบนำทาง
    • ภาพเงา
    • สีอ่อนของภาพเงา
    • รูปภาพปุ่มย้อนกลับ
    • มุมมองที่กำหนดเองของปุ่มย้อนกลับ
    • ปิดการใช้งานท่าทางป๊อปแบบโต้ตอบ
    • ท่าทางป๊อปแบบโต้ตอบแบบเต็มหน้าจอ
    • InteractivePopMaxAllowedDistanceToLeftEdge
• การใช้งานล่วงหน้า
  • แถบนำทางแบบโปร่งใส
    • อัลฟ่า
    • ที่ซ่อนอยู่
    • สีพื้นหลัง
  • แถบนำทางอัพเดตแบบไดนามิก
  • wx_navigationBar
  • จัดการเหตุการณ์ปุ่มย้อนกลับ
• หมายเหตุ
  • ตัวควบคุมมุมมองเด็ก
• ใบอนุญาต
• 中文档

คุณสมบัติ

• รองรับแถบนำทางที่โปร่งใส
• รองรับภาพพื้นหลังแถบนำทาง
• รองรับโหมดหัวเรื่องขนาดใหญ่ของแถบนำทาง
• รองรับ iOS 13 โหมดมืด
• รองรับท่าทางป๊อปแบบเต็มหน้าจอ
• ง่ายเหมือนการใช้ UINavigationBar

ความต้องการ

• ไอโอเอส 9.0+
• Xcode 11.0+
• สวิฟท์ 5.0+

การติดตั้ง

โกโก้พอดส์

WXNavigationBar มีให้บริการผ่าน CocoaPods หากต้องการติดตั้ง เพียงเพิ่มบรรทัดต่อไปนี้ใน Podfile ของคุณ:

use_frameworks !

pod ' WXNavigationBar ' , ' ~> 2.3.6 '

คาร์เธจ

Carthage เป็นผู้จัดการการพึ่งพาแบบกระจายอำนาจที่สร้างการพึ่งพาของคุณและมอบเฟรมเวิร์กไบนารีให้กับคุณ หากต้องการรวม WXNavigationBar เข้ากับโปรเจ็กต์ Xcode ของคุณโดยใช้ Carthage ให้ระบุใน Cartfile ของคุณ:

github alexiscn/WXNavigationBar

ผู้จัดการแพ็คเกจ Swift

Swift Package Manager เป็นเครื่องมือสำหรับการกระจายโค้ด Swift โดยอัตโนมัติและรวมอยู่ในคอมไพเลอร์ Swift ยังอยู่ในช่วงเริ่มต้นของการพัฒนา แต่ WXNavigationBar รองรับการใช้งานบนแพลตฟอร์มที่รองรับ

เมื่อคุณตั้งค่าแพ็คเกจ Swift แล้ว การเพิ่ม WXNavigationBar เป็นการขึ้นต่อกันนั้นทำได้ง่ายพอ ๆ กับการเพิ่มลงในค่าการขึ้นต่อกันของ Package.swift ของคุณ

 dependencies: [
    .package(url: "https://github.com/alexiscn/WXNavigationBar.git", .upToNextMajor(from: "2.3.6"))
]

หลักการออกแบบ

WXNavigation ทำให้ UINavigationBar จริงมีความโปร่งใส และเพิ่มมุมมองเป็นแถบนำทางปลอมให้กับตัวควบคุมมุมมอง

แถบนำทางจริงยังคงจัดการเหตุการณ์การสัมผัส แถบนำทางปลอมทำหน้าที่พนักงานแสดงผล เช่น: backgroundColor, backgroundImage

ดังนั้นคุณจึงใช้แถบนำทางตามปกติ เมื่อคุณต้องการจัดการกับสิ่งที่แสดงผล คุณใช้ WXNavigationBar

เริ่มต้นใช้งาน

ใน AppDelegate.swift ของคุณ

import WXNavigationBar

func application ( _ application : UIApplication , didFinishLaunchingWithOptions launchOptions : [ UIApplication . LaunchOptionsKey : Any ] ? ) -> Bool {
    // ...    
    WXNavigationBar . setup ( )
}

คุณสามารถปรับแต่ง WXNavigationBar ได้หากต้องการ มีสองวิธีในการกำหนดค่า WXNavigationBar: ผ่านคุณสมบัติ WXNavigationBar.NavBar หรือผ่านคุณสมบัติ UIViewController

การกำหนดค่าตาม UINavigationController

การใช้ WXNavigationBar.NavBar เพื่อกำหนดค่า WXNavigationBar จะส่งผลต่อตัวควบคุมการมองเห็นทั้งหมด

ใน AppDelegate.swift ของคุณ

import WXNavigationBar

func application ( _ application : UIApplication , didFinishLaunchingWithOptions launchOptions : [ UIApplication . LaunchOptionsKey : Any ] ? ) -> Bool {

    // ...
    
    // Customize WXNavigationBar if needed (Optional)
    // WXNavigationBar.NavBar.backImage = UIImage(named: "xxx")
}

คุณสามารถกำหนดค่าตัวเลือกต่อไปนี้:

/// Back Image for Navigation Bar
public static var backImage : UIImage ? = Utility . backImage

/// Use custom view to create back button.
/// Note: You do not need to add tap event to custom view. It's handled in WXNavigationBar.
public static var backButtonCustomView : UIView ? = nil
        
/// Background Image for NavigationBar
public static var backgroundImage : UIImage ? = nil

/// Background color for NavigationBar
public static var backgroundColor : UIColor = UIColor ( white : 237.0 / 255 , alpha : 1.0 )

/// Tint Color for NavigationBar
public static var tintColor = UIColor ( white : 24.0 / 255 , alpha : 1.0 )

/// Shadow Image for NavigationBar
public static var shadowImage : UIImage ? = UIImage ( )

/// Enable fullscreen pop gesture
public static var fullscreenPopGestureEnabled = false

การกำหนดค่าตาม ViewController

คุณยังสามารถกำหนดค่าตัวควบคุมมุมมองเฉพาะได้โดยการแทนที่คุณสมบัติที่ WXNavigationBar รองรับ

สีพื้นหลัง

คุณสามารถกำหนดค่าสีพื้นหลังของแถบนำทางได้

/// Background color of fake NavigationBar
/// Default color is UIColor(white: 237.0/255, alpha: 1.0)
override var wx_navigationBarBackgroundColor : UIColor ? {
    return . white
} 

ภาพพื้นหลัง

คุณสามารถกำหนดค่าพื้นหลังของแถบนำทางโดยใช้รูปภาพได้

 override var wx_navigationBarBackgroundImage : UIImage ? {
    return UIImage ( named : " icons_navigation_bar " )
} 

ระบบนำทางเบลอแถบ

หากคุณต้องการใช้ระบบเหมือนกับแถบนำทางที่เบลอ:

 override var wx_useSystemBlurNavBar : Bool {
    return true
} 

สีอ่อนของแถบ NavigationBar

โดยการตั้งค่า wx_barBarTintColor แสดงว่าคุณได้ตั้ง barTintColor ของ navigationController?.navigationBar

 override var wx_barBarTintColor : UIColor ? {
    return . red
} 

สีอ่อนของแถบนำทาง

โดยการตั้งค่า wx_baTintColor คุณได้ตั้งค่า tintColor ของ navigationController?.navigationBar จริง ๆ

 override var wx_barTintColor : UIColor ? {
    return . black
} 

ภาพเงา

คุณสามารถระบุภาพเงาของแถบนำทางสำหรับตัวควบคุมมุมมองเฉพาะ (เช่น เส้นสีทึบหรือเส้นสีไล่ระดับสี):

 override var wx_shadowImage : UIImage ? {
    return UIImage ( named : " icons_navigation_bar_shadow_line " )
} 

สีอ่อนของภาพเงา

คุณสามารถสร้างภาพเงาจากสีได้ คุณสมบัตินี้จะเขียนทับ wx_shadowImage

 override var wx_shadowImageTintColor : UIColor ? {
    return . red
} 

รูปภาพปุ่มย้อนกลับ

คุณสามารถระบุรูปภาพด้านหลังของแถบนำทางสำหรับตัวควบคุมมุมมองเฉพาะ:

 override var wx_backImage : UIImage ? {
    return UIImage ( named : " icons_view_controller_back_image " )
} 

มุมมองที่กำหนดเองของปุ่มย้อนกลับ

คุณสามารถระบุปุ่มย้อนกลับด้วยมุมมองที่กำหนดเอง:

 override var wx_backButtonCustomView : UIView ? {
    let label = UILabel ( )
    label . text = " back "
    label . textAlignment = . center
    return label
} 

ปิดการใช้งานท่าทางป๊อปแบบโต้ตอบ

 override var wx_disableInteractivePopGesture : Bool {
    return true
} 

ท่าทางป๊อปแบบโต้ตอบแบบเต็มหน้าจอ

 override var wx_fullScreenInteractivePopEnabled : Bool {
    return false
} 

InteractivePopMaxAllowedDistanceToLeftEdge

 override wx_interactivePopMaxAllowedDistanceToLeftEdge : CGFloat {
    return view . bounds . width * 0.5
} 

การใช้งานล่วงหน้า

นี่คือคำแนะนำการใช้งานล่วงหน้าสำหรับ WXNavigationBar

แถบนำทางแบบโปร่งใส

มีหลายวิธีในการทำให้แถบนำทางโปร่งใส

อัลฟ่า

wx_navigationBar . alpha = 0 

ที่ซ่อนอยู่

wx_navigationBar . isHidden = true

สีพื้นหลัง

 override var wx_navigationBarBackgroundColor : UIColor ? {
    return . clear
}

อัลฟ่าและซ่อนทำให้ wx_navigationBar มองไม่เห็นในขณะที่สีพื้นหลังเพียงแค่เปลี่ยนสีของ wx_navigationBar

แถบนำทางอัพเดตแบบไดนามิก

คุณสามารถอัปเดตแถบนำทางแบบไดนามิกได้ เช่น อัปเดตแบบไดนามิกขณะเลื่อน

ดู MomentViewController สำหรับรายละเอียด

wx_navigationBar

wx_navigationBar เป็นคลาสย่อยของ UIView ดังนั้นคุณจึงสามารถทำอะไรก็ได้ด้วย wx_navigationBar ที่สามารถทำได้ด้วย UIView

จัดการเหตุการณ์ปุ่มย้อนกลับ

หากคุณต้องการทำอะไรบางอย่างเมื่อผู้ใช้แตะปุ่มย้อนกลับ คุณสามารถแทนที่ wx_backButtonClicked ในตัวควบคุมมุมมองของคุณได้ ตัวอย่างเช่น คุณสามารถแสดงการแจ้งเตือนเมื่อผู้ใช้แตะปุ่มย้อนกลับ

 override func wx_backButtonClicked ( ) {
    let alert = UIAlertController ( title : " Are you sure to exit " , message : nil , preferredStyle : . alert )
    alert . addAction ( UIAlertAction ( title : " OK " , style : . default , handler : { [ weak self ] _ in
        self ? . navigationController ? . popViewController ( animated : true )
    } ) )
    alert . addAction ( UIAlertAction ( title : " Cancel " , style : . cancel , handler : { _ in
        
    } ) )
    present ( alert , animated : true , completion : nil )
} 

หมายเหตุ

ตัวควบคุมมุมมองเด็ก

wx_navigationBar สามารถซ้อนทับได้เมื่อคุณเพิ่มตัวควบคุมมุมมองลูกแบบไดนามิก ดังนั้นจึงเป็นความรับผิดชอบของคุณที่จะต้องนำ wx_navigationBar ไปไว้ข้างหน้า

// addChild(controller) or addSubview

view . bringSubviewToFront ( wx_navigationBar ) 

ใบอนุญาต

WXNavigationBar ได้รับอนุญาตจาก MIT ใบอนุญาต

中文档

คุณ可以参考中文文档