[TIMOB-27838] Android: Style default tableViewSection headerTitle using XML
GitHub Issue | n/a |
---|---|
Type | New Feature |
Priority | Critical |
Status | Closed |
Resolution | Unresolved |
Affected Version/s | n/a |
Fix Version/s | Release 9.3.0 |
Components | Android |
Labels | android, tableview |
Reporter | Michael Gangolf |
Assignee | Gary Mathews |
Created | 2020-04-08T15:20:57.000+0000 |
Updated | 2020-11-20T00:25:01.000+0000 |
Description
If you use the normal table headerTitle you have no option to style the text or create a headerView. This PR gives you at least the option to set a background/font color, border and text style using XML ressource files.
var win = Ti.UI.createWindow({
backgroundColor: "#fff"
});
var sectionFruit = Ti.UI.createTableViewSection({
headerTitle: 'Fruit'
});
sectionFruit.add(Ti.UI.createTableViewRow({
title: 'Apples',
color: "#000"
}));
sectionFruit.add(Ti.UI.createTableViewRow({
title: 'Bananas',
color: "#000"
}));
var sectionVeg = Ti.UI.createTableViewSection({
headerTitle: 'Vegetables'
});
sectionVeg.add(Ti.UI.createTableViewRow({
title: 'Carrots',
color: "#000"
}));
sectionVeg.add(Ti.UI.createTableViewRow({
title: 'Potatoes',
color: "#000"
}));
var table = Ti.UI.createTableView({
data: [sectionFruit, sectionVeg]
});
win.add(table);
win.open();
var sectionFish = Ti.UI.createTableViewSection({
headerTitle: 'Fish'
});
sectionFish.add(Ti.UI.createTableViewRow({
title: 'Cod',
color: "#000"
}));
sectionFish.add(Ti.UI.createTableViewRow({
title: 'Haddock',
color: "#000"
}));
table.insertSectionBefore(0, sectionFish);
app/platform/android/res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="headerTitleColor">#ff000000</color>
</resources>
app/platform/android/res/values/dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="headerTitleSize">16sp</dimen>
</resources>
app/platform/android/res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="headerTitleStyle">bold</string>
</resources>
app/platform/android/res/drawable/titantium_ui_header_title_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<!-- Bottom Border -->
<solid android:color="#33000000"/>
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle">
<solid android:color="#ffff"/>
</shape>
</item>
</layer-list>
Attachments
File | Date | Size |
---|---|---|
68747470733a2f2f6d6967617765622e64652f74695f74626c312e706e67.png | 2020-04-08T15:19:58.000+0000 | 14475 |
68747470733a2f2f6d6967617765622e64652f74695f74626c322e706e67.png | 2020-04-08T15:19:58.000+0000 | 13853 |
PR: https://github.com/appcelerator/titanium_mobile/pull/11592
[~michael], you raise a good point. A section header's text color, background color, etc. are currently hard-coded. This is not a good thing and it ignores the custom theme that might be applied to the app. We're actually completely rewriting
TableView
to use the JavaRecylcerView
class for 9.1.0, as can be seen in [TIMOB-27077]. It has a new "titanium_ui_tableview_holder.xml" file which defines the styles for all headers, row titles, and footers. I think this will do what you want. We should double-check this when testing the PR.Sounds great!
https://github.com/appcelerator/titanium_mobile/pull/11556