Here are the steps to create a list that contains a complex item style
Designing in photoshop
First, I will need to design the list item as a View components and add the other components to this view.
So, I have started with creating the View and added the label, arrow imageView, icon imageView, and the separator. And placed each of my designs in the corresponding group. Time to publish it.
Developing the list in Titanium
Ok now the application is published to Codly Cloud service and I got the source code from my account.
Here is the code for this item I just got from the Codly service:
And here is the style for it:
Editing the View Xml
I will need to add the ListView, Templates and ItemTemplate and move our view inside it.
I also need to add the bindId for the components that will change.
Edit Item Style
Let’s add the style step by step. First we add the lst style. It will get the top and the width of our View. Let the height be the rest of the view.
We will change the height of the View to be 100% to fill the height of its parent, the item template. Also the top of the view to be “0” to start at the top of the item.
The rest of the style will be used as it is. No modifications needed. And we are done styling our ListView.
Adding Some items
Ok we are ready to add some code to test our list. Lets go to our controller and add the logic to generate some list items.
Let’s assume we have this array of data that we will use to fill in the list data.
Now let’s add this data to the list
And we are done. This is the final result of this tutorial.