2 possible problems with TableView in G2

Solar2D Advanced Graphics
#1

I’m not using compatibility mode v1 by the way, full G2 with 2076 and 2085 (same effect)

  1. I have a background where 2 animations (transition) is going on. I’m then displaying a tableview in a container (the new one from G2) in the middle of the screen (about half of the screen). The tableview is displayed but as soon as a scroll the list, one of my animation (transition) in the background stops. Only if a scroll. 

  2. Having the tableview in a container is perfect for me but the single line between a row category and a single row is not full width, the listview for example is 380px large but that single line is missing about 10 pixels on the left and the right.

       With those values:

         nolines = false,

         hideBackground = true

* Screen shot for #2 below where you see the white line not the same width as the rest, it was ok pre G2

#2

I can confirm #1. There is some transition problem with tables. I have a slide to delete option and fade in the delete button, the transition is never completed. 

#3

Here is code to reproduce problem with item 1. Bug reported, case 28269.

[lua]

– Copy paste into main.lua

local widget        = require(“widget”)

local tableView   = widget.newTableView {

    left            = 0,

    top             = 200,

    topPadding      = 0,

    width           = display.contentWidth, 

    height          = display.contentHeight-200, 

}

    

local text = display.newText(“DRAG ON THE TABLE”, 150, 100, native.systemFont, 25 )

local function move()

    local function moveDown()

        transition.to(text, {y = 150, onComplete = move})

    end

     transition.to(text, {y = 30, onComplete = moveDown})

end

move()

[/lua]

#4

I can reproduce #1, it’s very odd. Thanks for submitting the report.

@claudeturcot, for #2, the line indent mimics iOS as far as I can tell, so it’s intentional. One alternative, for full-spanning lines, is that you turn the lines off (internally) and then add a line to the top or bottom of each row in your rendering function.

Thanks,

Brent

#5

Brent, ok I will try that but what is funny (that’s why I think it’s not intentional) is that sometimes the line doesn’t have the same indent on the left end side. 

Anyway, not a big deal and very happy that jonjonson found a way to reproduce the #1 problem, that is more critical!

Now just need to see if somebody will find a way to fix or reproduce the jerkiness of some animations that was not there before. 

Thanks

#6

I’m observing the same line indent issue. I don’t know of any IOS native apps from Apple that exhibit this. Besides, we develop not just for Apple. Suggest this “intentional” design element is either removed or made optional. Thanks!!!

#7

@ksan - I think the indent is present in almost every iOS 7 tableview (settings, contacts, messages), at least on the left. The indent on the right is only present on lists such as the contacts where an alphabet picker takes up the right side. But I agree this should probably be optional.

@Brent Sorrentino - Setting noLines = true does nothing for me. The lines remain, despite having no lineColor passed to insertRow. More importantly, when lines are present they flicker very badly whilst the tableview is being scrolled. Is this a known issue in G2?

#8

Hi @max84,

Your issue may be related to something else we’re investigating, but can you post your widget code so I can see how you’ve set it up? Remember to surround it with “lua” code brackets for readability.

[lua] [/lua]

Thanks,

Brent

#9

@Brent, here’s some code for you.

TableView creation:

[lua]

self.slideList = widget.newTableView {

      width = 665,

      height = screenHeight,

      hideBackground = true,

      – backgroundColor = {0.24, 0.16, 0.11},

      noLines = true,

      onRowRender = function(event)

          – insert stuff here

      end,

      onRowTouch = function(event)

          – something here

      end

}

    self.slideList.anchorX = 0

    self.slideList.anchorY = 0

    self.slideList.x = screenWidth

    self.slideList.y = 0

[/lua]

And here is the insert code:

[lua]

– category ‘header’ row

    self.slideList:insertRow

    {

        isCategory = true,

        rowHeight = 100,

        rowColor = {

            default = {0.24, 0.16, 0.11},

        }

    }

    – Create all our rows

    for i = 1, #self.brands do

        – Insert the row into the tableView

        self.slideList:insertRow

        {

            isCategory = false,

            rowHeight = 150,

            rowColor = {

              default = {0.24, 0.16, 0.11}

            },

            – lineColor = { 0.34, 0.23, 0.16 },

        }

    end

[/lua]

#10

[quote name=“max84” post=“217144” timestamp=“1385413243”]@ksan - I think the indent is present in almost every iOS 7 tableview (settings, contacts, messages), at least on the left.[/quote] You are right of course but the problem is the bleed through of the category colour if we are trying to do the new Apple indented line thing. In any case this behaviour should best be developer selectable.

#11

I want to make it clear what I’m talking about here. I used the LIstDemo2, changed the row color to a vibrant red and added lineColor. See the result in attached screen shot. The row color is bleeding through to the empty space left by the line that is not drawn for the full width of the row. I circled those with black. 

#12

The 15px indent should only show up for tableViews using the IOS7 widget theme.  On Android or if you specifically use the previous widget_theme_ios, you will get that line covering the whole area.

As for the background bleeding through, that is a bug I believe that has been filed.

In the mean time, if you are using a colored tableView (which on iOS 7 is kind of against the pattern), you can drop a rectangle behind the tableView that’s the same color as  your rows as a work around.

Rob

#13

Thanks for the confirmation that different platform themes handle this need. That helps a lot. Also thanks for the report on bug being filed. Appreciated. 

#14

Bug #26439 for reference.

Have you also tried setting the backgroundColor property in the tableView constructor to match the row colors?

#15

Thanks for the added suggestion. Did not try backgroundColor but will do. In this app each row is one of 6 colors pointing out to a location on a color coded map so the bleed can be in one of six colors. Setting a single backgroundColor therefore may not help much but still something to try. This is not a major issue so I can wait for the reported bug to be fixed. Thanks

#16

#2 has been a problem for a while in TableView.  Pre - GFX2.0 as I am on build 1244 and see the same thing.  IMO, It seems that if you set noLines=true, it should have the ROW color show through rather than the TABLE background color.  If that were the case you could, as you suggest, make any kind of line that you want using , full width, indented, dotted, thick, thin, whatever.  I’m not sure how the bug is described in 26439, but that’s how it seems to me it should work.

#17

I can confirm #1. There is some transition problem with tables. I have a slide to delete option and fade in the delete button, the transition is never completed. 

#18

Here is code to reproduce problem with item 1. Bug reported, case 28269.

[lua]

– Copy paste into main.lua

local widget        = require(“widget”)

local tableView   = widget.newTableView {

    left            = 0,

    top             = 200,

    topPadding      = 0,

    width           = display.contentWidth, 

    height          = display.contentHeight-200, 

}

    

local text = display.newText(“DRAG ON THE TABLE”, 150, 100, native.systemFont, 25 )

local function move()

    local function moveDown()

        transition.to(text, {y = 150, onComplete = move})

    end

     transition.to(text, {y = 30, onComplete = moveDown})

end

move()

[/lua]

#19

I can reproduce #1, it’s very odd. Thanks for submitting the report.

@claudeturcot, for #2, the line indent mimics iOS as far as I can tell, so it’s intentional. One alternative, for full-spanning lines, is that you turn the lines off (internally) and then add a line to the top or bottom of each row in your rendering function.

Thanks,

Brent

#20

Brent, ok I will try that but what is funny (that’s why I think it’s not intentional) is that sometimes the line doesn’t have the same indent on the left end side. 

Anyway, not a big deal and very happy that jonjonson found a way to reproduce the #1 problem, that is more critical!

Now just need to see if somebody will find a way to fix or reproduce the jerkiness of some animations that was not there before. 

Thanks