2017-09-14 29 views
7

Theo mặc định, statusbar trên iPhone X trông như thế này:Làm thế nào để có được một statusbar màu đen trên iPhone X trên iOS 11

enter image description here

Nhưng tôi muốn đạt được điều này:

enter image description here

Tôi đã thử đặt preferredStatusBarStyle thành lightContent nhưng chỉ hoạt động sau khi đặt nền phía sau thanh trạng thái thành màu đen.

Để sửa các góc tròn, tôi đã kết thúc thêm một chế độ xem phụ khác với các góc được làm tròn.

class ViewController: UIViewController { 

    override func viewDidLoad() { 
     super.viewDidLoad() 

     view.backgroundColor = .black 

     let roundedView = UIView(
      frame: CGRect(
       x: 0, 
       y: UIApplication.shared.statusBarFrame.height, 
       width: view.frame.width, 
       height: view.frame.height 
      ) 
     ) 
     roundedView.layer.cornerRadius = 10 
     roundedView.layer.masksToBounds = true 
     roundedView.backgroundColor = .white 
     view.addSubview(roundedView) 

     let label = UILabel(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 60)) 
     label.text = "Black statusbar!" 
     label.textAlignment = .center 
     roundedView.addSubview(label) 
    } 

    override var preferredStatusBarStyle: UIStatusBarStyle { 
     return .lightContent 
    } 
} 

Tôi tự hỏi nếu đây là cách tiếp cận tốt nhất .. phải có cách tốt hơn để đạt được điều này.


CẬP NHẬT

Đây là một ý tưởng khủng khiếp vì:

Đừng ma sk hoặc gọi sự chú ý đặc biệt đến các tính năng hiển thị chính. Không tìm cách giấu góc tròn, cảm biến nhà ở hoặc chỉ số của thiết bị để truy cập Màn hình chính bằng cách đặt các thanh màu đen ở đầu và cuối màn hình . Không sử dụng các đồ trang sức hình ảnh như dấu ngoặc, hình bezels, hình dạng hoặc văn bản hướng dẫn để gọi đặc biệt chú ý đến các khu vực này.

  • Các góc tròn ở phía trên cùng của giao diện có thể trông đẹp, nhưng bạn sẽ phải thêm ngoại lệ trong mã để đảm bảo các góc tròn không được hiển thị trên iPhone khác. Bạn sẽ cần phải đặt điều này trong tất cả các ViewControllers/Storyboards của bạn .. Đó không phải là tuyệt vời như vậy.

  • Các góc được làm tròn ở cuối chế độ xem sẽ xuất hiện ngay trong ảnh chụp màn hình, nhưng các góc ở trên cùng (đặt thủ công) sẽ không. Điều này sẽ rất xấu khi người dùng chia sẻ ứng dụng của bạn.

+1

khu vực an toàn đang gây ra một toàn bộ rất nhiều rắc rối đã có khả năng tương thích ngược, đây chỉ là sẽ trở thành nhiên liệu trong ngọn lửa. – Annjawn

Trả lời

10

Bố cục vùng an toàn là giải pháp cho vấn đề của bạn.

Tôi đã thử làm theo giải pháp trong các dự án hiện có của mình và nó hoạt động tốt.

  • Đặt màu nền đen (hoặc thứ bạn muốn) thành chế độ xem chính của bộ điều khiển chế độ xem.
  • Bây giờ hãy thêm chế độ xem con (với nền trắng) và đặt các ràng buộc của nó liên quan đến Bố cục vùng an toàn (hoặc làm theo Hướng dẫn bố cục trên cùng và dưới cùng nếu phiên bản Xcode dưới 9).
  • Cân nhắc chế độ xem con này (với nền màu trắng) làm chế độ xem chính và xử lý thêm thiết kế.

Đây là ảnh chụp nhanh mẫu với kết quả, Bằng cách bật hoặc tắt bố cục Khu vực an toàn, tôi đã thử nghiệm và triển khai.

FYI: Trong các ảnh chụp nhanh này, chế độ xem chính có nền màu đỏ và chế độ xem con có màu nền xanh dương.

Safe Diện tích Layout: enter image description here

AutoLayout

enter image description here

+0

Cảm ơn! Tôi đã cập nhật câu hỏi của mình, có lẽ đây không phải là một ý tưởng hay. Nhưng để tiếp tục tập thể dục: điều này là tốt hơn một chút sau đó làm điều đó với mã, nhưng bạn sẽ vẫn phải lặp lại điều này cho mỗi bộ điều khiển xem .. không lý tưởng phải không? – Tieme

+0

Tôi đã tạo một Lớp giao diện tùy chỉnh IBDesignable và sử dụng cùng .. Bạn và cách tiếp cận của bạn là hoàn toàn đúng, điều này có thể cần thực hành thủ công cho mỗi bộ điều khiển xem. Nhưng điều này sẽ không phải là rất khó để làm điều đó bằng tay. Ngoài ra, ý tưởng này có thể kiểm soát các khu vực giao diện của bạn ngoài giới hạn của Apple trong các nguyên tắc của nó. Ở giai đoạn này, cho đến khi chúng tôi tìm ra giải pháp lâu dài, điều này có thể là một giải pháp tốt. Chúc một ngày tốt lành :) – Krunal

Các vấn đề liên quan