Absolute Layout Sizing

prinsJoeprinsJoe USMember
edited October 2015 in Xamarin.Forms

Using Absolute Layouts allows for positioning objects onto a definite spot within that layout. It does this based off of coordinates within the layout. You put in those coordinates, the object sets itself within them. However, my problem lies in the fact that for the iPhone 5s on down, the width of the screen is much smaller than the iPhone 6 on up, thus throwing off the positioning of the absolute layout.

In my exact scenario, I'm using a Stack Layout that contains many items, one of which is an Absolute Layout that contains a couple of items for itself. I've set up the coordinates so that the two objects within the Absolute Layout are stacked on top of each other, and then the rest of the Stack Layout items are underneath. However, I'm always left with a large gap between the Absolute Layout and the rest of the items. I tried giving the Absolute Layout a defined height proportional to the size of the screen, and that worked, but only for the screen size I'd sized it to. Change screen sized (switching from iPhone 6 to iPhone 5) and now things are out of whack again since the screen sizes are different.

So in the end, my question is this: Is there a way to set an Absolute Layout to only take up as much room as needed and use actual positioning properties instead of placing objects with coordinates? (e.g., "top left" instead of "0, 0") Thank you in advance!

(BTW, below I have two rough sketches: the first is what I'm aiming for and the second is what I getting.)

1.png 58.6K
2.png 221.9K

Best Answer

Answers

  • TheRealJasonSmithTheRealJasonSmith Xamurai USXamarin Team Xamurai

    Would need to see how things are supposed to be positioned inside teh abs layout to help you. More detailed drawings :)

  • prinsJoeprinsJoe USMember

    Thanks, David! I'll try that out today! :smiley: And Jason, sorry for my kinda vague depictions. :sweat_smile: Here's some more accurate pics: the first is what I'm going for and the second is what I'm getting. (Both are stack layouts within scrollviews, btw.)

  • TheRealJasonSmithTheRealJasonSmith Xamurai USXamarin Team Xamurai

    it looks like what you really want is instead of the absolute layout, use a stacklayout with the images as children like so:

    var image1 = new Image { ... };
    var image2 = new Image { ... };
    image2.VerticalOptions = LayoutOptions.FillAndExapnd;
    
    var stack = new StackLayout {
        Children = { image1, image2 }
    };
    

    If you want to use an AbsoluteLayout you will have to subscribe to the SizeChanged event, probably not what you want. Grid would also be viable here, but the Stack will be cheaper in this case. Also easier.

  • prinsJoeprinsJoe USMember

    Dang! Thanks for the fast reply! :smiley: Does a stack layout stack items on top of each other? I just realized, my example was one again kinda vague. The two item at the top of the screen are stacked, Both images start at the top of the screen and the smaller image is literally on top of the larger one, overlapping it I guess would be a better way to put it. And then same for the button at the bottom, it's on top of the image. :confused: But you're right, the SizeChanged isn't what I'd prefer to deal with and I agree, I think that the Grid should prob fix it.

  • TheRealJasonSmithTheRealJasonSmith Xamurai USXamarin Team Xamurai

    Oh if you want them both at the top you can use an absolute layout

    var absLayout = new AbsoluteLayout ();
    absLayout.Add (image1, new Rectangle (0, 0, 1, AbsoluteLayout.AutoSize), AbsoluteLayoutFlags.WidthProportional);
    absLayout.Add (image2, new Rectangle (0, 0, 1, 1), AbsoluteLayoutFlags.All);

  • prinsJoeprinsJoe USMember

    I tried that and on the iPhone 6 it takes care of the gap, but on the iPhone 5s (on down) the gap is still there, and not only that, but on both iPhone 6 and iPhone 5s (on down) it positions that smaller image a little over halfway down the image that it's on top of, even though it's supposed to be at the top. :confused: Is that just something to do with the configuring of the layout bounds and flags and such? I'm still new to Abs Layouts (as you can prob tell :sweat_smile: ), so I don't know much about those. I can find out though, if that's the prob.

  • prinsJoeprinsJoe USMember

    BETTER YET, I've got a different question. With a stack layout, it inherently is only as large as the items inside. With an absolute layout, it inherently takes up the size of a full iPhone screen. Is there a way to set the height of the absolute layout to only be as tall as the tallest item inside (assuming all items are stacked on top of each other, overlapping, like I was talking about before)?

  • prinsJoeprinsJoe USMember

    I've tried to use something super simple like this:
    asblayout.HeightRequest = image.Height;
    But sadly, something this simple simply does not work. :disappointed:

  • TheRealJasonSmithTheRealJasonSmith Xamurai USXamarin Team Xamurai

    can you give me source, I will modify it to do what you want

    if I dont respond (I lose track of threads) please email me: jason at xamarin

  • prinsJoeprinsJoe USMember

    Thank you so much for sticking with me on this! It helps a ton! Unfortunately, according to project policy, I can't actually give you the source of my project, but I whipped up a new concept art that explains exactly what's going on and exactly what I'm going for. (Forgive my poor concept-drawing skill, I threw it together as fast as I could. lol) So if you could possibly shoot me some code, I can plug it into my project as see how it goes. crossing fingers for added luck!
    image I also just realized that I didn't properly add those other pics to my previous comments, so I presume this is actually the first concept you've actually seen?

  • prinsJoeprinsJoe USMember
    edited October 2015

    We could say that for this example the code is something like this:

    var firstimage = new Image() {              var overimage = new Image() {
        Source = "[email protected]",                Source = "[email protected]",
        Aspect = Aspect.Fit                         Aspect = Aspect.Fit
    };                                          };
    
    var secondimage = new Image() {
        Source = "[email protected]",
        Aspect = Aspect.Fit
    };
    
    var firsttextbox = new Label() {            var secondtextbox = new Label() {
        Text = "firsttextbox"                       Text = "secondtextbox"
    };                                          };
    
    Content = new ScrollView() {
        Content = new StackLayout() {
            Children = {
                new AbsoluteLayout() {
                    Children = {
                        //Since both items will start at the 0,0 point of the Abs. Layout -
                        //I figured I wouldn't really need to do much fancy item-placement setting.
                        firstimage, overimage
                    }
                },
                secondimage, firsttextbox, secondtextbox
            }
        }
    };
    
  • prinsJoeprinsJoe USMember

    Eh, fixed it. I just used David's original suggestion and turned it all into a grid. lol

  • TheRealJasonSmithTheRealJasonSmith Xamurai USXamarin Team Xamurai

    @prinsJoe sorry for the delay, been quite busy, glad you have it working for you

  • ParamjitSinghParamjitSingh ✭✭ USMember ✭✭

    I know this is an old post. But I am posting in hope that this may help someone. In was having same problem. It turns out that the image have transparent pixels around it which is increasing the size.

Sign In or Register to comment.