How to fill iOS Stack View (UIStackView) with an image as a background?

Question

I want to set stack view background to an image. For example, in Android, if I use 'Linear Layout' (equivalent to UIStackView), I can set a background image to the 'Linear Layout' irrespective of whatever the content (views) I add to it. How could I do this using XCode?

Mussorgsky

UIStackViews are non renderable objects. You cannot set background color or image to UIStackView. In order to do that you need to put stackview inside UIView or an UIImageView. – Geelong

Answer 1

You can't do this, UIStackView is a non-drawing view, meaning that drawRect() is never called. If you want a background image, consider placing the stack view inside a UIImageView.

Teodora

Thanks for the idea. I successfully added a UIStackView inside a UIView. However, when I try to add views in the inner UIStackView, I'm getting constraint errors. – Mussorgsky

Answer 2

As the answers stated above you can't add an image background to a stackview.

The way to achieve it is by adding a UIView and then nest an ImageView and the existing stackview to the UIView just added. Also, you need to apply the corresponding constraints to the imageview in order to fit the full background (0, 0 , 0 , 0)

The outline should look like this:

Ginglymus

Answer 3

If you program UIStackview in code maybe you can try below ~

UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
[[scrollview layer] setContents:(__bridge id)[[UIImage imageNamed:@"your_background.jpg"] CGImage]];
[[scrollview layer] setContentsGravity:kCAGravityResizeAspectFill];
[self.view addSubview:scrollview];

UIStackView *stackview = [[UIStackView alloc] init];
[stackview setTranslatesAutoresizingMaskIntoConstraints:NO];
[stackview setAxis:UILayoutConstraintAxisVertical];
[stackview setDistribution:UIStackViewDistributionFill];
[scrollview addSubview:stackview];

NSDictionary *dic_vfl = NSDictionaryOfVariableBindings(stackview,scrollview);

NSArray *array = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[stackview(scrollview)]|" options:0 metrics:nil views:dic_vfl];
[scrollview addConstraints:array];
array = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|[stackview]|" options:0 metrics:nil views:dic_vfl];
[scrollview addConstraints:array];

//add view to stackview for test

srand48(arc4random());

for(int i=0;i<50;i++){

    UIColor *rc = [UIColor colorWithRed:drand48() green:drand48() blue:drand48() alpha:0.5];

    UIView *view_test = [[UIView alloc]init];
    [view_test setTranslatesAutoresizingMaskIntoConstraints:NO];
    [view_test setBackgroundColor:rc];
    [stackview addArrangedSubview:view_test];

    dic_vfl = NSDictionaryOfVariableBindings(view_test);
    array = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view_test]|" options:0 metrics:nil views:dic_vfl];
    [stackview addConstraints:array];
    array = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[view_test(50)]" options:0 metrics:nil views:dic_vfl];
    [stackview addConstraints:array];

}

hope this is useful!!

Elora