{"id":37473,"date":"2016-07-10T13:01:35","date_gmt":"2016-07-10T07:31:35","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=37473"},"modified":"2016-07-10T13:01:35","modified_gmt":"2016-07-10T07:31:35","slug":"nsgridview-a-new-layout-container-for-macos","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/nsgridview-a-new-layout-container-for-macos\/","title":{"rendered":"NSGridView : A new layout container for macOS"},"content":{"rendered":"

What\u2019s the need of NSGridView : <\/strong>
\nSuppose you want to create a view which should look like this and to create it we have following available options:<\/p>\n

\"5\"<\/p>\n

1. Autolayout<\/strong> : <\/p>\n

  • \n
      Maintanence on constraints is complicated<\/ul>\n<\/li>\n

      2. NS\/UIStackView<\/strong> :<\/p>\n

        \n
      • Arranging a sequence of items<\/li>\n
      • Fine control over content size and spacing<\/li>\n<\/ul>\n

        To make the above design less complicated and easily designable Apple has introduced a 3rd option.<\/p>\n

        3. NSGridView<\/strong> :<\/p>\n

          \n
        • Places views in an explicitly defined grid<\/li>\n
        • Content aligned across rows and columns<\/li>\n
        • Great for arranging static grid-like UI<\/li>\n<\/ul>\n

          Overview:<\/strong>
          \nNSGridView consists of<\/p>\n

          1. NSGridRow and NSGridColumn<\/strong> : It has following attributes<\/p>\n

            \n
          • Automatic or explicit sizing<\/li>\n
          • Optional padding and spacing<\/li>\n
          • Hidden rows and columns<\/li>\n<\/ul>\n

            2. NSGridCell<\/strong> : It has following attributes<\/p>\n

              \n
            • Each cell manages a content view<\/li>\n
            • Adjustable placement<\/li>\n<\/ul>\n

              Start Designing with NSGridView<\/strong> :
              \nFor now this view is not available in Interface Builder you have to create it via programming only.<\/p>\n

              [code language=”objc”]
              \nlet empty = NSGridCell.emptyContentView
              \nlet gridView = NSGridView(views: [
              \n[brailleTranslationLabel, brailleTranslationPopup],
              \n[empty, showContractedCheckbox],
              \n[empty, showEightDotCheckbox],
              \n[statusCellsLabel, showGeneralDisplayCB],
              \n[empty, textStyleCB],
              \n[showAlertCB]
              \n])
              \n[\/code] <\/p>\n

              This code has only added subview to NSGridView but alignment (spacing and padding) is not proper.<\/p>\n

              \"1\"<\/p>\n

              Now set the hugging priority and remove spaces between rows and columns.<\/p>\n

              [code language=”objc”]
              \ngridView.setContentHuggingPriority(600, for: .horizontal)
              \ngridView.setContentHuggingPriority(600, for: .vertical)
              \n[\/code]<\/p>\n

              \"2\"<\/p>\n

              Now set the placement of first colmn.<\/p>\n

              [code language=”objc”]
              \n\/\/ the first column needs to be right-justified:
              \ngridView.column(at: 0).xPlacement = .trailing
              \n\/\/ all cells use firstBaseline alignment
              \ngridView.rowAlignment = .firstBaseline
              \n[\/code]<\/p>\n

              \"3\"<\/p>\n

              Now set the verticle padding as per design. <\/p>\n

              [code language=”objc”]
              \n\/\/ We need a little extra vertical space around the popup:
              \nlet row = gridView.cell(for: brailleTranslationPopup)!.row!
              \nrow.topPadding = 5
              \nrow.bottomPadding = 5
              \ngridView.cell(for:statusCellsLabel)!.row!.topPadding = 6
              \n[\/code]<\/p>\n

              \"4\"<\/p>\n

              Now we need alert message checkbox to be centered.<\/p>\n

              [code language=”objc”]
              \n\/\/ Special treatment for centered checkbox:
              \nlet cell = gridView.cell(for: showAlertCB)!
              \ncell.row!.topPadding = 4
              \ncell.row!.mergeCells(in: NSMakeRange(0, 2))
              \ncell.xPlacement = .none
              \nlet centering = showAlertCB.centerXAnchor.constraint(equalTo: textStyleCB.leadingAnchor)
              \ncell.customPlacementConstraints = [centering]
              \n[\/code]<\/p>\n

              \"5\"<\/p>\n

              Congratulations! You are done with NSGridView.<\/p>\n","protected":false},"excerpt":{"rendered":"

              What\u2019s the need of NSGridView : Suppose you want to create a view which should look like this and to create it we have following available options: 1. Autolayout : Maintanence on constraints is complicated 2. NS\/UIStackView : Arranging a sequence of items Fine control over content size and spacing To make the above design […]<\/p>\n","protected":false},"author":172,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":170},"categories":[1400,1772,1994,1],"tags":[3106,3717,3714,3715,3719,3720,3716,3718],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/37473"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/172"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=37473"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/37473\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=37473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=37473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=37473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}