iOS Tutorial TableView - "B4i ListView"

Discussion in 'iOS Tutorials' started by Erel, Feb 8, 2015.

  1. Erel

    Erel Administrator Staff Member Licensed User

    The TableView view from iTableView library wraps the native UITableView control. This control is similar to B4A ListView though it is more powerful.
    Do not confuse TableView with Table class which is a custom multicolumn table:

    TableView is optimized for very large lists. It only creates internal views for the visible cells and reuses them when the user scrolls the list.
    Note that for short / meduim lists that require custom UI you can use CustomListView class.

    TableView holds one or more sections. Each section holds a list of TableCells.

    Currently there are two types of cells: single line cells and two lines cells. Each type of cell can optionally show a bitmap.

    Adding cells and sections

    Adding sections is done with TableView.AddSection.
    Adding cells is done with AddSingleLine or AddTwoLines methods. Note that these methods will create a section automatically if you didn't create one.

    These methods return a TableCell object which you can further customize. For example you can add a bitmap or use an AttributedString to change the text colors:


    Code example:
    Sub Process_Globals
    Public App As Application
    Public NavControl As NavigationController
    Private Page1 As Page
    Private TableView1 As TableView
    End Sub

    Private Sub Application_Start (Nav As NavigationController)
       NavControl = Nav
       Page1.Title = 
    "Page 1"
       Page1.RootPanel.Color = 
    Dim img As Bitmap = LoadBitmap(File.DirAssets, "smiley.png")
    For i = 1 To 50
    "Item #" & i)
    'create an item and customize it
         Dim tc As TableCell = TableView1.AddTwoLines("First line"""'the second line will be soon added
         tc.Bitmap = img
         tc.IndentationLevel = 
    Dim ColoredTitle As AttributedString
    "Second line"Font.CreateNew(19), Rnd(0x80000000, -1))
         tc.DetailText = ColoredTitle
    End Sub

    Private Sub Page1_Resize(Width As Int, Height As Int)
    End Sub

    Sub TableView1_SelectedChanged (SectionIndex As Int, Cell As TableCell)
       Page1.Title = Cell.Text.ToString
    End Sub
    Accessory Views

    Accessory views are standard views or symbols that are added to the right side of the cells.


    The following code is used to create the above screenshot:
    For i = 1 To 50
    Dim tc As TableCell = TableView1.AddSingleLine("Item #" & i)
    Select i Mod 5
    Case 0
           tc.AccessoryType = tc.ACCESSORY_NONE
    Case 1
           tc.AccessoryType = tc.ACCESSORY_CHECKMARK
    Case 2
           tc.AccessoryType = tc.ACCESSORY_DETAIL_BUTTON
    Case 3
           tc.AccessoryType = tc.ACCESSORY_DISCLOSURE_BUTTON
    Case 4
           tc.AccessoryType = tc.ACCESSORY_INDICATOR
    End Select
    If the accessory type is DETAIL_BUTTON or DISCLOSURE_BUTTON then the touch events are tracked and the AccessoryButtonClicked event will fire when the user clicks on this accessory:
    Sub TableView1_AccessoryButtonClicked (SectionIndex As Int, Cell As TableCell)
    Log("Accessory view: " & Cell.Text.ToString & " was clicked")
    Dim i As Int = TableView1.GetItems(SectionIndex).IndexOf(Cell)
    Log("Cell index: " & i)
    End Sub
    Updating the cell content

    You can update the content of the cells. The important thing to remember is that you need to call TableCell.Update to apply the changes:

    Sub TableView1_SelectedChanged (SectionIndex As Int, Cell As TableCell)
    Dim s As AttributedString
    DateTime.Time(DateTime.Now), Font.DEFAULT_ITALIC, Colors.Black)
       Cell.Text = s
    End Sub
    You can get a reference to a cell with:
    Dim tc As TableCell = TableView1.GetItems(0).Get(1'Get the second item in the first section
    Table Style

    There are two possible styles for the table: grouped or plain. It is determined by the second parameter in the Initialize method.

    In the plain style the headers and footers are floating:

    Group style:

    Adding or removing items

    It is possible to add or remove items from a list.
    First you retrieve the list of items of a specific section and then you can modify the list of cells.
    The last step is to call TableView.ReloadSection to apply the changes. Note that the changes will be animated.
    Dim items As List = TableView1.GetItems(0)
    Dim tc As TableCell 'create a new item
    tc.InitializeSingleLine("New Item!")
    0, tc)
    ExpandableTableView class:
    Last edited: Mar 8, 2015
    MarcoRome, luke2012, porvenir and 8 others like this.
  2. omidaghakhani1368

    omidaghakhani1368 Well-Known Member Licensed User

    Thank you but where are attachment file?
  3. Erel

    Erel Administrator Staff Member Licensed User

    The link to the library is at the top of the first post.
  4. Peter Simpson

    Peter Simpson Expert Licensed User

    Nice job Erel.
  5. tucano2000

    tucano2000 Active Member Licensed User

    Excellent Erel.
  6. roddy

    roddy Member Licensed User

    It's great.
  7. Shay

    Shay Well-Known Member Licensed User

    How do align text to right?
  8. Erel

    Erel Administrator Staff Member Licensed User

    The default cell types do not support other alignments. It is currently not possible to change it.
  9. walterf25

    walterf25 Well-Known Member Licensed User

    Now, i'm getting convinced to buy B4i. Great Job Erel! :D:D:D:D:D
  10. Erel

    Erel Administrator Staff Member Licensed User

    BTW, it is possible to implement an expandable list with this library (not trivial, I plan to write such an example).
  11. johan vetsuypens

    johan vetsuypens Member Licensed User

    I can't get the tableview scroll to the last row (set the last item visible)
    Tried with tableview.SetSelection (x, -1) , where x is the last row number.
    Any suggestions ?

  12. Erel

    Erel Administrator Staff Member Licensed User

    Do you see the last line if you manually scroll it?
  13. johan vetsuypens

    johan vetsuypens Member Licensed User

    Yes. If I scroll manually down, I can see that the selection that I set programmatic via the setselection is grayed.
    In the attached first print-screen, you see the tableview with selection 2 and the second print screen with selection set to 4. But the 4th section is out of view. It would be nice that the selected section was visible.


    Attached Files:

  14. johan vetsuypens

    johan vetsuypens Member Licensed User

    Hi Erel,

    It didn't work because I used the .SetLayoutAnimated(500, 0.6, 0, 0, 100%x, 100%y) tableview function.
    removing this function does solve the problem.

  15. Erel

    Erel Administrator Staff Member Licensed User

    Have you called this method from Page_Resize event (you should)?
  16. walterf25

    walterf25 Well-Known Member Licensed User

    Very nice Erel, can't wait to see the expandable list example.

  17. Erel

    Erel Administrator Staff Member Licensed User

  18. edgsistemi

    edgsistemi Member Licensed User


    You can enter multiple lines for item

    line 1
    line 2
    line 3

  19. Erel

    Erel Administrator Staff Member Licensed User

    Currently no. It requires a custom layout.
  20. Erel

    Erel Administrator Staff Member Licensed User

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice