I am migrating from Android to iOS (Swift). In Android UI elements are scaled up or down (height and width using "dp", layout_weight e.t.c) according to device size.
However I find this VERY difficult to achieve with Auto Layout's constraints, I want the elements in my UI to scale according to device size.
For example, in the shared image below, asides the compression of images to fit the screen width, every UI element has the same size, only looks like UI elements have been duplicated with same specs on all screens
This might help others in their migration from Android to Swift
(I only pinned the width of the 2 ugly ImageViews below)
P.S: This is what I'm trying to replicate guys, this view to fit properly on all screens. Sorry for the blur, I'm not in charge of this project
There's a zen to the AutoLayout. Let me see if I can give you some direction.
You'll want to test every UI on the smallest simulator available (iPhone 4S). This will let you know if you need to adjust your elements' minimum size.
Now for a top-to-bottom review of your UI posted:
"Profile" looks fine
To make the top-left and top-right boxes resize with screen size, you'll
want to give a constraint to the superview on left and right sides respectively. Then you'll want to make a horizontal constraint between the two (to maintain a space between them. Then you'll want to set them to equal widths. You can also set aspect ratio constraints for each one.
Your forms look fine. I can give more guidance here if the look you're after doesn't match the image you posted.
For the views below the form, you'll probably want to follow #2 above.
As for the height issue, set a constraint from your bottom view to the superview's bottom. There might be crowding, interface builder might yell. Chances are, you'll need to set the horizontal spacing constraints from = to >=.
Related
I have a problem with layout being cropped when displaying on screens with curved edges. I have a simple layout with some edittexts and a button. The edittexts are cut off on the left side and it only happens on Samsung Edge devices. Can someone know how to deal with these curved edges screen, because adding larger margins seems like a workaround and on flat screens wouldn't look well .Couldn't find anything useful about the issue,.
Thanks in advance.
I believe there are 2 possible solutions to your problem.
WindowInsets: They describe a set of insets for window content. They make it easier to display your UI while taking in to account the system UI and factors of your display.
Guideline: If you are using a ConstraintLayout as your base layout, using guidelines as your horizontal bounds make it easier to design a responsive UI. For example you could set a horizontal guideline at 0.05 percent and another at 0.95 percent, which would keep you content away from the edges, while also keeping your UI responsive at various screen sizes and densities.
I have a design that I need to follow in my app. In it there are several buttons, images and textviews placed all over the screen (some are aligned to the left, some to the right, some are centered etc). What I need to do is make all those elements appear EXACTLY as they are in the design image. The problem is, if I try to do this using dp, it can be wider or narrower than the design image specifies, and it depends on the properties of the screen. (I've had an app where I did it all in dp, and on my high-res phone it works perfectly, but on my friend's older phone it cuts away the edges of the activity)
My question is, what elements do I use for this? I've heard of using weight in Linear Layouts, but how to make items different width and height and position them all across the screen how I see fit? How to make sure it looks exactly the same on all screen sizes?
Thanks in advance! :)
Edit:
The point is, I need the buttons to be just as they are on the screen (this will be a listview element, I'm trying to make an xml for it). The distance, proportion, everything, it needs to scale to the width of the screen and be this size and distribution. And, I'm not just looking for a solution to THIS particular problem, I want to learn how to do it in general...
You don't. For very large and very small screens, you use separate layouts that scale the sizes, completely drop parts of the UI, or lays it out in a different manner. It's absolutely silly to think you can fit all the stuff on a 10 inch tablet and a 3.5 inch phone. If your designer expects that, tell him he's an idiot and he needs to get back to work.
For a more general answer on the best way of laying things out- it depends on the effect you're trying to get. You should never use pixel counts, and dp should only be used for small things- a bit of padding between 2 fields. Most things should be done via layout, either by using a linear layout and getting things in rows/columns, or a RelativeLayout and describing how to layout views relative to their siblings. But even with these tools you will not be able to fit on all screens and look good.
I have to position the images on my layout such that it does not change its position with varying screen resolutions. They should be exactly where they are placed. layout_weight attribute can be used with linear layout. But I am using relative layout and I am dealing with cropped images. Any solution on how to position the image views? Setting out margin height and width is not worth.
In short - you can't. Devices have different resolutions as well as screen sizes ratio. Thus it's impossible for the app to look same because there is no same definition in Android. The only way to design an interface - is to use bindings to other objects or parent view's borders. Try to investigate what are the rules, e.g. "to the bottom of the picture with 10dp gap" or "next to the TextView" - and it's the constants that are kept on every device.
I can't imagine a scenario where this makes sense but it obviously must exist since the Android team built support for it. The docs on the dimension type clearly state that it supports "mm" and "in" as qualifiers for millimetres and inches respectively.
That should get you what you need but I would advise reevaluating that requirement, as it would make design a massive pain.
I am attempting to make an 8x8 matrix of coloured squares on a black background in a layout that is limited to portrait only. I need the squares to all be equal in size, and the overall matrix to be 60% of the screen's width and of equal height. I also need to control the colour of each square dynamically as a result of my code, call it a pattern setting code if you will. Here is an example of what I need the final product to look like:
Screen example
I have been researching different ways of doing this and was hoping for some advice on the best approach. Here are some ideas I had:
1) Use GridLayout (not GridView) and set the background of each cell to the required colour. This shouldn't be difficult to control with java, but how do I enforce the correct dimensions? Would I need to fill each grid cell with something of a certain size, or can I use layout_weight attributes to control the dimensions?
2) Use a combination of RelativeLayout and LinearLayout with ImageView and display locally saved images of coloured squares. Can I use layout_weight to control the size of these images, and if these images were too small would they be stretched to fill their required dimensions? (I'm thinking of larger tablet screens.)
What I really need from someone is some sample code to implement a very simple version of what I need (for example one square in the centre of the screen that I can colour-control dynamically). Obviously I can then expand it to my specific requirements. If more details or code are required I will happily post them.
Perhaps you could just create a custom View object, and render the appropriate bitmap in the onDraw method? Seems like overkill to use layout objects, unless you're planning to do more than just render squares of colour?
Edit: Alternatively, I once used the info in the following posting to programmatically build a layout grid. It's not exactly what you need (it generates as many horizontal 'cells' as are necessary), but should make for insightful reading on manipulating layout dimensions:
Line-breaking widget layout for Android
Is it a bad habit to get the width and hight of the device and set images/button sizes programmatically accordingly.
I find it inaccurate to use different folders for layouts and densities as it gives me wierd results on some devices (on top of the inacurancies)
Your experience is appreciated.
Thank you
Yes it is very wired thing to make the layout for the all supported screen of android. And there are lots of screen resolution available in market.
Once i have made a Demo and it Works for me. I have made one Button which height and Width is same. Now i have set its required height and width as per the one Screen in which it is looking perfect.
After that i have calculated the pixel that it required to make it Possible in that screen and based on that i have applied it to all screen.
Now it works great in all device with any density and resolution.
So if there is any view that generate at run time and you want to set its height and width then the best way is to calculate its height-width ratio and use it.
hope it will helps you.
Enjoy Coding. . . .
:)
Well, most of cases you will have layouts which are, or will become, complex, and it will be difficult to calculate the positions programmatically.
And it will be also a disadvantage mantaining it, because you will not be able to use the interface stuff (grafic layout and so on), and other people, or yourself, will not understand the calculations the same way they would if they see the views in XML. Reorganizing, changing somewhere a position could be painful.
You also will be working frequently with bitmaps, which have a fixed size, if you calculate the dimensions programmatically and stretch they will not look good. At least you would need different set of bitmaps and load accordingly.
It helps if you for example use relative layouts with rules (like above of / align at the bottom of the parent, etc), linear layouts with weights, and dip (density independent pixels). You should do programmatic layout only when it's not possible in other way. Or in some certain cases where it really-really makes things easier.