Android Tutorial Creating a table view based on ScrollView

Discussion in 'Tutorials & Examples' started by Erel, Dec 17, 2010.

Thread Status:
Not open for further replies.
  1. Erel

    Erel Administrator Staff Member Licensed User

    A much improved version is available here.

    You can use the code in this example to show data in tabular form.

    [​IMG]

    The table is made of two main views. The header row is made of a panel with labels. The main cells component is made of a ScrollView with labels as the cells.

    You can modify the code to change the table appearance.
    Some of the settings can be changed in Sub Globals:
    Code:
    'Table settings
        HeaderColor = Colors.Gray
        NumberOfColumns = 
    4
        RowHeight = 
    30dip
        TableColor = 
    Colors.White
        FontColor = 
    Colors.Black
        HeaderFontColor = 
    Colors.White
        FontSize = 
    14
    Adding data to the table:
    Code:
    'add header
        SetHeader(Array As String("Col1""Col2""Col3""Col4"))
        
    'add rows
        For i = 1 To 100
            AddRow(
    Array As String(i, "Some text", i * 2"abc"))
        
    Next
        
    'set the value of a specific cell
        SetCell(03"New value")
        
    'get the value 
        Log("Cell (1, 2) value = " & GetCell(12))
    Table events:
    Code:
    Sub Cell_Click
        
    Dim rc As RowCol
        
    Dim l As Label
        l = 
    Sender
        rc = l.Tag
        
    activity.Title = "Cell clicked: (" & rc.Row & ", " & rc.Col & ")"
    End Sub
    Sub Header_Click
        
    Dim l As Label
        
    Dim col As Int
        l = 
    Sender
        col = l.Tag
        
    Activity.Title = "Header clicked: " & col
    End Sub
    The code is not too complicated and you can further customize it as needed.
     

    Attached Files:

  2. junaidahmed

    junaidahmed Well-Known Member Licensed User

    Can not Clear Record in Table

    This examples is fine but can not clear existing record when populating new record.pls advise
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    What do you mean with clearing existing record?
     
  4. junaidahmed

    junaidahmed Well-Known Member Licensed User

    Should not append Record when populate another dataset,So we need to clear (Delete) existing record before poupulating new dataset.
     
  5. Erel

    Erel Administrator Staff Member Licensed User

    Do you want to remove a single row or all rows?
    To remove all rows you can use:
    Code:
    Sub ClearAll
        
    For i = Table.NumberOfViews -1 To 0 step -1
            Table.RemoveViewAt(i)
        
    Next
        Table.Height = 
    0
    End Sub
     
  6. junaidahmed

    junaidahmed Well-Known Member Licensed User

    Thanks for your quick replay
     
  7. Erel

    Erel Administrator Staff Member Licensed User

    LoadCSV and SaveCSV added. This is included in TableExample1.1.zip in the first post.
    This is done using the new StringUtils library.
     
  8. junaidahmed

    junaidahmed Well-Known Member Licensed User

    I have seen the Tabular example using StringUtil library it works fine,if you update Gridline that will become an Grid like in Basic4PPC.so please try to update the Gridline method.Please revert back soon.
     
  9. junaidahmed

    junaidahmed Well-Known Member Licensed User

    still you have not updated gridline for tabluar view,pls update ASAP
     
  10. Erel

    Erel Administrator Staff Member Licensed User

    I don't think that it will be added in the near future.
     
  11. kickaha

    kickaha Well-Known Member Licensed User

    When I tried this out and added some more data, the fullscroll (to the bottom) stopped one short of all the entries. Is this a bug or am I missing something?

    All I did was add a button, the click event of which was
    Code:
    Sub Button1_Click
    AddRow(
    Array As String(number, "Some text", number * 2"abc"))   
    number=number+
    1
    SV.FullScroll (
    True)
    End Sub
     
  12. Erel

    Erel Administrator Staff Member Licensed User

    Can you see the last row? Is it only the scrolling that doesn't get to the last row?
     
  13. klaus

    klaus Expert Licensed User

    I just tried it, it's only the scrolling.
    It seems that the OS executes SV.FullScroll(True) before adjusting the Scrollview height.
    Adding a DoEvents before SV.FullScroll(True) solves the problem.
    Code:
    [FONT=Courier New][SIZE=2][COLOR=#0000ff]
    [SIZE=
    2][FONT=Courier New][COLOR=#0000ff][SIZE=2][FONT=Courier New][COLOR=#0000ff]Sub [/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]btnAdd_Click[/SIZE][/FONT]
    [SIZE=
    2][FONT=Courier New] AddRow([/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Array[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]String[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"Test"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"Some text"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"76.3"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"-23"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])) [/SIZE][/FONT]
    [/SIZE][/
    FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff] DoEvents[/COLOR][/SIZE][/FONT]
    [/COLOR][/SIZE][/
    FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] SV.FullScroll([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]True[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT][/SIZE][/FONT]
    [
    FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]End Sub[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
    I tried also adding SV.FullScroll(True) at the end of Sub LoadTableFromCSV, and it doesn't scroll at all.
    Addign DoEvents before SV.FullScroll(True), it works well.

    Best regards.
     
  14. Erel

    Erel Administrator Staff Member Licensed User

    It makes sense. The views do not layout themselves immediately.
     
  15. kickaha

    kickaha Well-Known Member Licensed User

    Thanks Klaus, I will give that a try.
     
  16. chrisf

    chrisf New Member Licensed User

    Is it possible to have two lines of data per row?

    I have a query against a database and need to display more details than I have room for on teh screen in the table view?

    Thanks in advance
     
  17. klaus

    klaus Expert Licensed User

    Yes, you can create almost whatever you want.
    Have a look at ScrollView Examples Summary, there several examples of tables and databases.
    You could set 2 Labels one on top of the other instead side by side.

    Best regards.
     
  18. chrisf

    chrisf New Member Licensed User

    Thanks for the speedy reply. Much appreciated.
     
  19. hzimmer3

    hzimmer3 Member Licensed User

    Table with scrollview with horizontal scrolling

    I am new to Basic4Android and I have just studied the TableExample1.2 which is interesting for reading a csv-table.
    However I wonder how I can get the scrollview table to scroll horizontally in case the csv-table is wider than the screen width.
    I have set the list width to 200%x but I cannot find out how I can get the
    scrollview to scroll horizontally.

    Is there a property which I need to set?

    Any advise would be much appreciated,

    Helmut
    Cologne/Germany
     
  20. hzimmer3

    hzimmer3 Member Licensed User

    Table with scrollview with horizontal scrolling

    I am new to Basic4Android and have just studied the TableExample1.2 which
    I find very interesting for reading csv-tables.
    However I wonder how I can arrange that the scrollview is able to scroll horizontally in case that the csv-table is wider than the screen width.

    I have set the list width to 200%x but cannot find a way to enable horizontal scrolling in the list.

    Is there a property which I need to set?

    Any advise would be much appreciated,

    Regards

    Helmut
    Cologne/Germany
     
Thread Status:
Not open for further replies.
Loading...
  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