marlimox / aloestackview Goto Github PK

On iOS 13, the view that's displayed within a popover now extends to include the popover arrow. As a result, additional safeAreaInsets are applied to include the arrow.

When presenting an AloeStackView in a popover with the arrow pointing left or right, this currently isn't being taken into account. As a result, the cell insets (content and separator) are too close to the edges. I've tracked this down to insetsLayoutMarginsFromSafeArea = false being partially the culprit, as well as the separator leading/trailing constraints not taking the safe area into account.

I haven't seen any visual issues in the sample app, or my own projects with insetsLayoutMarginsFromSafeArea enabled, so I'm not sure if there is a specific reason for this being disabled in the Airbnb app. When I test this out with the default value set (true), everything works as expected (tested on iOS 11, 12, and 13).

I've included a screenshot of the issue on iOS 13. As you can see, the content is too close to the left side of the popover.

With insetsLayoutMarginsFromSafeArea enabled and the separators taking the safe area into account, everything looks as expected (tested on iOS 11, 12, and 13).

Ignore the switch cell extending off the right hand side. That's not an issue with the stack view, just some internal constraints in one of the sample cells.

Trying to set the stackView as the view of my tableHeaderview, The height becomes 0. See code example below. I tried settings constraints on my headerView, the stackview and even the tableHeaderView but I can't seem to get it to work. Am I overseeing something?

let headerStackView = AloeStackView()
        headerStackView.hidesSeparatorsByDefault = true
        headerStackView.addRow(headerView)
        
  
        tableView.tableHeaderView = headerView // using this works
        tableView.tableHeaderView = headerStackView // using this doesn't

A lot of open PR and issues havent had any comment or reaction. Is this library maintained or should we move on from it?

When I try to use AloeStackView with SwiftPM, I get this error:

https://github.com/airbnb/AloeStackView.git @ master: error: manifest parse error(s):
/var/folders/4s/rkh28cgs55z2s0cxdsphnfzw0000gn/T/TemporaryFile.3pAAby.swift:8:9: error: type 'SupportedPlatform' has no member 'ios'
       .ios(.v9),

This is indicating that the casing of ios is wrong and should actually be iOS.

enjoying this small but very handy framework a lot. thanks for the effort and making it os.

i wonder if there is a simple built in way to avoid the keyboard or do we have to handle the content insets our own via keyboardWillShowNotification?

adding stackView.addRow(UITextField()) as the last element of your demo shows this issue nicely:
the TextField gets obscured by the keyboard as soon as it becomes the first responder.

  private func setUpRows() {
    setUpDescriptionRow()
    setUpSwitchRow()
    setUpHiddenRows()
    setUpExpandingRowView()
    setUpPhotoRow()

    stackView.addRow(UITextField())
  }

Hello, coming from Android using Epoxy for our views, can AloStackView be considered a small variation of what Epoxy can do ? I read in the docs that this stack view is not suitable for longer screen. So are we going to see another library for iOS that achieve the same as Epoxy in Android? Thanks.

Is there a way to create an effect similar to stick section headers in UITableView?

While using debug view hierarchy, it is showing "Layout Issues: Scrollable content size is ambiguous for AloeStackView.AloeStackView."

Is this possible to do? I tried it and could not get the collectionview to display.

Currently, there is no functionality in AloeStackView which will give us number of rows present in AloeStackView.
As of now to get the total number of rows I used aloeStackView.getAllRows().count which is not an efficient solution as it always creates a new list of UIView

Hello,
I'm trying to implement your component in one part of my project (in one of the the VC, and I'm using Storyboard)
So one of the VC inherit from AloeStackViewController, but I get the fatalError("init(coder:) has not been implemented")
What should I do to solve the issue ?

Thanks !

Hello, is there any way for content height change animation?

Is there any way to render a given horizontal stack rows from right to left?

Much appreciated!

Is it possible to set a custom row height?

AloeStackView will be a more powerful library if you provide features that allow contentView to animate views in situations when remove, add, or hidden animation occurs.
I would like to implement this function once.

It's possible to add complex view like FSCalendar view? I try it but only a small empty row are displayed.

There are a couple of issues that would be great to see improved:

• while a content view is highlighted, moving your finger in and out of the cell should adjust the highlight state accordingly. This would be consistent with how highlight states work with UITableViews
• UIControls within a content view do not receive touches when the tap gesture on the cell is enabled

Hi. I want to use Skeleton animation on AloeStackView. I need stackview to be visible outside its framework. Is it possible to change its modifier to
private(set) public var stackView = UIStackView()

When AloeStackView is used as a dependency in a Swift Package, the build fails with:
AloeStackView/AloeStackView.swift:16:8: error: no such module 'UIKit'

It's because Swift Package is universal and so, UIKit might not be available.
The fix is adding code in #if canImport(UIKit) ... #endif block.

I have a storyboard with a container UIView that I would like to insert AloeStackView. I was looking at this but adding translatesAutoresizingMaskIntoConstraints = false is not working either. Unlike the sample in the issue, I don't need to specify the constraints since I already configured it on the Storyboard. Any ideas why this is not working?

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        view.addSubview(stackView)
        stackView.translatesAutoresizingMaskIntoConstraints = false
        stackView.separatorInset = .zero
        stackView.rowInset = .zero
        setupItems()
    }

    func setupItems() { stackView.addRows(...) }

There is some warnings in library, are you planning to fix them?

Can I embed a UITableView as a row? I am unable to accomplish this currently. The containing AloeStackView seems to ignore the TableView contents. TableView datasource function (func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell) is never called.

Currently when adding a row to the StackView using insertRow(_ row: UIView, after afterRow: UIView, animated: Bool), the stackview increases the space for the next row without animation, and then animates the alpha of the new row.

Is there a reason why it's not using the same method as the removeRow(_ row: UIView, animated: Bool) function? This is utilising the standard ios stackview animations by simply animating the isHidden property of the UIStackView, providing us with a much smoother animation.

If there is no specific reason why the insert animation doesn't mirror this, I can put up a PR with the changes.

Thanks!

Hi there! First let me thank you for this great piece of work, I'm using it a lot in my apps and it's great!

I'm having some troubles though with the following settings:

• I have a UIViewControler
• in which I add a bunch of views as subviews
• one of those is an AloeStackView that should fill the bottom part of the window and be scrollable.

I manage to display things the way I want using autolayout but I have a lot of errors in the console.

(
    "<NSAutoresizingMaskLayoutConstraint:0x600003a1e440 h=--& v=--& AloeStackView.AloeStackView:0x7fd89d82ac00.width == 0   (active)>",
    "<NSLayoutConstraint:0x6000039e85a0 UILabel:0x7fd89d760670'Label 0'.leading == UILayoutGuide:0x600002317480'UIViewLayoutMarginsGuide'.leading   (active)>",
    "<NSLayoutConstraint:0x6000039e85f0 UILabel:0x7fd89d760670'Label 0'.trailing == UILayoutGuide:0x600002317480'UIViewLayoutMarginsGuide'.trailing   (active)>",
    "<NSLayoutConstraint:0x6000039ecaa0 UIStackView:0x7fd89d45c2f0.width == AloeStackView.AloeStackView:0x7fd89d82ac00.width   (active)>",
    "<NSLayoutConstraint:0x600003a1c370 'UISV-canvas-connection' UIStackView:0x7fd89d45c2f0.leading == AloeStackView.StackViewCell:0x7fd89d76e1b0.leading   (active)>",
    "<NSLayoutConstraint:0x600003a1c3c0 'UISV-canvas-connection' H:[AloeStackView.StackViewCell:0x7fd89d76e1b0]-(0)-|   (active, names: '|':UIStackView:0x7fd89d45c2f0 )>",
    "<NSLayoutConstraint:0x6000039e8410 'UIView-leftMargin-guide-constraint' H:|-(15)-[UILayoutGuide:0x600002317480'UIViewLayoutMarginsGuide'](LTR)   (active, names: '|':AloeStackView.StackViewCell:0x7fd89d76e1b0 )>",
    "<NSLayoutConstraint:0x6000039e84b0 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x600002317480'UIViewLayoutMarginsGuide']-(15)-|(LTR)   (active, names: '|':AloeStackView.StackViewCell:0x7fd89d76e1b0 )>"
)

As I said, my UI is working but I'm worried about those errors.

How should one setup autolayout for an AloeStackView used as a subview?

Thanks a lot!
Ladislas

I think paging would make this library work quite nicely for creating App Store-like headers and scroll views, see https://github.com/arnauddorgans/InfiniteLayout, purposes for which UICollectionView is still used.

It would be great to have SPM support.

I just upgraded to Xcode 11.0 beta 4 earlier today, and I'm rebuilding my project (which uses AloeStackView and tracks the master branch) with it now.

From Cartfile.resolved: github "airbnb/AloeStackView" "b64e577e862d74d191e4fd28928dc9fbc29ad43c"

$ carthage build --platform iOS --no-use-binaries
*** xcodebuild output can be found in /var/folders/_2/_jp0qd3j4hl48fz5j8pfwnbr0000gn/T/carthage-xcodebuild.Ophtgw.log

*** Building scheme "AloeStackView" in AloeStackViewExample.xcworkspace
Build Failed
	Task failed with exit code 65:
	/usr/bin/xcrun xcodebuild -workspace /Users/aaron/repos/obakit/Carthage/Checkouts/AloeStackView/Example/AloeStackViewExample.xcworkspace -scheme AloeStackView -configuration Release -derivedDataPath /Users/aaron/Library/Caches/org.carthage.CarthageKit/DerivedData/11.0_11M374r/AloeStackView/06f9a8f4b96cceed09b11edfb57d260712d7e144 -sdk iphoneos ONLY_ACTIVE_ARCH=NO CODE_SIGNING_REQUIRED=NO CODE_SIGN_IDENTITY= CARTHAGE=YES archive -archivePath /var/folders/_2/_jp0qd3j4hl48fz5j8pfwnbr0000gn/T/AloeStackView SKIP_INSTALL=YES GCC_INSTRUMENT_PROGRAM_FLOW_ARCS=NO CLANG_ENABLE_CODE_COVERAGE=NO STRIP_INSTALLED_PRODUCT=NO (launched in /Users/aaron/repos/obakit/Carthage/Checkouts/AloeStackView)

This usually indicates that project itself failed to compile. Please check the xcodebuild log for more details: /var/folders/_2/_jp0qd3j4hl48fz5j8pfwnbr0000gn/T/carthage-xcodebuild.Ophtgw.log

Log file:

carthage-xcodebuild.Ophtgw.log

• Notably, when I try opening AloeStackView.xcodeproj and building from inside the project, it works fine.
• I've tried removing the Carthage/Build folder, Carthage's cache files (in ~/Library), and Xcode's derived data, but none of these had an effect.

This library is outstanding, thanks so much for releasing it!

In the readme, you mention one of the use cases for AloeStackView is for forms. That feels like a prime use case to me as well, and I'm working on implementing some forms with it now. Was wondering though - any thoughts on adding some form functionality to the example app? E.g., you have a switch in there already, but I'd like to an example implementation of a form from you all instead of figuring out best practices myself.

An example implementation of
https://github.com/airbnb/AloeStackView/blob/master/Docs/Images/airbnb_app_10.png?raw=true for example I think would be a great addition.

Great library, thanks for sharing! I hope it inspires Apple to release it natively :)

Is there a way to use this in Storyboard? I pretty much want to use this like watchOS's interface builder; drag and drop items and let it grow in storyboard. Is this possible?

Hi there! --

Following my previous question about auto-layout, I'm wondering how it could be possible to get the actual size of the AloeStackview once all the rows and separators have been laid out.

I'm using them a lot in modal pop-ups and cells to display information. My goal is to have the modal or cell resize to the aloestackview size if I add or remove a row.

Thanks a lot!
Ladislas

I'm add a sticky feature to the AloeStackView.
What do you think?

I was trying to use scrollViewDidScroll in order to make a stretchy header, and i could manage to do except that when the header shrinks enough for the scrolling to disappear, the method wont be called anymore and then the header will remain tiny forever cause i can't scroll anymore.

Just wondering, is there anyway i could set isScrollEnabled = true for ever? I've tried setting it up in the same method or in the AloeStackView init, didn't work.

Hi,

I have a plan to use the framework in one of my projects, but I'd like to have an option to handle swipe gestures on "cells". That will allow to make a cell of an "image gallery" kind or something simillar.

I'd suggest adding a swipe recognizer to a StackViewCell class. I can do that and it seems to be relatively easy to do. The only thing to concern is the fact that right now I don't see an option to make a cell be both higlightable and swipable, mostly because of overriden touchesBegan, touchesEnded methods.

Would be glad to hear yout thoughts on that. Thank you.

There is a problem with safe area insets for embedded views (viewControllers).

How to reproduce (you need phone or simulator with a notch):

1. Fill stack view with views that take at least one screen in Portrait.
2. Inside each view put at least one element that depends on safeArea (could be a label)
3. Rotate to Landscape and scroll to bottom

See, that safe area is correct for those views that were visible and incorrect for those that weren't.

Seems like it's UIKit bug, but maybe you have a workaround for this issue.

the only solution i've found was inspired by this answer on SO:
https://stackoverflow.com/questions/46505999/using-a-stack-view-in-a-scroll-view-and-respecting-safe-area-insets?rq=1

- view
-- scroll view [constrained to superview]
--- view [constrained to superview]
---- stack view [constrained to safeArea]

but in this case you don't have TableView-like behaviour when background takes full width and content is located inside the safe area

I want to know when each cell is visible/invisible like UITableViewDelegate.
What do you think?

It would be incredibly useful for the stackview to be able to enable reordering of cells. I'd suggest an API like UITableView's such as:

stackView.isReorderEnabled = true

This would allow for an interaction like in a tableView drag and drop reorder.

I would like to have access to the cell that contains a row.
I wanted to create an extension similar to this one, but stackView is private.

extension AloeStackView {
    func cell(with row: UIView) -> StackViewCell? {
        return stackView.arrangedSubviews.first(where: { arrangedSubview in
            guard let cell = arrangedSubview as? StackViewCell, cell.contentView == row else { return false }
            return true
        }) as? StackViewCell
    }
}

I want this access because I want to change second cell's topLeft and topRight corner radius.

Is there a way to do what I mentioned without making stackView public? If no, would it be possible to make it public?

Thank you!

Hi, can we have swift 5 support?