Material: How to remove Layout from view?

Created on 13 Apr 2019  路  2Comments  路  Source: CosmicMind/Material

In my app I have landscape and portrait mode and want to deactivate or remove Layout.
How can I archive this?

if UIDevice.current.orientation.isPortrait {

            scrollContainerView.layout(titleTextView)
                .left(10)
                .right(thumbnailImageView.anchor.right, 10)
                .top(thumbnailImageView.anchor.bottom, 15)
 } else {
            scrollContainerView.layout(titleTextView)
                .left(thumbnailImageView.anchor.right, 10)
                .right(view.anchor.right, 10)
                .top(15)
 }

2019-04-13 15:31:46.071480+0400 Movies24i[54288:2441827] [LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(
"UIImageView:0x7f840b422460 (active, names: '|':UIScrollView:0x7f840b858e00 )>",
" "UILabel:0x7f840b427380'Shazam!' (active, names: '|':UIScrollView:0x7f840b858e00 )>",
"UILabel:0x7f840b427380'Shazam!' (active)>"
)

Will attempt to recover by breaking constraint

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in may also be helpful.
2019-04-13 15:31:46.072231+0400 Movies24i[54288:2441827] [LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(
" "UILabel:0x7f840b427380'Shazam!' (active)>"
)

good first issue help wanted material question

Most helpful comment

I think it you can remove constraints then recreate them.

  • UseNSLayoutConstraint.deactivate(titleTextView.constraints) to remove all at once.
  • You can use Application.isPortrait to check if the app is in portrait.
  • .right(view.anchor.right, 10) can be reduced to .right(view, 10) since the same anchor is being pinned.

Result:

NSLayoutConstraint.deactivate(titleTextView.constraints)
if Application.isPortrait {
  scrollContainerView.layout(titleTextView)
    .left(10)
    .right(thumbnailImageView, 10)
    .top(thumbnailImageView.anchor.bottom, 15)
} else {
  scrollContainerView.layout(titleTextView)
    .left(thumbnailImageView.anchor.right, 10)
    .right(view, 10)
    .top(15)
}

If you find yourself writing .left(xView.anchor.right, 0) or .top(xView.anchor.bottom, 0) you can extend Layout:

extension Layout {
  @discardableResult
  func below(_ view: UIView, _ offset: CGFloat = 0) -> Layout {
    return top(view.anchor.bottom, offset)
  }

  @discardableResult
  func above(_ view: UIView, _ offset: CGFloat = 0) -> Layout {
    return bottom(view.anchor.top, offset)
  }

  @discardableResult
  func before(_ view: UIView, _ offset: CGFloat = 0) -> Layout {
    return right(view.anchor.left, offset)
  }

  @discardableResult
  func after(_ view: UIView, _ offset: CGFloat = 0) -> Layout {
    return left(view.anchor.right, offset)
  }

  @discardableResult
  func aspect(_ ratio: CGFloat = 1) -> Layout {
    return height(view!.anchor.width).multiply(ratio)
  }
}

After this, you can write:

NSLayoutConstraint.deactivate(titleTextView.constraints)
if Application.isPortrait {
  scrollContainerView.layout(titleTextView)
    .left(10)
    .right(thumbnailImageView, 10)
    .below(thumbnailImageView, 15)
} else {
  scrollContainerView.layout(titleTextView)
    .after(thumbnailImageView, 10)
    .right(view, 10)
    .top(15)
}

Those extensions haven't been added to Material yet. I find them quite useful and neat.

All 2 comments

I think it you can remove constraints then recreate them.

  • UseNSLayoutConstraint.deactivate(titleTextView.constraints) to remove all at once.
  • You can use Application.isPortrait to check if the app is in portrait.
  • .right(view.anchor.right, 10) can be reduced to .right(view, 10) since the same anchor is being pinned.

Result:

NSLayoutConstraint.deactivate(titleTextView.constraints)
if Application.isPortrait {
  scrollContainerView.layout(titleTextView)
    .left(10)
    .right(thumbnailImageView, 10)
    .top(thumbnailImageView.anchor.bottom, 15)
} else {
  scrollContainerView.layout(titleTextView)
    .left(thumbnailImageView.anchor.right, 10)
    .right(view, 10)
    .top(15)
}

If you find yourself writing .left(xView.anchor.right, 0) or .top(xView.anchor.bottom, 0) you can extend Layout:

extension Layout {
  @discardableResult
  func below(_ view: UIView, _ offset: CGFloat = 0) -> Layout {
    return top(view.anchor.bottom, offset)
  }

  @discardableResult
  func above(_ view: UIView, _ offset: CGFloat = 0) -> Layout {
    return bottom(view.anchor.top, offset)
  }

  @discardableResult
  func before(_ view: UIView, _ offset: CGFloat = 0) -> Layout {
    return right(view.anchor.left, offset)
  }

  @discardableResult
  func after(_ view: UIView, _ offset: CGFloat = 0) -> Layout {
    return left(view.anchor.right, offset)
  }

  @discardableResult
  func aspect(_ ratio: CGFloat = 1) -> Layout {
    return height(view!.anchor.width).multiply(ratio)
  }
}

After this, you can write:

NSLayoutConstraint.deactivate(titleTextView.constraints)
if Application.isPortrait {
  scrollContainerView.layout(titleTextView)
    .left(10)
    .right(thumbnailImageView, 10)
    .below(thumbnailImageView, 15)
} else {
  scrollContainerView.layout(titleTextView)
    .after(thumbnailImageView, 10)
    .right(view, 10)
    .top(15)
}

Those extensions haven't been added to Material yet. I find them quite useful and neat.

@OrkhanAlikhanov grate answer as always, will try

Thanks

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ohgodno picture ohgodno  路  4Comments

nthtrung09it picture nthtrung09it  路  5Comments

shshalom picture shshalom  路  4Comments

ravigupta049 picture ravigupta049  路  5Comments

chashmeetsingh picture chashmeetsingh  路  5Comments