0

Firstly, I want to show my code to config my application's titlebar:

    let customToolbar = NSToolbar()
    customToolbar.showsBaselineSeparator = false
    window?.toolbar = customToolbar
    window?.titleVisibility = .hidden
    window?.titlebarAppearsTransparent = true

This is the result: enter image description here

However, the title bar's width is still spanning through all application's width. I want to make it narrows to some area only. For example, Apple Music's interface

enter image description here

In the Apple's Music case, it looks like toolbar and titlebar is on the same row.

How can I do this in SwiftUI 1.0?

My apologies because I don't know to express the problem better. I am happy to add more information in case I missed something.

Trần Kim Dự
  • 5,872
  • 12
  • 55
  • 107
  • That looks like a TableView with multiple sections – Leo Dabus Dec 19 '20 at 07:02
  • @LeoDabus You mean Apple Music or my application? In case my application, I don't use TableView – Trần Kim Dự Dec 19 '20 at 07:03
  • Apple Music ... – Leo Dabus Dec 19 '20 at 07:03
  • So you mean close/minimize/maximize buttons don't belong to the titlebar but they implement again by themselves ? – Trần Kim Dự Dec 19 '20 at 07:04
  • It looks like a sidebar and a tableview https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/sidebars/ – Leo Dabus Dec 19 '20 at 07:07
  • This is just the guideline, right? My question is how can we make close/minimize/maximize button (e.g: titlebar) as in the Apple Music. – Trần Kim Dự Dec 19 '20 at 07:12
  • As I said IMO this looks like it is achieved using a sidebar with a table view – Leo Dabus Dec 19 '20 at 07:13
  • P/S: some guys want to close this question without any comment to improve. If you consider this question is not good, at least put a comment. Please be professional. – Trần Kim Dự Dec 19 '20 at 07:16
  • Not my vote but people have the right to vote if they think there is something wrong with the question – Leo Dabus Dec 19 '20 at 07:17
  • 1
    https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/split-views/ and https://developer.apple.com/documentation/appkit/nssplitviewcontroller – Leo Dabus Dec 19 '20 at 07:20
  • 1
    What you are looking for is a splitviewcontroller with transparent title bar, title hidden and full size content view. https://www.dropbox.com/s/yth9vit9n72wu4b/full%20size%20content%20view.png?dl=1 – Leo Dabus Dec 19 '20 at 07:42
  • 1
    Wow. Thanks so much. Let me try :D But from your image, it seems what I am looking for. – Trần Kim Dự Dec 19 '20 at 07:49
  • They use full content size with hidden title bar. This should be helpful https://stackoverflow.com/a/60252103/12299030 – Asperi Dec 19 '20 at 08:05

1 Answers1

1

The answer for Cocoa is to use a splitviewcontroller with transparent title bar, title hidden and full size content view. If you would like to accomplish the same with SwiftUI you need to use a HSplitView, set your content view edgesIgnoringSafeArea(.top), set your titleVisibility hidden and your window titlebarAppearsTransparent to true.

Leo Dabus
  • 229,809
  • 59
  • 489
  • 571