The following simple View Controller works perfectly with an UIStackView, and creates a red box on top of a green box:

- (void)viewDidLoad {
    self.edgesForExtendedLayout = UIRectEdgeNone;

    OAStackView *stackView = [OAStackView new];
    stackView.translatesAutoresizingMaskIntoConstraints = NO;
    stackView.backgroundColor = [UIColor blackColor];
    [self.view addSubview:stackView];

    UILayoutGuide *margin = self.view.layoutMarginsGuide;
    [stackView.topAnchor constraintEqualToAnchor:margin.topAnchor constant:16.0].active = YES;
    [stackView.leadingAnchor constraintEqualToAnchor:margin.leadingAnchor].active = YES;
    [stackView.bottomAnchor constraintEqualToAnchor:margin.bottomAnchor constant:-16.0].active = YES;
    [stackView.trailingAnchor constraintEqualToAnchor:margin.trailingAnchor].active = YES;

    stackView.axis = UILayoutConstraintAxisVertical;
    stackView.distribution = OAStackViewDistributionFillEqually;
    stackView.alignment = OAStackViewAlignmentFill;
    stackView.spacing = 0.0;

    UIView *redView = [UIView new];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.backgroundColor = [UIColor redColor];
    [stackView addArrangedSubview:redView];

    UIView *greenView = [UIView new];
    greenView.translatesAutoresizingMaskIntoConstraints = NO;
    greenView.backgroundColor = [UIColor greenColor];
    [stackView addArrangedSubview:greenView];
}

However, the same code but replacing UIStackView with OAStackview, UIStackViewDistributionFillEqually with OAStackViewDistributionFillEqually and UIStackViewAlignmentFill with OAStackViewAlignmentFill gives me nothing - shows just the black background.

How is view order controlled in interface builder? I have one view that it just wants to keep sticking at the bottom, not matter what I try.

Center aligned views are allowed to be wider than the stack view. It would be great if stack view added a width constraint to views such that they may not be wider than the stack view itself.

Also it would be cool if we can get another tagged, stable release!

When i use OAStackView in a universal nib/storyboard it works great, but if i add any views anywhere (related to stackView or not) that are only installed in certain size classes, OAStackView won't render properly. Anyone else seen this and/or have a workaround?

Right now the unit test works by asserting the frames of the arranged views. Checking on the frame might be a brittle way to assert correctness.
In order to be more sure about the correctness, it would be better to move to assert on the constraint that OAStackView generates instead.

In order to address this issue, all the code similar to:

layoutView(stackView);
[[theValue(CGRectGetMinX(view1.frame)) should] equal:theValue(0)];

Must be updated to check on stackView constraints and comparing them with the real UIStackView generated ones.

Hey. This is not bug nor it is an issue. Rather a question someone in this project could answer.

Is there a way of creating a subclass that would use UIStackView or OAStackView as a superclass depending on ios version ?

something like that ? (this does not work)

if #available(iOS 9.0, *) {
    class StackView: UIStackView {}
} else {
    class StackView: OAStackView {}
}

Any ideas of achieving something similar ?

I was wondering what the difference was between this control:

https://github.com/tomvanzummeren/TZStackView

My specific scenario.

View
--UISrollView
----OAStackView (Constrained on all sides, also constrained to equal width of scrollview)

At runtime, I need to add views to the stack view.
When I add a single view using [self.stackView addArrangedSubview:view], it works adding that single view.

As soon as I try to add a second view programatically, both views disappear, and the constraints (for the stack view and its subviews), are no longer correct.

Note that this is only specific to the current version on Cocoapods. If I target the latest commit on master, this is no longer an issue.

Can we have an update to the spec uploaded?

Thanks!

Hi!

OAStackView array arrangedSubviews is always empty. Therefore when I try to insertArrangedSubview: atIndex: the app crashes. I can add view only by using addArrangedSubview.

When an OAStackView is instantiated from Interface Builder, the -commonInitWithInitalSubviews: method overrides the layout margins set.

I would like some padding at the top of the OAStackView before the first view is laid out and space after the last view is laid out. Is it possible to add IBInspectables for them?

Consider this example:

let stackView = OAStackView()
for view in view {
    stackView.addArrangedSubview(view)
}

As a result of this code the OAStackView has lost constraint between self and first subview.

As far as I understand, the part responsible for this is in OAStackView.h:198

NSArray *constraints = [self constraintsBetweenView:self andView:previousView inAxis:self.axis];
[self removeConstraints:constraints];

When adding second subview, it removes constraints from the first subview, including OAStackView-to-first-subview constraints and never sets them back.

❌ /Users/greenhouse/tmpM4MB54/Pods/OAStackView/Pod/Classes/OAStackView.h:87:53: expected '>'
@Property(nonatomic,readonly,copy) NSArray<__kindof UIView *> *arrangedSubviews;
❌ /Users/greenhouse/tmpM4MB54/Pods/OAStackView/Pod/Classes/OAStackView.h:87:53: interface type cannot be statically allocated
@Property(nonatomic,readonly,copy) NSArray<__kindof UIView *> *arrangedSubviews;
^
❌ /Users/greenhouse/tmpM4MB54/Pods/OAStackView/Pod/Classes/OAStackView.h:87:59: expected ';' at end of declaration list
@Property(nonatomic,readonly,copy) NSArray<__kindof UIView *> *arrangedSubviews;
^
❌ /Users/greenhouse/tmpM4MB54/Pods/OAStackView/Pod/Classes/OAStackView.h:87:61: expected identifier or '('
@Property(nonatomic,readonly,copy) NSArray<__kindof UIView *> *arrangedSubviews;
^
❌ /Users/greenhouse/tmpM4MB54/Pods/OAStackView/Pod/Classes/OAStackView.h:108:60: expected '>'

• (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views NS_DESIGNATED_INITIALIZER;
  ^
  ❌ /Users/greenhouse/tmpM4MB54/Pods/OAStackView/Pod/Classes/OAStackView.h:108:60: expected ')'
• (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views NS_DESIGNATED_INITIALIZER;

❌ /Users/greenhouse/tmpM4MB54/Pods/OAStackView/Pod/Classes/OAStackView.h:108:72: interface type 'NSArray' cannot be passed by value; did you forget * in 'NSArray'?

• (instancetype)initWithArrangedSubviews:(NSArray<__kindof UIView *> *)views NS_DESIGNATED_INITIALIZER;
  ^

This errors in the last pod

pod 'OAStackView', :git => 'https://github.com/oarrabi/OAStackView.git'

I use OAStackView on my menu view. It shows greatly. But my menu items dose not response to my tap
my code :

itemStack = OAStackView(arrangedSubviews: menuItems)
addSubview(itemStack)

And I am sure that I added UITapGestureRecognizer to my items

item.addGestureRecognizer(gestureRecognizer)

And my items' item.userInteractionEnabled = true

I use UIView instead of OAStackView it's tappable.

OAStackViewAlignmentStrategyCenter only adds a constraint to center the arranged subviews:

@implementation OAStackViewAlignmentStrategyCenter

- (NSArray*)constraintsalignViewOnOtherAxis:(UIView*)view {

  return @[[NSLayoutConstraint constraintWithItem:view
                               attribute:[self centerAttribute]
                               relatedBy:NSLayoutRelationEqual
                                  toItem:view.superview
                               attribute:[self centerAttribute]
                                       multiplier:1 constant:0]];
}

@end

but I'd expect it would also make sure that the stack view is large enough to accomodate all arranged subviews.

If you agree, I'd gladly make a PR for it.

Firstly, great work on the UIStackView port!
I am trying to access the arrangedSubviews property and it seems to always be nil.
Is it something that is not yet implemented?

I receive this error log during use OAStackView

Failed to set (axisValue) user defined inspected property on (UIView): [<UIView 0x7f8153e2cc00> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key axisValue.
Failed to set (spacing) user defined inspected property on (UIView): [<UIView 0x7f8153e2cc00> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key spacing.
Failed to set (distributionValue) user defined inspected property on (UIView): [<UIView 0x7f8153e2cc00> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key distributionValue.
Failed to set (alignmentValue) user defined inspected property on (UIView): [<UIView 0x7f8153e2cc00> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key alignmentValue.
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. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7f8153deb350 V:[UILabel:0x7f8153dec8b0'myText'(36)]>",
    "<NSLayoutConstraint:0x7f8153ded4e0 V:|-(10)-[UILabel:0x7f8153dec8b0'myText']   (Names: '|':UIView:0x7f8153dec7a0 )>",
    "<NSLayoutConstraint:0x7f8153ded580 V:[UILabel:0x7f8153dec8b0'myText']-(8)-[UIView:0x7f8153decae0]>",
    "<NSLayoutConstraint:0x7f8153ded620 V:[UIView:0x7f8153decae0]-(8)-|   (Names: '|':UIView:0x7f8153dec7a0 )>",
    "<NSLayoutConstraint:0x7f8153ded810 V:|-(8)-[UIView:0x7f8153dec7a0]   (Names: '|':UIView:0x7f8153dec690 )>",
    "<NSLayoutConstraint:0x7f8153ded860 V:[UIView:0x7f8153dec7a0]-(8)-|   (Names: '|':UIView:0x7f8153dec690 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x7f8153df4f30 h=--& v=--& V:[UIView:0x7f8153dec690(50)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7f8153deb350 V:[UILabel:0x7f8153dec8b0'myText'(36)]>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

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. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7f8153df60d0 V:[UILabel:0x7f8153df5ed0'myText'(36)]>",
    "<NSLayoutConstraint:0x7f8153df6d80 V:|-(0)-[UILabel:0x7f8153df6730'Label']   (Names: '|':UIView:0x7f8153df6600 )>",
    "<NSLayoutConstraint:0x7f8153df6dd0 V:[UILabel:0x7f8153df6730'Label']-(0)-|   (Names: '|':UIView:0x7f8153df6600 )>",
    "<NSLayoutConstraint:0x7f8153df7090 V:|-(10)-[UILabel:0x7f8153df5ed0'myText']   (Names: '|':UIView:0x7f8153df5da0 )>",
    "<NSLayoutConstraint:0x7f8153df7130 V:[UILabel:0x7f8153df5ed0'myText']-(8)-[UIView:0x7f8153df6600]>",
    "<NSLayoutConstraint:0x7f8153df71d0 V:[UIView:0x7f8153df6600]-(8)-|   (Names: '|':UIView:0x7f8153df5da0 )>",
    "<NSLayoutConstraint:0x7f8153df73c0 V:|-(8)-[UIView:0x7f8153df5da0]   (Names: '|':UIView:0x7f8153df5c70 )>",
    "<NSLayoutConstraint:0x7f8153df7410 V:[UIView:0x7f8153df5da0]-(8)-|   (Names: '|':UIView:0x7f8153df5c70 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x7f8153deae50 h=--& v=--& V:[UIView:0x7f8153df5c70(50)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7f8153df6dd0 V:[UILabel:0x7f8153df6730'Label']-(0)-|   (Names: '|':UIView:0x7f8153df6600 )>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

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. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x7f8153df60d0 V:[UILabel:0x7f8153df5ed0'myText'(36)]>",
    "<NSLayoutConstraint:0x7f8153df7090 V:|-(10)-[UILabel:0x7f8153df5ed0'myText']   (Names: '|':UIView:0x7f8153df5da0 )>",
    "<NSLayoutConstraint:0x7f8153df7130 V:[UILabel:0x7f8153df5ed0'myText']-(8)-[UIView:0x7f8153df6600]>",
    "<NSLayoutConstraint:0x7f8153df71d0 V:[UIView:0x7f8153df6600]-(8)-|   (Names: '|':UIView:0x7f8153df5da0 )>",
    "<NSLayoutConstraint:0x7f8153df73c0 V:|-(8)-[UIView:0x7f8153df5da0]   (Names: '|':UIView:0x7f8153df5c70 )>",
    "<NSLayoutConstraint:0x7f8153df7410 V:[UIView:0x7f8153df5da0]-(8)-|   (Names: '|':UIView:0x7f8153df5c70 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x7f8153deae50 h=--& v=--& V:[UIView:0x7f8153df5c70(50)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x7f8153df60d0 V:[UILabel:0x7f8153df5ed0'myText'(36)]>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

It looks like the layout problem. How can I fix it?
I had opened both autolayout and size class

OAStackView:

StackView:

In OAStackView its unclear what an axis value of a number means.

Would it be possible to add documentation for what the Alignment and Distribution Values mean? The readme file notes the meaning of the Axis value (0 for Horizontal, 1 for Vertical) but doesn't specify anything about the Alignment or Distribution values.

I have an OAStackView that I created in my storyboard. In storyboard, I set the class to OAStackView, and set its constraints. I made an IBOutlet to this stackView in my code. In my code, when I try to edit any attributes of the stackView, like the distribution, or adding another view, the app crashes and gives me the following error:

-[UIView setDistribution:]: unrecognized selector sent to instance 0x155d6500

Not really sure what I'm doing wrong, any help would be greatly appreciated, Thanks!!

When I add arranged subviews to a height-unconstrained UIStackView (configured with axis UILayoutConstraintAxisVertical and distribution UIStackViewDistributionFill) they respect intrinsic content size's height to define their height in this container, and the container fits all the views + spacings:

However, doing so on OAStackView (same config, just changing class) is resulting in a stack with height = 0. All arranged subviews appear one on top of the other with origin at (0,0) but with their expected sizes:

Note: Views in the image samples have been built to have random intrinsic content sizes and colors, hence the differences between them.

I haven't tried defining explicit height constraints (as #39 hints in a similar scenario), but this should not be happening, am I right?

We are dynamically building a tableview which can have 100+ rows, each cell has a OAStackView, if we have a few and start scrolling quickly, the crash happens in OAStackView, it has not stack trace so hard to debug;

-[NSISRestrictedToNonNegativeVariableToBeMinimized]: unrecognized selector sent to instance 0x100528ba0

This is nice for backward capability but will this use UIStackView if it's on iOS9?

autolayout is from ios6,so can it support to ios6?

Currently in IB you have to set axisValue and so on.

Except there is nothing anything that tells you what the values actually are.

It would take 5 mins to add documentation to these values.

Thanks

It would be great if this project would demonstrate how you could dynamically add more subviews and cause the OAStackView to grow.

I'm getting a "framework not found OAStackView" error while building. I'm using XCode Version 7.0.1 (7A1001). Please help!

This is my podfile

So, I've been using OAStackView as a drop back for iOS8/7 users. Overall, it has been really really good, but I keep running into the same problem with labels.

I will describe the situation, both are nearly identical.

1. I have two labels vertically stacked. Alignment is OAStackViewAlignmentLeading, distribution is OAStackViewDistributionFill.
2. This vertical stack view is nested in a horizontal stack view. It goes [icon, verticalLabelStack, arrow]

Now, UIStackView will either truncate the text or break it into multiple lines (if specified to). In both situations OAStackView has the text overflowing.

This is my only big problem with OAStackView, would be awesome to get this fixed!

See here: https://github.com/oarrabi/OAStackView/blob/3569aad354210064de99a2f401ad9167fd358eba/Pod/Classes/OAStackView.m#L18

@property(nonatomic, copy) NSMutableArray *mutableArrangedSubviews;

In the code, this is only ever assigned via _mutableArrangedSubviews, so it doesn't cause problems. But if it is ever assigned via dot syntax, it will be assigned via a synthesized setter that looks something like this:

- (void)setMutableArrangedSubviews:(NSMutableArray *)mutableArrangedSubviews
{
    _mutableArrangedSubviews = [mutableArrangedSubviews copy];
}

_mutableArrangedSubviews is now of type NSArray, not NSMutableArray, and this code will crash if something tries to mutate it.

The fix:

@property(nonatomic, strong) NSMutableArray *mutableArrangedSubviews;

The current behaviour for hiding looks like the below:

The correct version should look similar to the below.

This issue happens since when hiding the view, the correct implementation is to remove it, an hiding animation should be run on the hidden view before removing it.

I am working on a app which have components similar to Facebook Feed, there is User detail, Images, Like & Comment button, Polls etc. Apart from user detail everything is optional. I am using Dynamic cell sizing along with OAStackView and its working good when I am scrolling down. But once I reach the bottom and then scroll up, the scrolling is bit glitchy.

Let me explain you what my cell contains: It contains all the possible component and I hidden the components which are not needed in cellForRowAtIndexPath.

I want to understand, is there a better to work with OAStackView and UITableViewCell.

Thanks

+ (Class)layerClass {
    return [CATransformLayer class];
}

Its causing my logs to be spammed with a bunch of warnings:

<CATransformLayer: 0x7ff94dbe75a0> - changing property opaque in transform-only layer, will have no effect

This happens because when you load OAStackView in a xib file the coder tries to set the opaque property on the layer.

I took the code out and everything works perfectly fine.

I ran into this in our production project, but it is possible to reproduce the issue in the example app as well:

1. Launch example app in Debug mode
2. Tap "Distribution Equal Spacing"
3. Tap on middle view (view 2) to hide it.
4. Tap on "Show all"

From Apple's doc:

The stack view ensures that the arrangedSubviews array is always a subset of its subviews array. Therefore, whenever the addArrangedSubview: method is called, the stack view adds the view as a subview, if it is not already. Whenever an arranged view’s removeFromSuperview method is called, the stack view removes the view from its arrangedSubview array.

Please bump a pod spec version to newest one.

With UIStackView you can pin a stack view to the bottom, leading, and trailing constraints of the superview and the height will be set by the intrinsic content size of the contents.

Put three labels in and change the fonts and text etc... and the UIStackView will resize to fit them in properly.

OAStackView first throws an error in IB saying it needs the 4th constraint and then at run time it will keep the same frame as was given at design time. It doesn't update its frame based on its content.

Would it be possible to support it? I played a bit with the code but I didn't understand enough of the inner workings to get something useful. How the subviews are added as arrangedViews and get their constraints created? Would IB correctly adapt to this and update the child frames?

Hello!

I added OAStackView to UIScrollView with IB. UIScrollView has leading, trailing, top and bottom constraints to superview (just UIView of VC). OAStackView also has same constraints, but according to UIScrollView. And in addition OAStackView has same width as UIView (superview of UIScrollView).

In the beginning all views on OAStackView have right sizes and positions as I set. But when I try to append another UIView by using addArrangedSubview, OAStackView increases it's height by 10 (spacing of OAStackView as I set). Therefore after I append another UIView, it position is above previous view.

Maybe I need update OAStackView constraints or size some how?

Thanks for any advance!

• (void)viewDidLoad {
  [super viewDidLoad];

  UILabel *label1 = [UILabel new];
  UILabel *label2 = [UILabel new];
  label1.text = @"Some long text!!!";
  label2.text = @"ABC";

  OAStackView *sv = [[OAStackView alloc] initWithArrangedSubviews:@[label1, label2]];
  sv.translatesAutoresizingMaskIntoConstraints = NO;
  sv.axis = UILayoutConstraintAxisHorizontal;
  sv.alignment = OAStackViewAlignmentTop;
  sv.distribution = OAStackViewDistributionEqualSpacing;

  [self.view addSubview:sv];

  [sv.topAnchor constraintEqualToAnchor:self.view.topAnchor constant:50].active = YES;
  [sv.leftAnchor constraintEqualToAnchor:self.view.leftAnchor constant:10].active = YES;
  [sv.rightAnchor constraintEqualToAnchor:self.view.rightAnchor constant:-10].active = YES;

  UILabel *label3 = [UILabel new];
  UILabel *label4 = [UILabel new];
  label3.text = @"Some long text!!!";
  label4.text = @"ABC";

  UIStackView *sv2 = [[UIStackView alloc] initWithArrangedSubviews:@[label3, label4]];
  sv2.translatesAutoresizingMaskIntoConstraints = NO;
  sv2.axis = UILayoutConstraintAxisHorizontal;
  sv2.alignment = OAStackViewAlignmentTop;
  sv2.distribution = OAStackViewDistributionEqualSpacing;

  [self.view addSubview:sv2];

  [sv2.topAnchor constraintEqualToAnchor:sv.bottomAnchor constant:50].active = YES;
  [sv2.leftAnchor constraintEqualToAnchor:self.view.leftAnchor constant:10].active = YES;
  [sv2.rightAnchor constraintEqualToAnchor:self.view.rightAnchor constant:-10].active = YES;
  }

The codes are very similar, one for OAStackView, one for UIStackView. The result is different, the label1 get clipped and label3 is fine.

Just note to self

Looks like breaking change, but if we want smooth transition from OA to UI version they should be the same.

Hi,
I've made a little project with a UIStackView where the axis are animated from horizontal to vertical. It's here: https://www.dropbox.com/s/qcjjhx8p8y8xs2f/testStackViewAnimation-UIStackView.zip?dl=0

Then I made it use OAStackView instead: https://www.dropbox.com/s/kkzfjtc8agqh7u7/testStackViewAnimation-OAStackView.zip?dl=0 . I would have liked to change the class in IB from UIStackView to OAStackView, but it wouldn't allow me. So I made a UIView instead and set its class to OAStackView.
Here I have the same code to animate, but instead of animating, it just jumps instead.

Any pointers to what I should be doing differently?

Cheers

Nik

I would like to use OAStackView.
I am creating such an attaching view.
I am checking on simulator.
But it is very slow.
To open this view takes around 8 seconds.
According to my investigating,,,to use several module(uiview,uilabel and uiimageview) take a long time such a 8 seconds.

are there way how to solve it?

Would it be possible to release a new CocoaPod version which includes the latest fixes (mainly layout margin support)?

In my case I have a subview I do not want to arrange, but this is not possible with the current implementation.

In storyboard I put a view of OAStackView, and drag 3 Labels into this view.
I want the sequence is [Label1 Label2 Label3], but when I running this demo, the sequence is different. It becoming [Label2 Label3 Label1]. Someone can help me?

Stack View set:
Axis value: 1
spacing: 10
Alignment Value: 4
Distribution Value: 3
like this:


Running result: