I'm using Dialog and would like to style all my cells. I have a background image, and in the samples I can see how you can use a StyledStringElement to use that image.
However, in real use some sections use other elements. For example the last element in one section is a RootElement - but it has no BackgroundUri property to set. The same would go for boolean elements.
I found this question - What's the best way to customise all monotouch.dialog TableViewCells to the same style (Background, etc..)? which is a similar question a year and a half back. The UIAppearance styling mentioned does exist for tablecells but does not work with MTDialog. krtrego's answer to this In monotouch.dialog can RootElement be easily styled? question purports to do the job, but no styling occurred when I implemented it.
Is there now any improved way to do this? Implementing my own 'styled' versions of these other control types would be a big effort and looking at the styledstringelement this is beyond my current skill level.
Here's an example of what I'd like to achieve (the shadow below the 'tags' cell, but the element is actually a RootElement with a set of radio options beneath it). Removing the default grey lines etc is easy enough, but putting a subtle shadow on the bottom cell of each section is what I cannot work out.
Many thanks!
PS. With a normal MTDialog screen with cell backgrounds and borders removed, there is a subtle white shadow/line beneath each section as it is. If I could just recolour that I'd be a long way to where I want to be...
Subclassing the element will let you style it via overriding the GetCell method, but that gets pretty tedious. The best solution I have come across is to to make a custom DialogViewController by subclassing it, and overriding the CreateSizingSource method with your own SizingSource and GetCell() methods using the images you want for each scenario of a cell (top, middle, bottom, alone). Its a bit of code and my example wont handle uneven rows, but it is the only solution I have seen that does not modify the MT.D source code.
Here is what you would override in your DialogViewController subclass:
public override Source CreateSizingSource(bool unevenRows)
{
return new CustomSource(unevenRows);
}
Then you would make a custom source class:
public class CustomSource : Source
{
public CustomSource(DialogViewController parent) : base (parent)
{
}
public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
{
var theCell = base.GetCell(tableView, indexPath);
if (RowsInSection(tableView, indexPath.Section) == 1) //use one with top and bottom rounded
{
theCell.BackgroundView = new UIImageView(Theme.CellBackgroundFull);
theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundFullActive);
} else if (indexPath.Row == 0) //top only
{
theCell.BackgroundView = new UIImageView(Theme.CellBackgroundTop);
theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundTopActive);
} else if (indexPath.Row+1 == RowsInSection(tableView, indexPath.Section)) // bottom only
{
theCell.BackgroundView = new UIImageView(Theme.CellBackgroundBottom);
theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundBottomActive);
} else //anything in the middle
{
theCell.BackgroundView = new UIImageView(Theme.CellBackgroundMiddle);
theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundMiddleActive);
}
return theCell;
}
}
Theme is just a static class that returns UIImages, similar to the example Field Service app from Xamarin. So here I have made 8 images total. 4 to represent the top, middle, bottom and alone for an element. Each has different rounded corners to appear correct. And then a "highlighted" version of each for when its touched.
The big drawback here is you have to do this for every different styled controller you would need. If you are ok with modifying the MT.D source code, you can get a different solution that will allow you to control it at the Section level here: http://fastchicken.co.nz/2012/05/20/earnest-debrief-visual-styles-in-ios-apps-uiappearence-custom-sections-in-monotouch-dialog/
Which has the same effect, but you only need to subclass Section for each different style, which makes including multiple styles in one Root easier. A pull request was made for this change, but Miguel favored the first solution instead, seen here: https://github.com/migueldeicaza/MonoTouch.Dialog/pull/180
Related
I'm using a class extending AbstractDetailsDescriptionPresenter. The summary text is relatively long. For some reason the text gets cut off after a certain length. I could not figure out how to display the entire text without it being cut off.
I tried viewHolder.getBody().setLines(20); and other property changes but nothing seemed to have the desired effect.
This it the Presenter class I'm using:
public class MovieDetailPresenter extends AbstractDetailsDescriptionPresenter {
#Override
protected void onBindDescription(ViewHolder viewHolder, Object item) {
Video video = (Video) item;
if (video != null) {
viewHolder.getTitle().setText(video.title);
viewHolder.getSubtitle().setText(video.subtitle);
viewHolder.getBody().setText(video.summary);
}
}
}
How can I remove the text length limit/cutting off?
Here a picture to better illustrate what I mean. The text at the bottom right isn't displayed in its full length but gets cut off and adds three dots (...) at the end.
Thanks for any hints/help.
Finally found a solution: Making a custom “AbstractDetailsDescriptionPresenter” without the addPreDrawListener() method (which is causing the problem) and use it in the “DetailsDescriptionPresenter”.
body.setMaxLines(Integer.MAX_VALUE) should do the trick unless you are forcing a specific height somewhere in your LayoutParams. I assume you're setting height to wrap_content? You could try enabling Show Layout Bounds in the developer options to see if your changes have any effect.
I have a searchBar in a tableview, searching for results in a .csv file (coredata). The list is huge so the user has to scroll up many times to reach the search bar after the first search OR select the "A" letter in the Indexbar. Is there a way to add a button in the NavigationBar to show the searchBar when the user wants to get back to the beginning of the list? Thanks in advance.
searchController = UISearchController(searchResultsController: nil)
tableView.tableHeaderView = searchController.searchBar
searchController.searchResultsUpdater = self
searchController.dimsBackgroundDuringPresentation = false
override func tableView(tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
return sectionTitles[section]
}
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
//assume a single section after a search
return (searchController.active) ? 1 : sectionTitles.count
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
if searchController.active {
return searchResults.count
} else {
// Return the number of rows in the section.
let wordKey = sectionTitles[section]
if let items = cockpitDict[wordKey] {
return items.count
}
return 0
}
}
I don't know how to send the user direct to a search bar, but there are always other ways to do things, what you can do is: Reload the storyboard and then it will show again the search bar in the initial states. Take a look on this interesting post: How do I perform an auto-segue in Xcode 6 using Swift? maybe you can go to another VC and return immediately with an simple animation so the user will not notice the tricker. :)
Yes, you can add a UIBarButtonItem to your navigation bar where the action you do will scroll the table back to the top.
Just replace the code from tableView.tableHeaderView = searchController.searchBar to navigationItem.titleView = searchController.searchBar which shows the searchBar on the NavigationBar.
But when you select the searchBar then it goes upward and might be not visible on the screen, so you can take the UISearchBar instead of UISearchController. For more information please look into these thread.
This is not exactly an answer to your question, but still a solution to your problem of quickly returning to the top of your table view. You could overwrite the table view's scrollsToTop: -property to return YES. By doing so, you will enable the user to jump to the top of the table by simply tapping the status bar. This is standard behavior in many stock apps, such as Contacts, Mail, Safari, and Photos.
Beware that only one scroll view / table view / collection view on the screen may return YES in order to achieve this behavior. In the case of multiple scroll views, you can alternatively implement the UIScrollViewDelegate -protocol's
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView
callback and dynamically check, if the given scroll view should respond to the tap.
Although this is the Objective-C -way, I guess you should be able to transfer the concept over to Swift.
This approach has two advantages:
You will not clutter your navigation bar. Apples iOS Human Interface Guidelines explicitly suggest to
Avoid crowding a navigation bar with additional controls, even if it looks like there’s enough space. In general, a navigation bar should contain no more than the view’s current title, the back button, and one control that manages the view’s contents.
You will be consistent with the OS' standard behavior.
I have a Document based Core Data app with an NSTreeController supplying the content to a view based NSOutlineView. I am "styling" (setting text colour, background colour etc.) the rows based on persistent "transformable" NSColor and NSFont attributes in my data model which the end use can modify. When a new row is popped up, it displays things with the colours/fonts set in the data model. Here is the delegate/datasource code that sets the row background colour:
- (void) outlineView:(NSOutlineView *)outlineView
didAddRowView:(NSTableRowView *)rowView
forRow:(NSInteger)row
{
// Get the relevant nodeType which contains the attributes
QVItem *aNode = [[outlineView itemAtRow:row] representedObject];
if (aNode.backColor)
{
rowView.backgroundColor = aNode.backColor;
}
}
However when the style attributes change I want the associated visible rows to be redrawn with the new style values. Each time a "style" attribute is changed, I am using NSNotificationCenter to send a notification to the Outline view delegate, with the model object whose row needs to be redrawn with the changed style. This is the code in the delegate that receives the notification.
-(void) styleHasChanged: (NSNotification *)aNotification
{
NSTreeNode *aTreeNode = [myTreeController treeNodeForModelObject:aNotification.object];
[myOutlineView reloadItem:aTreeNode];
}
My assumption here is that I can navigate the tree controller to find the tree node which is representing my model object and then ask the outline view to redraw the row for that tree node. This is the "additions" code in the tree controller which walks the tree to find the object - not super efficient, but I don't think there is another way.
#implementation NSTreeController (QVAdditions)
- (NSTreeNode *)treeNodeForModelObject:(id)aModelObject
{
return [self treeNodeForModelObject:aModelObject inNodes:[[self arrangedObjects] childNodes]];
}
- (NSTreeNode *)treeNodeForModelObject:(id)aModelObject inNodes:(NSArray*)nodes
{
for(NSTreeNode* node in nodes)
{
if([node representedObject] == aModelObject)
return node;
if([[node childNodes] count])
{
NSTreeNode * treeNode = [self treeNodeForModelObject:aModelObject inNodes:[node childNodes]];
return treeNode;
}
}
return nil;
}
So sometimes this works and the row redraws, and sometimes it doesn't. The delegate method "styleHasChanged:" is always called, and the tree controller always returns a corresponding tree node (Actually of a subclass of NSTreeNode). But more often than not the outline view does not recognise the tree node, and the row is not redrawn. Its like the tree controller has given back a different tree node object to the one it gave the outline view in the past. But weirdly sometimes it does work and the right row is redrawn with the new background colour. If I collapse the row out of view and pop it open again, it is redrawn correctly.
Anyone any idea why it works sometimes and not other times?
It would be nice to be able to bind the colour/font attributes to the row and columns in some way, so that the outline view did this styling automatically with KVO, but I don't think that is possible - is it?
You spend hours/days trying to work out what you've done wrong; You write the question out; Post it; Sleep on it; and think how stupid can you be.
So I asked the NSTableRowView to redraw itself, but I had not set the new background colour. So here is the new improved (and works) version of styleHasChanged:
-(void) styleHasChanged: (NSNotification *)aNotification
{
QVItem *modelItem = aNotification.object;
NSTreeNode *aTreeNode = [myTreeController treeNodeForModelObject:modelItem];
NSInteger rowIndex = [myOutlineView rowForItem:aTreeNode];
if !(rowIndex == -1)
{
NSTableRowView *rowViewToBeUpdated = [myOutlineView rowViewAtRow:rowIndex makeIfNecessary:YES];
rowViewToBeUpdated.backgroundColor = modelItem.backColor;
}
}
Duh!
I am need of a requirement that in a list, some of the list item should exhibit different style than others. How can this be achieved in lwuit?
For Example,
List menu = new List();
menu.addItem("1. Green");
menu.addItem("2. Red");
menu.addItem("3. Blue");
In this list Each item should have the style of representing its color(i.e) Green should have green Background and Red should have Red Background. Is it possible in LWUIT? How can we achieve this?
Thanks in Advance.
You must create a cell renderer for this use case. Just derive 'DefaultListCellRenderer' e.g.:
DefaultListCellRenderer rend = new DefaultListCellRenderer() {
public Component getCellRendererComponent(Component list, Object model, Object value, int index, boolean isSelected) {
Component c = super.getCellRendererComponent(...);
c.getStyle().setBgTransparency(255);
c.getStyle().setBgColor(theColorYouWant);
return c;
}
};
Then set this renderer to the list. You will probably need some additional refinements here since this is a WAY oversimplified example of a renderer.
This is one way of doing it.
1. Create a component for each item in the list
2. Add the bg color and text to it.
3. Once done, add it to a form or any other custon component you have created.
Other way:
You can create your own List renderer. Here is some information on how you can do it
Based on Miguel's response to another question (see below) I was able to get a label in my section header. But I'm looking to take it a little further with 3 lines of text. My first thought is instead of creating the header with a single label, is there a way to create it with a uiview where inside that view you can place whatever items you want?
Section headers and footers can either be specified as strings or UIViews, there is sadly, nothing in between.
If you want to have custom headers/views, you would need to create a UILabel and use that in your constructor to the Section type (only available for the Elements API).
Something like:
var header = new UILabel (new RectangleF (0, 0, 320, 48)){
Font = UIFont.BoldSystemFontOfSize (22),
BackgroundColor = UIColor.Red
}
new Section(header, footer) {
...
}
Yes, you can.
The parameters to the Section constructor are either two strings of text, or two UIViews. In the sample above you merely created a UIView of type UILabel, but it could be anything you want, with as many subviews as you want or need.