Porting UIStackView to iOS 7+

Related tags

UI OAStackView
Overview

OAStackView

Build Status Version License Platform

iOS 9 introduced the very cool UIStackView, UIStackView can be used to easily create simple and complex layouts.

As expected UIStackView can only be used for iOS 9 and up. This project tries to port back the stackview to iOS 7+.

OAStackView aims at replicating all the features in UIStackView

Usage

To run the example project, clone the repo, and run pod install from the Example directory first.

Since OAStackView mimics the interface of UIStackView, the usage of OAStackView is similar to UIStackView.

OAStackView Can be either used from the Interface builder, or from code.

Interface Builder

Drag a a UIView into your view controller, and add some views to it.

 photo step1_zps2xxl75vw.png

Change the class to OAStackView

 photo step2_zpsfgwirklz.png

(Optional) Change the stack Axis (set Axis Value to 0 for Horizontal or 1 for Vertical), Spacing, Alignment or distribution.

 photo step3_zpsmk8xw3hz.png

Run the project!

 photo step4_zpsgl92oeoc.png

From Code

To use OAStackView from code, Please refer to UIStackView for proper documentation.

As a quick example on its usage do the following:

Create a couple of views to be stacked:

 UILabel *l1 = [[UILabel alloc] init];
 l1.text = @"Label 1";
 UILabel *l2 = [[UILabel alloc] init];
 l2.text = @"Label 2";

Create the stack view passing the array of views:

OAStackView *stackView = [[OAStackView alloc] initWithArrangedSubviews:@[l1, l2]];
stackView.translatesAutoresizingMaskIntoConstraints = NO;

Add the stack view to self.view

[self.view addSubview:stackView];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[stackView]"
                                                                  options:0
                                                                  metrics:0
                                                                    views:NSDictionaryOfVariableBindings(stackView)]];

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[stackView]"
                                                                  options:0
                                                                  metrics:0
                                                                    views:NSDictionaryOfVariableBindings(stackView)]];

Installation

OAStackView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "OAStackView"

Tests

Since OAStackView has been built from reverse engineering UIStackView, and since I intend to keep updating and refactoring OAStackView, tests was one of the requirements going forward.

The following a human readable text subscript (generated with specipy).

Contribution

All contributions in any form are welcomed, if you find the project helpful, and you want to contribute then please do.

Known Issues, and future improvements

Missing functionality

OAStackView implements most of the features from UIStackView except the following:

  • baselineRelativeArrangement

    @property(nonatomic,getter=isBaselineRelativeArrangement) BOOL baselineRelativeArrangement;

  • layoutMarginsRelativeArrangement

    @property(nonatomic,getter=isLayoutMarginsRelativeArrangement) BOOL layoutMarginsRelativeArrangement;

UIStackViewDistribution is also partially implemented (2 elements out of 5 are still not implemented)

  • UIStackViewDistributionFill
  • UIStackViewDistributionFillEqually
  • UIStackViewDistributionFillProportionally
  • UIStackViewDistributionEqualSpacing
  • UIStackViewDistributionEqualCentering

Please refer to UIStackView for proper documentation.

Future improvements

The following would be nice to have for future versions

  • Covering the remaining functionality from UIStackView
  • Better Documentation
  • Better test coverage for some edge cases
  • Rewrite in swift, or more swift friendly

Author

Omar Abdelhafith, [email protected]

License

OAStackView is available under the MIT license. See the LICENSE file for more info.

Comments
  • OAStackView is very slow.

    OAStackView is very slow.

    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? 2015-10-16 19 56 05

    question 
    opened by shiratsu 10
  • issue with size classes...

    issue with size classes...

    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?

    bug 
    opened by stallent 8
  • 0.1.0 - Cocoapod's Version Not Working

    0.1.0 - Cocoapod's Version Not Working

    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!

    opened by coridn 8
  • Implement layout margins relative arrangement.

    Implement layout margins relative arrangement.

    layout margins relative arrangement

    This PR implements the layout margins relative arrangement feature. It defines two new properties:

    @property(nonatomic) UIEdgeInsets layoutMargins;
    @property(nonatomic, getter=isLayoutMarginsRelativeArrangement) BOOL layoutMarginsRelativeArrangement;
    

    The first one just defines the missing layoutMargins property on iOS7. The second one switches the layout relative to margins.

    I also added some buttons to visualize the feature in the example App.

    bonus

    • In the process of developing this feature I also solved a small bug with the center alignment: because it didn't define any constraints relative to the edges of the stackView, the content views could easily overflow the stackView boundaries. This was fixed.
    • I also added a background view to help visualize the margins. Now that the stackView's backing layer is a CATransformLayer we could not set a backgroundColor on it to help visualize the layout. I fixed this by placing a background view behind the stackView and constraining it to have the same size and center of the stackView.
    opened by cabeca 8
  • Maintain arranged subviews array

    Maintain arranged subviews array

    Hi!

    Firstly, thanks for working on this, I just started using and it made my life a lot simpler! :smiley_cat: I was missing the arrangedSubview functionality, as also mentioned in #43, so tried to add it, including accompanying specs.

    The solution is just for arrangedSubviews to be mutable, initialized as either empty or with the passed in initial views and update it accordingly when inserting or removing subviews. There is another possible enhancement, so that every place where now self.subviews is used, to use self.arrangedSubviews and completely ignore any subviews which aren't array, but I'm not sure if that's a valid option in your opinions, so I haven't implemented that here yet.

    Would love to hear feedback! Cheers! :beers:

    opened by assafgelber 7
  • Fixed necessary constraint being removed

    Fixed necessary constraint being removed

    Had a problem while using aligning views inside of an autoresizable view. The generated constraints for the OAStackView and it's subviews looked like this: [View]-(0)-[View]-(0)-[View]-|

    when it should look like: |-[View]-(0)-[View]-(0)-[View]-|

    opened by izackp 7
  • [WIP] Adding baseline align support

    [WIP] Adding baseline align support

    I am working on adding baseline align support, because I needed it. This requires a bit of a change in the way the alignment strategies are called, because the alignment is between views and not between the view and the stack view.

    I'm looking for feedback on the following points:

    • [ ] Is this how UIStackView baseline aligns labels? (haven't tried it myself yet)
    • [ ] What do you think about the way I've extended the alignment strategy?
    • [ ] To test this, new (UILabel based?) tests are needed. How do you want the test suite to grow?
    opened by Thomvis 6
  • Any chance of a translation from axis to axisValue (et al).

    Any chance of a translation from axis to axisValue (et al).

    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

    enhancement 
    opened by oliverfoggin 5
  • Center Aligned View Width

    Center Aligned View Width

    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!

    bug help wanted 
    opened by calebd 5
  • Added constant leading/header and trailing/footer padding space?

    Added constant leading/header and trailing/footer padding space?

    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?

    opened by komocode 5
  • Remove removeDecendentConstraints

    Remove removeDecendentConstraints

    This PR removes removeDecendentConstraints method, since the method basically removed all constraints that involved its subviews (and not only constraints added by the OAStackView layout).

    Changes:

    • OAStackView will use the property for alignmentStrategy and distributionStrategy rather than the synthesized instance variable
    • Implemented setAlignmentStrategy and setDistributionStrategy that removes the previous strategies constraints on OAStackView
    • OAStackViewDistributionStategy now adds the constraints created by alignLastView: and alignFirstView: to its array of constraints
    • Removed the removeDecendentConstraints method.
    • OAStackView will only remove the strategies constraints during layoutArrangedViews
    opened by mattiasjahnke 4
  • Doesn't work as documented in IB

    Doesn't work as documented in IB

    The Interface Builder method described in docs simply doesn't work. I just followed all the steps in a new project exactly as said in the Usage section. Buttons stay where they are.

    opened by krafter 0
  • ios7 compatibility

    ios7 compatibility

    PR #87 breaks the ability to have OAStackView be a static framework (because it uses Swift), and consequently breaks iOS 7 compatibility.

    OAStackView's own Examples project (Deployment Target = 7.1) is broken because of this:

    ld: embedded dylibs/frameworks are only supported on iOS 8.0 and later (@rpath/OAStackView.framework/OAStackView) for architecture armv7
    

    It can't be worked around, either, as Cocoapods ~doesn't~ can't support static frameworks with Swift. For example if we remove use_frameworks! from the Podfile we get

    [!] Pods written in Swift can only be integrated as frameworks; add `use_frameworks!` to your Podfile or target to opt into using it. The Swift Pod being used is: OAStackView
    

    What problem is OAStackViewProxy.swift trying to solve? PR #60 solves the backwards compatibility problem with objc_allocateClassPair.

    opened by paleozogt 2
  • [XIB] Does not work on xib file?

    [XIB] Does not work on xib file?

    I am trying to add stackview into my cel xib, but get error: - Unknown class OAStackView in Interface Builder file. - Failed to set (axisValue) user defined inspected property on (UIView): [<UIView 0x7f95e3cd4f70> 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 0x7f95e3cd4f70> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key spacing. Failed to set (alignmentValue) user defined inspected property on (UIView): [<UIView 0x7f95e3cd4f70> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key alignmentValue. - Failed to set (distributionValue) user defined inspected property on (UIView): [<UIView 0x7f95e3cd4f70> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key distributionValue.

    Btw I already tested successfully on storyboard.

    opened by stonezhang1412 0
  • Behavior mismatch between `removeArrangedSubview:` and `removeFromSuperview`

    Behavior mismatch between `removeArrangedSubview:` and `removeFromSuperview`

    Hey there, @oarrabi!

    First of all, thanks for OAStackView and all the effort you put into it. I was just playing with it and replaced a previously iOS 9-only codebase without many issues, but found an odd one.

    The original code, which uses UIStackView, follows Apple's guidelines and removes subviews by calling removeFromSuperview. Here's what the docs say about removeArrangedSubview::

    This method removes the provided view from the stack’s arrangedSubviews array. The view’s position and size will no longer be managed by the stack view. However, this method does not remove the provided view from the stack’s subviews array; therefore, the view is still displayed as part of the view hierarchy.

    OAStackView, on the other hand, seems to expect subviews to be removed by using removeArrangedSubview:, isn't that right? Directly calling removeFromSuperview breaks the constraints system most of the time unfortunately.

    I can happily submit a PR with fixes for that if you agree with the changes. I just wanted to make sure the project is still under development first.

    Thanks!

    opened by brunnoferreira 0
  • App crash when initialize the OAStackView

    App crash when initialize the OAStackView

    Any idea why this crash?

    Crashed: com.apple.main-thread EXC_BAD_ACCESS KERN_PROTECTION_FAILURE 0x0000000189a49e6a

    Crashed: com.apple.main-thread 0 MyAPP 0x100b30000 -OAStackViewAlignmentStrategy addConstraintsOnOtherAxis: 1 MyAPP 0x100b2e9c4 38-[OAStackView setAlignmentConstraints]block_invoke (OAStackView.m:146) 2 MyAPP 0x100b2d784 -OAStackView(Traversal) iterateVisibleViews: 3 MyAPP 0x100b2e8c8 -OAStackView setAlignmentConstraints 4 MyAPP 0x100b2f7f0 -OAStackView layoutArrangedViews 5 MyAPP 0x100b2e234 -OAStackView initWithArrangedSubviews: 6 MyAPP 0x1002745dc -MyFCVMajorCell tk_initialize 7 MyAPP 0x1002735b0 -MyFCVMajorCell initWithFrame: 8 UIKit 0x18988f488 -[UICollectionView _dequeueReusableViewOfKind:withIdentifier:forIndexPath:viewCategory:] + 892 9 UIKit 0x1890abd48 -[UICollectionView dequeueReusableCellWithReuseIdentifier:forIndexPath:] + 180 10 MyAPP 0x1007639a8 -MyFollowingCollectionView collectionView:cellForItemAtIndexPath: 11 UIKit 0x1898873a8 -[UICollectionView _createPreparedCellForItemAtIndexPath:withLayoutAttributes:applyAttributes:isFocused:] + 432 12 UIKit 0x1890a9adc -[UICollectionView _updateVisibleCellsNow:] + 4628 13 UIKit 0x1890a4808 -[UICollectionView layoutSubviews] + 228 14 UIKit 0x1890401e4 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 656 15 QuartzCore 0x1869d2994 -[CALayer layoutSublayers] + 148 16 QuartzCore 0x1869cd5d0 CA::Layer::layout_if_needed(CA::Transaction) + 292 17 QuartzCore 0x1869cd490 CA::Layer::layout_and_display_if_needed(CA::Transaction_) + 32 18 QuartzCore 0x1869ccac0 CA::Context::commit_transaction(CA::Transaction_) + 252 19 QuartzCore 0x1869cc820 CA::Transaction::commit() + 500 20 QuartzCore 0x1869c5de4 CA::Transaction::observer_callback(_CFRunLoopObserver, unsigned long, void) + 80 21 CoreFoundation 0x183e9c728 __CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION* + 32 22 CoreFoundation 0x183e9a4cc __CFRunLoopDoObservers + 372 23 CoreFoundation 0x183e9a8fc __CFRunLoopRun + 928 24 CoreFoundation 0x183dc4c50 CFRunLoopRunSpecific + 384 25 GraphicsServices 0x1856ac088 GSEventRunModal + 180 26 UIKit 0x1890ae088 UIApplicationMain + 204 27 MyAPP 0x1000d1fc0 main (main.m:22) 28 libdispatch.dylib 0x1839628b8 (Missing)

    opened by xiaomaogong 1
Owner
Omar Abdelhafith
Software Engineer @facebook, computer geek, rock-metal fan, who believes in parallel universes and UFOs. In ❤️ with Swift/Objc and Elixir.
Omar Abdelhafith
A controller that uses a UIStackView and view controller composition to display content in a list

StackViewController Overview StackViewController is a Swift framework that simplifies the process of building forms and other static content using UIS

Seed 867 Dec 27, 2022
A micro UIStackView convenience API inspired by SwiftUI

Stacks A micro UIStackView convenience API inspired by SwiftUI. let stack: UIView = .hStack(alignment: .center, margins: .all(16), [ .vStack(spaci

Alexander Grebenyuk 74 Jul 27, 2022
An alternative to UIStackView for common Auto Layout patterns.

StackLayout StackLayout builds on Auto Layout to make some of the most common layouts easier to manage. It creates the constraints that you need and a

Bridger Maxwell 76 Jun 29, 2022
Super awesome Swift minion for Core Data (iOS, macOS, tvOS)

⚠️ Since this repository is going to be archived soon, I suggest migrating to NSPersistentContainer instead (available since iOS 10). For other conven

Marko Tadić 306 Sep 23, 2022
A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView and iPhone X safe area support for content reloading. Built for iOS 10 and later.

Arale A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView support for reloading your content. Built f

Putra Z. 43 Feb 4, 2022
BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen

BulletinBoard is an iOS library that generates and manages contextual cards displayed at the bottom of the screen. It is especially well

Alexis (Aubry) Akers 5.3k Jan 2, 2023
💾 A collection of classic-style UI components for iOS

A collection of classic-style UI components for UIKit, influenced by Windows 95 Introduction This is a little exploration into applying '90s-era desig

Blake Tsuzaki 2.2k Dec 22, 2022
A simple, customizable view for efficiently collecting country information in iOS apps.

CountryPickerView CountryPickerView is a simple, customizable view for selecting countries in iOS apps. You can clone/download the repository and run

Kizito Nwose 459 Dec 27, 2022
A library to recreate the iOS Apple Music now playing transition

DeckTransition DeckTransition is an attempt to recreate the card-like transition found in the iOS 10 Apple Music and iMessage apps. Hereʼs a GIF showi

Harshil Shah 2.2k Dec 15, 2022
A message bar for iOS written in Swift.

Dodo, a message bar for iOS / Swift This is a UI widget for showing text messages in iOS apps. It is useful for showing short messages to the user, so

Evgenii Neumerzhitckii 874 Dec 13, 2022
Protocol oriented, type safe, scalable design system foundation swift framework for iOS.

Doric: Design System Foundation Design System foundation written in Swift. Protocol oriented, type safe, scalable framework for iOS. Features Requirem

Jay 93 Dec 6, 2022
A Material Design drop down for iOS

A Material Design drop down for iOS written in Swift. Demo Do pod try DropDown in your console and run the project to try a demo. To install CocoaPods

AssistoLab 2.3k Dec 20, 2022
An easy to use FAQ view for iOS written in Swift

FAQView An easy to use FAQ view for iOS written in Swift. This view is a subclass of UIView. Setup with CocoaPods If you are using CocoaPods add this

Mukesh Thawani 467 Dec 5, 2022
A custom reusable circular / progress slider control for iOS application.

HGCircularSlider Example To run the example project, clone the repo, and run pod install from the Example directory first. You also may like HGPlaceho

Hamza Ghazouani 2.4k Jan 6, 2023
A customizable color picker for iOS in Swift

IGColorPicker is a fantastic color picker ?? written in Swift. Table of Contents Documentation Colors Style Other features Installation Example Gettin

iGenius 272 Dec 17, 2022
⚡️ A library of widgets and helpers to build instant-search applications on iOS.

By Algolia. InstantSearch family: InstantSearch iOS | InstantSearch Android | React InstantSearch | InstantSearch.js | Angular InstantSearch | Vue Ins

Algolia 567 Dec 20, 2022
An iOS picker view to serve all your "picking" needs

Mandoline The PickerView is a UICollectionView that provides a smooth "picking" interface. In order to get the most out of it, a consuming view contro

Blue Apron 883 Nov 28, 2022
A draggable modal for iOS Applications.

Mantle Modal Draggable Modal, PopUp or Menu written in Swift. Description A simple modal resource that uses a UIScrollView to allow the user to close

Ricardo Canales 89 Feb 25, 2022
Material, a UI/UX framework for creating beautiful iOS applications

Material Welcome to Material, a UI/UX framework for creating beautiful applications. Material's animation system has been completely reworked to take

Cosmicmind 12k Jan 2, 2023