UIEdgeInsetsMake tworzenie dziwnego pasma w komórce i nie wiem jak to naprawić

Question

Próbuję użyć UIEdgeInsetsMake, aby ustawić tło mojej komórki na gradient. Próbowałem wielu rzeczy, aby to działało, ale bez względu na to, co używam, zawsze jest problem.

Po prostu mam dwie komórki statyczne, gdzie próbuję ustawić ich backgroundView w willDisplayCell:. Mam osobne obrazy dla komórek górnych, dolnych i środkowych, ale ponieważ mam dwie komórki, potrzebuję tylko góry i dołu. Są to te zdjęcia:

Top

Dół

Jest brakującym linia na górze dolnej jednej więc, że nie jest to 2PT linia pomiędzy nimi. Ustawiłem nieco wysokość dolnej, aby zrekompensować (1pt wyżej). Te obrazy mają 44 x 44 punkty.

ja je ustawić w następujący sposób:

- (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; 
} 

To nie działa dobrze. Jak widać na obrazku poniżej, w górnej komórce znajduje się biały "pas" w skali 1pt, który wygląda dość brzydko. Nie wiem, dlaczego tam jest.

Więc zmieniłem topCellBackgroundView mieć wypustki krawędziowe (5.0, 5.0, 0.0, 5.0), a ponieważ jest zaokrąglona tylko na górze, właściwość bottom nie muszą być uwzględnione w (jest płaska). To działa idealnie! Z wyjątkiem sytuacji, gdy wybierzesz komórkę, dolna komórka nie będzie już zajmowała całej jej komórki.

Co mam zrobić? Wydaje się, że bez względu na to, co robię, to nie działa. Próbowałem również 1.0 zamiast 0.0, a także -1,0 bezskutecznie.

Answer 1

Dobra wiadomość: nie zwariowałeś. Twój rozciągliwy kod obrazu jest prawdopodobnie doskonały. Problemem jest to, że UITableView z zgrupowane stylu dodaje dodatkowe punkty do wysokości komórek oprócz wartość powrocie w heightForRowAtIndexPath:

więc rozwiązanie problemu jest powrót skorygowaną wysokość komórek w heightForRowAtIndexPath: na podstawie łączna liczba wierszy w sekcji:

- (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; 
} 

Oto przykładowy obraz pokazujący jak UITableView robi to:

O ile mi wiadomo, tylko pogrupowane wyświetlenia tabeli stylów są naruszone, a nawet wtedy zmienia efekt w oparciu o całkowitą liczbę wierszy w danym odcinku:

1. jednym rzędzie Dodaje dwa punkty do wysokość komórki (domyślna wysokość to 92 piksele na siatkówce).
2. Dwa rzędy Dodaje jeden punkt do wysokości pierwszego i ostatniego wiersza (domyślnie 90 pikseli wysokości na siatkówce).
3. Trzy rzędy Dodaje jeden punkt do wysokości pierwszego i ostatniego wiersza (domyślnie 90 pikseli wysokości na siatkówce). Środkowe rzędy pozostają nienaruszone.

Jest to bardzo frustrujące i nigdy nie zostało udokumentowane, o ile wiem. :-)

Aktualizacja

Obliczenia powyżej są na widoku tabeli zgrupowane styl używając domyślnego stylu separatora UITableViewCellSeparatorStyleSingleLineEtched. Oto co należy zrobić w pozostałych przypadkach (tj UITableViewCellSeparatorStyleSingleLine i UITableViewCellSeparatorStyleNone):

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

Answer 2

W your debugger output wysokość drugiego SettingsCell wynosi 45 punktów, a nie 44 zgodnie z oczekiwaniami. Zauważ, że jest to drugie wyjście, ale faktycznie jest pokazane w odwrotnej kolejności i jest to właściwie pierwsza komórka tabeli (widać to z wartości klatek komórek, przy czym ta ma wartość y = 46, a druga - y = 46 wynosi y = 91).

Uważam, że powoduje to przesunięcie w tle pierwszej komórki na drugim zrzucie ekranu (i rozciąganie odpowiedzialne za biały zespół, który opisujesz na pierwszym zrzucie ekranu, chociaż osobiście tego nie zauważam) i że możesz to naprawić upewniając się, że twoja komórka UITableViewCell jest ustawiona na prawidłową wysokość klatki (44 punkty). Nie dotyczy to fragmentu kodu dołączonego do pytania, ale najprawdopodobniej jest to metoda – tableView:heightForRowAtIndexPath:.

Po ustaleniu tego, wstawki krawędzi (5,0, 5,0, 1,0, 5,0) są prawdopodobnie tym, co zamierzałeś, ponieważ nie chcesz rozciągać jednopunktowej dolnej linii. Ale (5,0, 5,0, 5,0, 5,0) i (5,0, 5,0, 0,0, 5,0) powinny wyglądać tak samo, ponieważ w ogóle nie ma pionowego rozciągania, gdy wysokość mapy bitowej i wysokość ramki są dokładnie dopasowane.

Answer 3

Aktualizacja

Jak się okazuje, myliłem o, zobacz zatwierdzony odpowiedzi.

Z drugiej strony dodanie separatora nie "rozwiązuje" problemu, ale ukrywa go bardzo dobrze, więc moja odpowiedź może być nadal ważna w tym sensie.

Original post

Domyślam się, że skoro próbują wyciągnąć własne separator, tło, że tableView wykorzystuje jako „wybrany” tło jest już skalowany rozważa styl domyślny separator, ja replikowane ten problem przez wprowadzenie UITableViewCellSeparatorStyleNone i malowane do komórek w różnych kolorach:

Wskazówka maleńka czerwona linia pomiędzy komórek. Spróbuj ustawić kolor separatora (tableView.separatorColor), aby pasował do Twojego stylu i usuń dolną linię z zasobu.

Ponadto, ponieważ mówimy o elastycznym elemencie, należy wziąć pod uwagę, że rozciągliwy obraz przyjmuje wstawki jako "te strony powinny być ustalone", a środkowy region jest kopiowany dookoła, tak aby mieć naprawdę rozciągliwy graficzny, należy zrobić coś takiego:

// 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) 

kluczem tutaj jest to, że pozostawia tylko jeden piksel wysoki powtarzania wzór, który byłby jednolity kolor, a następnie granice mają odpowiednie znikną .

Oto graficzny objaśnienie później, (I ponownie użyty jeden plik zrobiłem dla projektantów firmy i stosować swoje wymiary):

(Wskazówka maleńką czerwoną linię pomiędzy komórek)