I have a VLayout with two DynamicForms in it . The titles of the first one are short enough to not get wrapped. The second one has longer titles, so I use it like setWrapItemTitles(false);
Turns out that the second form gets to be wider than the first one, even when there is a lot of extra space in the row, enough to fit the titles and keep the original width. This looks bad when having forms grouped.
Is there a way to avoid wrapping but not add so much extra space that is not used?
A workaround I found is to manually setting enough space for the title to make it fit will not cause the wrapping and will not add additional unused offset.
setTitleWidth(150); //Or enough width
However I would prefer a less "hardcoded" solution if available.
Related
This is the most complicated UI related problem I've come across yet. I've been trying to find a solution for literally weeks but no avail. Let em explain.
In this app I'm working on, I need to display a certain list. It's actually a schedule. Here's how it should look like,
The fields circled by red circles don't change. To explain what change means I have to show you this.
Its a set of filters which the user can show/hide certain fields and the ones that are circled in the first image are static ones. They can't be toggled on and off.
Now the problem arises with the ones that can be toggled. Here's what it looks like if you turn off the Show Actions flag.
A new label with a blue background replaces the bottom one you can see in the first image.
Here's another one where you disable Show Time option and the time labels are gone (yes it affects only for some. Its expected).
If this filter list were an option list, it would have been easy. Just create a custom cell for each option and you're good to go. But unfortunately the user is able to toggle multiple filters! For example the user can turn off both Show Actions and Show Time and it'd look like the last image but the bottom label would have the blue label in the third image.
To top it all off, the cells' height is dynamic. In iOS 8 creating self resizing cells are easy enough from the IB when you could just add auto layout constraints and done.
But it seems to me that creating these cells from the IB isn't an available option to me. Simply because there are way too many filter combinations a user can make. So the cell's subviews need to adjust to it.
My question is how can I create a dynamic cell like that? My best guess is through code, right? I haven't written my UI in code before so I tried creating a test project to familiarize myself with it. But the problems I'm facing is setting fixed frame sizes makes the dynamic nature obsolete. And how can I move a view to fill up a removed view's space (Last image. Time labels are gone so the name and the id labels move to the left to fill that space).
I know this question is a little too broad. I'm not asking for a straight answer either. I'd really appreciate some pointers, or even a better suggestion on how to approach this because I'm truly at the rock bottom on this issue.
Thank you.
It's hard to give you any precise help since your question is so broad. First, I would recommend watching the 3 videos on Auto Layout from the WWDC 2012 (sessions 202, 228, and 232).
To answer your one example, how to move a view to replace a view that's removed. You would need to make two left edge constraints from the view with the text (Kund Alof...). One with a constant of 0 to the time label with a priority of 1000 (that's the default), and another to the left edge of the cell, also with a constant of 0, but with a lower priority, say 900. As long as the time label is present, the constraint to it will determine the position of the text label, but when it's removed, the lower priority constraint to the left edge will take over and move the label over to the left edge.
I am trying to repduce a similar sort of layout as in the screenshot below from the Digg app..
Notice that each list entry has a title in bold followed by the source, posted time and finally if there is enough space the start of the description line.
The question is what is the best way to achieve this in iOS? With some posts having longer titles than others I cannot simply say that the title label is 40px high and then place the Source label at 45 as the title will sometimes be longer and sometimes shorter.
Do I have to calculate the height of the label based on its contents before arranging the layout or is there some better way of doing this in iOS so that the views 'below' are automatically moved down?
Another alternative would be some sort of rich text label that I could add all the text to and have it automatically wrap round moving the later text down but I cannot find any sort of control in standard iOS / Xamarin (MonoTouch).
Any pointers would be greatly appreciated?
If you are using a storyboard the simplest way to achieve this result is to define different prototype cells. For example, you could define four different prototype cells, each one with a different layout like those shown in the example picture you provided. You can dequeue the appropriate cell based on the content you want to display so there is no need to adjust the layout in the code.
If you are doing everything in code, it's a lot more complicated since you have to build your own "layout engine" to adjust size and position of the views in your cell. You can have a look at XibFree or use MonoTouch.Dialog as suggested in the comments.
I am having a usability issue where in an app screen, there may be too much text and I have nowhere to put that text.
I am attaching a screen shot of my screen. You see how the text on top has more text, but there is no room to put that text. So the text just ends in ....
What is the common way people handle this kind of a situation?
Thanks!
Redesign your UI so you have more room for that text. Maybe your content will need to scroll. You will need to change that label so that the max number of lines is greater (or 0 for unlimited), and make the frame larger to accomodate more lines. You can also reduce the font size a little to decrease how much extra space you'll need to give it.
If you really wanted to, you could use a UITextView for that text, which allows the text to scroll easily (it's a UIScrollView subclass). Then you could just scroll that text, though it wouldn't be very good UI and you would still want it to be more than one line, because scrolling when only one line is visible at a time would make it hard to read.
(please forgive my english)
I'm new at IOS developing but I've a good skill on other programming languages (mainly c#).
I'm trying to develop a test app with a main window.
Inside that window there is a scrollview with fixed size. inside that scrollviewer there is a view containing some stacked couples of one TextField and one Label: I can't know - ad design time - how many "rows" of them I have to put into.
My problems is:
I can put on the view the first couple (a textfield and, next, a label). Label size can be one or several rows high ,so I've to set multiline and sizeToFit
How can I put the second couple (and so on) without overlap the existing labels..? I can't use a table because between rows there are other labels (title of section).
Do I have to calculate the height of each label and programmatically calculate where to draw the next? Is there a more efficient way?
I don't need code, please just some hints or some keyword to googling on.
Many thanks.
I don't see why you can't use a UITableView, you can set up cells with all the controls you need in it. Either way, using a UITableview won't make the job any easier (just more memory efficient if you have many rows).
The only way that I see is, as you said, to calculate where the next 'row' should be placed (depending on the height of your previous rows). You'll also need to calculate the entire height, in order to set it to the contentSize of the UIScrollView.
Instead of UILabel you can also use a non editable UITextView, since it'll be easier to get its size (after you set the text, you can set the size of a UITextView to be equal to its contentSize)
By default WP7 buttons are surrounded by a black space of 5ish pixels. I'd like to remove this, but I've tried setting the Margin, BorderThickness, Padding properties to be a Thinkness of zero, but this seems to have no effect on this mysterious space. Any clues what exactly this spaces is and how I might get rid of it.
Thanks,
Robert
This border is specifically added to increase the size of the button as a touch target. Having this padding makes it easier for people to be sure that they are touching the control they are aiming for.
If you are trying to remove this to fit more controls on the page be aware you're probably making it easier for users to accidentally tap the wrong control.
If you really must do this you must retemplate the button control.
The only difference you need to make to the default template (you can get a copy of this from Blend) is to change the margin on the controller from
<Border ... Margin="{StaticResource PhoneTouchTargetOverhang}">
to whatever value is appropriate for you.
Please also note that by changing this value you're likely to create issues for yourself when smaller screen devices are introduced.