The new UICollectionViewCompositionalLayout introduced in iOS 13 have a property named decorationItems for adding decoration items conveniently, which you could use to add a background for the section.
let section = NSCollectionLayoutSection(group: group)
section.decorationItems = [
NSCollectionLayoutDecorationItem.background(elementKind:"your identifier")
]
Which is working fine for the full section.
what I want is to add a decoration view only on items since I want
rounded background only for section items excluding header and footer.
could anyone help?
You can use a property contentInsets on NSCollectionLayoutDecorationItem in order to exclude header and footer
Related
since iOS15 a strange top gap started to appear
after research i found out that
if #available(iOS 15, *) {
tableView.sectionHeaderTopPadding = 0
}
should solve the issue
however this works only for plain style table (UITableView.Style.plain), but my table is grouped and it looks like this property is taking no effect on GROUPED style (UITableView.Style.grouped)
is this a bug? how to remove the gap on grouped table?
According to the What's new in UIKit video from WWDC2021, top padding seems to have been added only to the plain style of UITableView.
Here's the part that mentions it
We have a new appearance for headers in iOS 15. For plain lists, section headers now display seamlessly in line with the content, and only display a visible background material when becoming pinned to the top as you scroll down. In addition, there's new padding inserted above each section header to visually separate the sections with this new design.
You should use this plain style in conjunction with index bars for fast scrubbing when list content is long as demonstrated in the Contacts app.
https://developer.apple.com/videos/play/wwdc2021/10059/?time=438
You can try this (this worked for me for grouped/insetGrouped)
if #available(iOS 15.0, *) {
UITableView.appearance().sectionHeaderTopPadding = 0
let tableHeaderView = UIView()
tableHeaderView.translatesAutoresizingMaskIntoConstraints = false
tableHeaderView.heightAnchor.constraint(equalToConstant: 5).isActive = true
UITableView.appearance().tableHeaderView = tableHeaderView
} else {
// Fallback on earlier versions
}
I want to implement text wrapping in heading titles.I also have group by layer added on top column header layer
Text wrapping is not working in group by header region with below configuration.How to implement text wrapping in this scenario
// Column header layer
this.colGrpModel = new ColumnGroupModel();
this.colHeaderLayr =
new ColumnHeaderLayer(this.colHeaderDataLayr, this.bodyLayr, this.bodyLayr.getSelectionLayer());
this.colGrpHeaderLayer =
new ColumnGroupHeaderLayer(this.colHeaderLayr,
this.bodyLayr.getSelectionLayer(), this.colGrpModel, false);
this.colGrpHeaderLayer.setCalculateHeight(true);
// Composite layer
CompositeLayer compositeGridLayer = new CompositeLayer(1, 2);
//Group by header layer
this.groupByHeaderLayer = new GroupByHeaderLayer(groupByModel, this.paramFilterGridLayer,
this.filterGridLayer.getColumnHeaderDataProvider());
compositeGridLayer.setChildLayer(GroupByHeaderLayer.GROUP_BY_REGION, this.groupByHeaderLayer, 0, 0);
compositeGridLayer.setChildLayer("Grid", this.filterGridLayer, 0, 1);
This is the groupBy configuration:
configRegstry.registerConfigAttribute(
GroupByConfigAttributes.GROUP_BY_CHILD_COUNT_PATTERN, "[{0}] - ({1})");
configRegstry.registerConfigAttribute(
GroupByConfigAttributes.GROUP_BY_HINT, "Drag columns here");
// To implement text wrapping in group by header region
configRegstry.registerConfigAttribute(
CellConfigAttributes.CELL_PAINTER,
new TextPainter(true, true, 2),
DisplayMode.NORMAL,
GroupByHeaderLayer.GROUP_BY_REGION);
Short answer: This is currently not supported.
Long answer:
You are misunderstanding several things.
Text wrapping means that a new line is added dynamically if there is not enough space in a cell. Since the GroupByHeader is actually one cell that spans the whole width, the cell width will never exceed to force text wrapping.
The TextPainter is a ICellPainter, so it is used to render cells.
The GroupByHeader (although a spanned cell) does not use the default cell painter. It uses the special GroupByHeaderPainter as it needs to inspect the GroupByModeland render fragments for each entry. That painter does currently not support line wrapping. And it does not use other ICellPainter internally.
That means, if you need to support line wrapping in the GroupByHeader you need to extend the GroupByHeaderPainter. As an open source project we like contributions. :)
If you want to add some sort of text wrapping in the GroupByHeader, you somehow need to specify when a text should be wrapped.
In gridColumns i am setting the rowDrag: true. This creates a default icon for all the rows having children or single rows. But i wanted to have this icon only for particular rows by setting the visibility of a drag icon as hidden.
More over if i populate rowDrag true or false conditionally, then rows for which i dont want drag icon, icon won't come but its breaking the alignment. That's why i want something explicitly where i can set the rowDrag for all rows as true and then explicitly set the visibility as hidden.
Please help me in this case. not finding any solution.
If you just want to hide the drag icon you need to override the CSS. Just assign css class to the rows you want to hide and then in the CSS file make the visibility as hidden.
Assign class as below
this.rowClassRules = {
"hide-row-drag-class": function(params) {
if (params.node.rowIndex % 2 == 0) {
return true;
}
}
};
Override CSS file
.yourTheme .yourClass .ag-row-drag{
visibility: hidden;
}
The above code assigns a CSS class to all odd rows and then will hide the row drag icon based on the CSS
https://plnkr.co/edit/dIfq96KHFmEx25BnC5ze?p=preview
Is there a easy way to just add a new form to a content element? Like I want an option selector where you can pick a color for the header.
Why not use the header_layout for that? You can customize it in the page-TSConfig
Like this:
# change labels of existing header_layouts
TCEFORM.tt_content {
header_layout.altLabels.0 = white
header_layout.altLabels.1 = red
header_layout.altLabels.2 = green
}
# add layouts
TCEFORM.tt_content{
header_layout.addItems.4 = blue
header_layout.addItems.5 = black
}
# remove layouts
TCEFORM.tt_content{
header_layout.removeItems = 3
}
That's will then set a class to the layout-number, and you can style it with css.
If you actually need a separate field, that's a bit more involved.
I'm having a bit of trouble with the layout of the GUI in Titanium Mobile (iPhone). Is there a guide/article somewhere that explains how height/width/positioning/scrolling/etc. works in Titanium Mobile?
Right now I'm stuck on two problems:
I want a scrollable window with an ImageView in the top part, and a TableView beneath it. They should both scroll together. I tried adding them both to a ScrollView and stretching the ScrollView to the size of the window, but then the ImageView is fixed to the top of the screen, and the TableView is scrollable in the bottom half of the screen, whereas everything should scroll together within the window.
I want to create an editable grouped TableView similar to the "Contacts" app on iPhone. For the blue labels on the left I created a label and added them to the TableRow, then added a textfield for the rest of the row. This works, but is it possible to give the label an 'auto' width large enough to fit the text and a bit of padding left and right, and have the textfield on the right to fill the rest of the row (I tried setting the width of the label to 'auto', that doesn't do the trick).
I hope my questions are clear, otherwise leave a comment and I'll make some screenshots describing the problems visually.
Thanks for any help!
0) Nope, there is no "layout" documentation in one nice place.
1) Make the entire display a table. Put the image view into the headerView of a table. That's how I did this:
2) I don't know about textfields, sorry. But as a fallback, you can do labels like above, and then load a separate form in another screen. That may be your simplest/best option.
var baseScrollView = Ti.UI.createScrollView({
top:0,
contentWidth:'auto',
contentHeight:'auto',
showVerticalScrollIndicator:true,
showHorizontalScrollIndicator:false,
backgroundColor:'white',
scrollType : 'vertical'
});
var iv = Ti.UI.createImageView({
borderRadius:10,
top:10,
width:300,
height:300,
image:currentWindow._rowObject["image"]
});
baseScrollView.add(iv);
var data = [];
tableView = Titanium.UI.createTableView({
top:320,
height:400,
scrollable: false,
data:data,
touchEnabled : true,
allowsSelection : false,
font: {
fontFamily:"Trebuchet MS",
fontSize:12
},
style : Titanium.UI.iPhone.TableViewStyle.GROUPED
});
baseScrollView.add(tableView);