[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
TableViewto use the JavaRecylcerViewclass 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