UIEdgeInsetsCreare una strana banda nella cella e non so come risolverlo

Question

Sto provando a utilizzare UIEdgeInsetsMake per impostare lo sfondo della mia cella su un gradiente. Ho provato più cose per farlo funzionare, ma non importa quello che uso, c'è sempre un problema.

Ho semplicemente due celle statiche, dove sto cercando di impostare la loro backgroundView in willDisplayCell:. Dispongo di immagini separate per le celle superiore, inferiore e centrale, ma poiché ho due celle ho solo bisogno della parte superiore e inferiore. Si tratta di quelle immagini:

Top

inferiore

C'è una linea mancante sulla parte superiore quella in basso in modo che non ci sia un 2pt linea tra di loro. Ho regolato leggermente l'altezza di quello inferiore per compensare (1pt in più). Queste immagini sono 44x44pt.

li ho impostato come segue:

- (void)tableView:(UITableView *)tableView 
    willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath { 
    if (indexPath.row == 0) { 
     UIImageView *topCellBackgroundImageView = 
     [[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"grouped-cell-bg-top"] 
       resizableImageWithCapInsets:UIEdgeInsetsMake(5.0, 5.0, 5.0, 5.0)]]; 
     cell.backgroundView = topCellBackgroundImageView; 
    } 
    // If it's the last row 
    else if (indexPath.row == ([tableView numberOfRowsInSection:0] - 1)) { 
     UIImageView *bottomCellBackgroundImageView = 
     [[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"grouped-cell-bg-bottom"] 
       resizableImageWithCapInsets:UIEdgeInsetsMake(5.0, 5.0, 5.0, 5.0)]]; 
     cell.backgroundView = bottomCellBackgroundImageView; 
    } 

    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; 
} 

Questo non funziona bene. Come puoi vedere nell'immagine sottostante, nella cella superiore c'è una "banda" bianca di 1pt attraverso la cella che sembra abbastanza brutta. Non so perché è lì.

Così ho cambiato il topCellBackgroundView di avere inserti bordo di (5.0, 5.0, 0.0, 5.0), come dal momento che è arrotondato solo sulla parte superiore, la proprietà bottom non deve essere scomposto in (è piatta). Funziona perfettamente! Tranne quando selezioni la cella, la cella inferiore non occupa più l'intera cella.

Cosa dovrei fare? Sembra non importa quello che faccio, non funziona. Ho anche provato 1,0 invece di 0.0, oltre a -1.0 senza alcun risultato.

Answer 1

Ottime notizie: non stai impazzendo. Il tuo codice immagine estensibile è probabilmente perfetto. Il problema è che UITableView con uno stile raggruppati aggiunge punti extra all'altezza delle vostre cellule oltre a il valore ritorni in heightForRowAtIndexPath:

Quindi la soluzione al vostro problema è quello di restituire un altezza della cella adjusted heightForRowAtIndexPath: sulla base di il numero totale di righe nella sezione:

- (CGFloat)heightForRow:(NSIndexPath *)indexPath { 
    CGFloat standardHeight = 44.0f; 
    NSInteger numberOfRowsInSection = [self numberOfRowsInSection:indexPath.section]; 

    if (numberOfRowsInSection == 1) { 
     standardHeight -= 2; 
    } 
    else if (indexPath.row == 0 || indexPath.row == numberOfRowsInSection-1) { 
     standardHeight -= 1; 
    } 

    return standardHeight; 
} 

Ecco un esempio di immagine che mostra come UITableView fa questo:

Per quanto ne so, solo il punto di vista della tabella di stile raggruppati sono interessati, e anche allora i cambiamenti degli effetti in base al numero totale di righe in una data sezione:

1. una riga aggiunge due punti al altezza cella (l'altezza predefinita è 92 pixel sulla retina).
2. Due righe Aggiunge un punto all'altezza della prima e dell'ultima riga (90 pixel di altezza ciascuno per impostazione predefinita sulla retina).
3. Tre righe Aggiunge un punto all'altezza della prima e dell'ultima riga (90 pixel di altezza ciascuno sulla retina per impostazione predefinita). Le file centrali non sono interessate.

Questo è così frustrante e non è mai stato documentato per quanto ne so. :-)

Aggiorna

I calcoli di cui sopra sono per una visualizzazione per tabella stile raggruppati utilizzando lo stile separatore predefinito di UITableViewCellSeparatorStyleSingleLineEtched. Ecco cosa fare negli altri casi (vale a dire UITableViewCellSeparatorStyleSingleLine e UITableViewCellSeparatorStyleNone):

- (CGFloat)tableView:(UITableView *)tableView 
    heightForRowAtIndexPath:(NSIndexPath *)indexPath { 
    CGFloat rowHeight = 44.0f; 
    if (indexPath.row == 0) { 
     rowHeight -=1; 
    } 
    return rowHeight; 
} 

Answer 2

In your debugger output, l'altezza del secondo SettingsCell è 45 punti, non 44 come previsto. Nota che questo è il secondo nell'output, ma in realtà è mostrato in ordine inverso e questa è in realtà la prima cella della tabella (puoi vedere quella dai valori frame delle celle, questa essendo y = 46 mentre l'altra è è in y = 91).

Credo che questo causi il disallineamento dello sfondo della prima cella nel secondo screenshot (e lo stretching responsabile per la banda bianca che descrivi nel primo screenshot, anche se personalmente non riesco a notarlo) e che puoi risolvere il problema con assicurandoti che UITableViewCell sia impostato all'altezza corretta del fotogramma (44 punti). Questo non è nello snippet di codice che hai incluso nella tua domanda, ma questo è più probabile nel tuo metodo – tableView:heightForRowAtIndexPath:.

Una volta risolto questo problema, gli inserti del bordo di (5.0, 5.0, 1.0, 5.0) sono probabilmente ciò che si intendeva dal momento che non si desidera allungare la linea inferiore di un punto. Ma (5.0, 5.0, 5.0, 5.0) e (5.0, 5.0, 0.0, 5.0) dovrebbero apparire uguali poiché non vi è alcun allungamento verticale quando l'altezza della bitmap e l'altezza del frame sono corrispondenze esatte.

Answer 3

Aggiornamento

Come si è visto, ero sbagliato sul fondo, vedere la risposta approvato.

D'altra parte, l'aggiunta di un separatore non "risolve" il problema, ma lo nasconde piuttosto bene, quindi la mia risposta potrebbe essere valida in tal senso.

Original post

La mia ipotesi è che dal momento che si sta cercando di disegnare il proprio separatore, lo sfondo che il tableView utilizza come sfondo "selezionato" è già scalato Valutazione del tipo di separatore di default, ho replicato il problema mettendo UITableViewCellSeparatorStyleNone, e verniciato a celle con colori diversi:

noti la sottile linea rossa tra le celle. Prova a impostare il colore del separatore (tableView.separatorColor) in modo che corrisponda al tuo stile e rimuovi la riga inferiore dalla risorsa.

Inoltre, dal momento che stiamo parlando di una risorsa estensibile, dovresti considerare che l'immagine estensibile prende gli inserti come "questo lato dovrebbe essere corretto" e la regione centrale, viene incollata su tutta la superficie, quindi, per hanno una grafica veramente estensibile, si dovrebbe fare qualcosa di simile:

// For the top one 
UIEdgeInsetsMake(38.0, 5.0, 5.0, 5.0) 

// For the bottom one 
UIEdgeInsetsMake(5.0, 5.0, 38.0, 5.0) 

la chiave qui, è che questo lascia solo un pixel di altezza di ripetizione del modello, che sarebbe un colore solido, e quindi i confini hanno la giusta dissolvenza .

Ecco la spiegazione grafica del più tardi, (ho riutilizzato un file che ho fatto per i designer dell'azienda e applicate le dimensioni):

(notare la linea rossa piccola tra le celle)