I am trying to implement a virtual UI ID card that would look like a card on all devices. I will need 4 rows total and 3 columns. I also would like to have the width about twice the size of the height (2:1 ratio).
1) I considered the border layout. but it seems like it spans the whole screen size. Quickly the size of my card width was like 5 times the size of the height. So that did not visually work. I suspect the Gridlayout would suffer from similar issues.
2) I used the table layout (4 X 3). I tried using padding / margin and it seems like the look & feel of the card UI quickly gets out of proportion on tablets while looking decent on phones since phones seem to naturally have a similar width to a card.
3)I tried specifying widthPercentage as a constraint on the table UI. Again this approach sufferred from similar issues. Since on smaller phones I would have to remove add small percentage margins but on big tablets I may need bigger margins. This can get quickly challenging to get right / test.
I am thinking now of attempting to take one of the following approaches:
1) I am not sure if there is a way to specify the TextField width based on the number of characters. For example when the card issue date grows on tablet it can fit 10s of characters where I want it to fit only couple for moht(mm) and 4 chars for year(yyyy). Is there a way to do that?
2) Can I tell the screen width in inches or mm ? I can implement a function to attempt and scale padding / margins on different screen size.
I appreciate any feedback.
See the Kitchen Sink demo which has the default "cards" mode in the start. It uses grid layout with special cases to fit the columns in a sensible way for Tablets/Desktops.
https://www.codenameone.com/demos-KitchenSink.html
Related
I have a set of pages that look like this:
I have the content in grids with * Heights and Widths so the grid correctly scales when the entire window resizes. I would like the text to resize with the grid. Basically I would like the user to resize from this:
To this:
(preserving white space)
One way to do this would be to wrap the TextBlock in a ViewBox with margins on the right and bottom (for Grid.Row="3") to account for white space. But because I have several pages with different lengths and line counts I would have to set the margin specifically for each page otherwise the text sizes would differ on each page. Is there a better way to do this??
I don't think there is a better way to do this. There are different ways. But, I think it isn't just a matter of opinion that they would not be better.
Ways I can think of.
Render your text offscreen, rendertargetbitmap that so you've got a picture. Change your textblocks on screen to images and stretch them.
Or
Work out the size your text wants to be. Then do some calculation comes up with a different fontsize which is "better". This is a lot easier to write a description of than do.
In my opinion.
A viewbox is easier to implement. Way less error prone than calculations. Will give at least as good results as rendering to a picture.
I just want to add one more solution to the ones suggested by Andy, which is more of a scientific approach and takes a bit of practice to master.
Suppose you have to find a function F, which maps one or more variables to a desired single value. In your case that would be a function F, which takes aspect ratio of the window as input and outputs an appropriate font size.
How can you find such a function?
Well... you don't need to do any math yourself!
First, you need some data to begin with:
1. Resize the window randomly
2. Calculate aspect ration (X)
3. Pick an appropriate font size that looks good enough (Y)
4. Repeat the measurement 7 to 10 times (sorry data scientists)
5. Enter the data in Excel - one column for X and another one for Y
6. Insert a scatter chart
7. Choose the best trendline for your data, but avoid the polynomial one
8. Display the trendline equation and use the expression in your code
Now I should mention the pros and cons of this regression technique.
Pros:
1. It can solve a wide range of tricky problems:
"I use this 3rd party control, but when the text is too long it overlaps the title bar. How to trim it so it doesn't go beyond the top border?. Deadline is coming!"
2. Even if it doesn't solve the problem perfectly, the results are often acceptable
3. It takes minutes to try out unlike spending a day refreshing your math skills
Cons:
1. The biggest problem is that to keep it simple, you often lower the number of
variables by assuming some of them to be constant. In this post I've assumed that
the font family won't change for example, neither the font weight.
2. If any of the assumptions does not hold the final result could be even worse
This technique is fragile, but powerful. Use it as your last weapon and never leave magic expression like
fontSize = (int)(0.76 + 1.2 * aspectRation) without documenting how it came to be.
I'm working on a view that's implementing a multi-column text layout using CoreText (using CTFramesetter).
CoreText usually fills each frame completely, so when I call CTFramesetterCreateFrame with three rects that make up my columns, I get a layout that's similar to the following image:
So the left column is filled completely, the middle column partially and the right column is empty. But instead, I'd like the text to distribute over the three columns so that they take up the least vertical space possible, like in this image:
How to achieve this with CoreText?
I don't mind going low-level here, even drawing each CTRun by hand is an option if necessary.
One idea I came up with would be to create a large frame with the width of a column and then figure out which CTLine to draw in which column. But this has a few limitations:
It would only work if all columns had the same width.
It does not work with clipping paths.
Unfortunately, I'll need to use clipping paths (as in kCTFrameClippingPathsAttributeName) so this idea is out. I could live the fixed column width limitation, though.
Another idea would be to reduce the height until the last frame overflows but that's a pretty brute-force way that surely wastes resources.
(BTW, due to compability requirements the use of TextKit classes like NSTextStorage isn't possible; the resulting view is intended to be used on Mac and iOS, but it needs to work on iOS < 7)
Since there doesn't seem to be a non-expensive way to solve this, here's how I've done it:
I did go with the "reduce the height until the last frame overflows" approach. To reduce the height, I simply have another clipping path (kCTFrameClippingPathsAttributeName) which is a rectangle that fills the bottom of the view to the required height.
The probably most expensive but simple way would have been to increase the rectangle height until finally the text doesn't fit inside the last frame any more.
Instead I've implemented a binary search for that. For my demo app, I usually find the correct height after 8-10 recursions which still is expensive but at least it's pixel-perfect and doesn't rely on any other information other than "did the last frame overflow".
I have a fundamental question that I would like to get addressed. I'm almost done with my universal app and I was told that I need to specifically customize the UI controls for iPad screens (e.g) labels, buttons. So, for example, I have the following code in viewDidLoad event in one of my xibs.
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone)
{
[_lblRandomDisplay setFont: [UIFont fontWithName: #"Helvetica Neue" size:100]];
}
else
{
[_lblRandomDisplay setFont: [UIFont fontWithName: #"Helvetica Neue" size:250]];
}
Here _lblRandomDisplay is UILabel IBOutlet property and I increase the font for iPad and reduce it for iPhone. Is this the way to approach the iPad screens or does iOS automatically scale the screen when viewed on iPad?. As a side note, I have named the xib filenames as filename~iphone.xib and filename~ipad.xib and it loads correctly based on the device selected in the simulator.
In those lines, I have a Settings screen (not using the Settings bundle) using UITableViews that I have designed for iPhone and programmatically load data from NSArray. When loaded on iPad using the settings~ipad.xib (copied the controls from settings~iphone.xib), I haven't adjusted the row height specifically for iPad to make it look bigger. The screen shows OK on the iPad but it looks smaller. Is this the right approach or what is the best way to approach this?
Please advise.
The advice that you have been given, to customise UIControls for screen size, seems wrong. UIControl sizes, and text sizes in general, should remain the same on all devices. These items are designed in sizes appropriate for readability and touchability, neither of which has any relationship to screen size.
iOS is designed with this in mind. If you make a universal project with iPad and iPhone xibs or storyboards, you will find that user interface widgets are the same pixel/point size regardless of the device (I am ignoring Retina/non-retina distinctions here for simplicity). For example, the default size of a standard button is 73 x 43 with a font size of 15pt in both cases. A Navigation Bar is 44 px/points high on both devices. This is as it should be. If we assume that reading distance on an iPhone, or an iPad mini, or an iPad is approximately the same, then there is no reason to adjust text size. The idea of redesigning for the iPad is really that you can get more information on one screen, not a bigger version of the same information.
There are two circumstances in which iOS "scales the screen":
is if you create an iPhone-only app and run it on an iPad. Then there is a user option to run it at double size. In this case everything including font sizes are scaled up, but this is done by pixel-doubling, so the effect is a big blur. Take a look at it - and you will understand that this is precisely the reason why you should not design in this way.
if you use a single xib/storyboard for both iPhone and iPad, and rely on autolayout (ios6+) or autoresizing masks (ios5-) to auto-adjust the layout for different screen sizes. This method can -depending on your settings - proportionally resize image content of views, but will not dynamically resize text content, if you wanted to do that you would have to adjust in code. This is not a good way of designing an app anyway, it is better to make a dedicated design for iPhone and for iPad in separate xib/storyboards as you have done.
I expect when you say the iPad "looks smaller" you mean, the UI appears smaller as it gets lost on the larger screen... but the answer is not to just enlarge the size of your data, it is to reconsider your layout to fit more data on each screen. That is why with the iPad Apple provided the SplitViewController and introduced the pattern of the Container ViewController.
I wonder if you are also raising a related, but separate issue of proportional sizing of views for graphic design purposes (you mention font sizes of 100 and 250pt, not usual sizes for UI controls labels). You may want the look of your app to scale with the screen, a bit like the so-called fluid web design approach to variable window sizes. So for example you may have a graphic device based on a huge letter 'A' that fills your iphone screen, and want that letter to similarly fill you ipad screen. In this case you may need to set font sizes as in your code example.
You are certainly doing the right thing by not altering the row height of your table cells for the different devices, but for the larger screen you can of course make your table height larger, and accomodate more table cells in your view.
All of these comments are a bit general, as you haven't posted enough detail of your problem. It often helps to post a picture or two...
Is it possible to decrease the default width of a Panorama control's PanoramaItems?
They can be made wider by specifying Orientation="Horizontal" and a width larger than 432. However, specifying a width less than 432 does not result in a smaller PanoramaItem. It's minimum width is 432 always.
I played around with the templates but couldn't figure out how to achieve this.
I'm afraid there isn't anything you can do about that. The Panorama has the width of its items baked in as 48 pixels less that its own width.
PanoramaItems are not designed to have a smaller width. If you wanted to do this you'd probably need to create your own version of the Panorama control.
Don't do this though!
Not only would it be a lot of effort to get right you'd break user expectations about how the panorama would work.
Would/could you allow multiple items to be displayed at once?
What would be the impact on navigation?
How would you communicate to users that your app works slightly differently to all the other ones on the phone?
How would you justify the mental cost to the user of the different behaviour?
What would the impact be on the item headers if they were smaller?
With the PanoramaItem width set to at least (almost) the width of the screen it allows the user to see and focus on a single item at a time.
Also, potentially having fewer items on screen at once can also help with performance too.
My developer's box has a screen resolution of 1680 x 1050. I'm developing a full-screen Silverlight 3 application that I'm considering deploying to the Internet. So, I want to make sure the application looks good on a variety of screen resolutions. I just started testing on other boxes, the first one having a screen resolution of 1024 x 768. During the test I found some of the pages on the application were partially truncated. It seems the controls on the page didn't adjust for the lower screen resolution. So, I'm looking for some tips on how to make a Silverlight application, to the extent possible, adjust for screen resolution. For example, are there things one should or should not do on XAML to make adapting to screen resolution easier? Should I just optimize for a minimum screen resolution? Your thoughts and suggestions are welcomed.
You can easily enforce a minimum acceptable resolution by setting the MinHeight and MinWidth properties of your root visual. (Of course, this should be less than the minimum screen resolution to account for browser chrome.)
Try to specify absolute Width and Height only when necessary: for example, for images or icons of fixed dimensions, or for obvious cases like TextBoxes (whose width should reflect the average length of the data entered).
Grid panels are excellent for mixing scalable and fixed layout areas. The star sizing specification takes a bit of getting used to--it's not as simple as a percentage-based proportioning--but it's much more flexible, especially in combination with row/column min/max dimensions.
You don't really need to test on multiple resolutions unless you're interested in testing a range of dots per inch--just resize the browser to approximate different screens. Since there's always a bit of give and take depending on the user's browser configuration, you'll have to account for some variance anyway.
You can make your application scale with the Silverlight Toolkit ViewBox or make it strech with layout controls like the Grid, StackPanel, and WrapPanel. Make your main UserControl have a Width and Height of Auto (or remove the width and height entirely) and the size of the app will resize to the size of the parent div (the default HTML template uses 100%x100%). Then just resize the browser accordingly. IE8 has developer tools that can help you see your app resized to specific screen resolutions.
Testing on a variety of screen resolutions is always a good idea.
I covered the resizing of elements and making it resolution independent on another thread.
You can have a look here, there are multiple ways to sizing and resizing things automatically.