Как создать эффект тени в uitableviewcell? - PullRequest
5 голосов
/ 08 сентября 2011

Я занимаюсь разработкой одного приложения, в котором я хочу создать эффект тени, подобный показанному на изображении ниже в нижней части uitableviewcell.

enter image description here

Как я могу это сделать? Любой учебник илиобразец кода?Я проверил http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html, http://www.touchthatfruit.com/?tag=uitableview и некоторые другие. Но у них есть тень внизу uitableview с той же высотой. И как добавить тень на боковых границах каждого раздела, содержащего дату (а не всюtableview). Я могу создать раскрывающуюся тень внизу. Но как насчет боковых границ последней ячейки uitableview каждого раздела. И одним из способов является создание изображения и установка его в качестве фона tableviewcell. Но как изменить его размер и будет ли он выглядетьправильно, потому что у каждого раздела есть динамическое число записей. один раздел имеет только 1 запись, а другой может содержать 15 или более записей (здесь изображение для всего раздела, который содержит дату). я могу иметь отдельное изображение только для последней ячейки таблицы каждого раздела.Это я знаю. Но есть ли лучший подход или это программно?

Ответы [ 4 ]

0 голосов
/ 04 октября 2013

Это может быть достигнуто с помощью bezierpath: проверьте URL для получения различных эффектов тени: http://nachbaur.com/blog/fun-shadow-effects-using-custom-calayer-shadowpaths

0 голосов
/ 10 сентября 2011

Будет ли каждый раздел всегда иметь одинаковый размер? Если так, то почему бы вам не создать подкласс UITableViewCell для рисования блокнота как элемента с включенной тенью?

Вы также можете добавить прозрачный UIImageView поверх UITableView, чтобы получить затемненные углы.

EDIT:

Этот эффект немного сложен, вы захотите узнать, как использовать UIBezierPaths (http://developer.apple.com/library/IOS/#documentation/UIKit/Reference/UIBezierPath_class/Reference/Reference.html).

Верхняя часть может быть изображением (эффект колец и табуляции). Затем вы можете нарисовать остальную часть ячейки в функции drawRect. (Это более эффективно, чем использование теневых свойств в слое, что важно в UITableViewCell).

Вы захотите переопределить свой класс UITableViewCell и реализовать собственную функцию drawRect:.

Вот код, с которого можно начать:

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    - (void)drawRect:(CGRect)rect
    {

        /* Draw top image here */

        //now draw the background of the cell.
        UIBezierPath *path1 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 320, 50)];
        [[UIColor grayColor] set];
        [path1 fill];

        UIBezierPath *path2 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 52, 320, 50)];
        [[UIColor whiteColor] set];
        [path2 fill];

        UIBezierPath *path3 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 104, 320, 50)];
        [[UIColor grayColor] set];
        [path3 fill];

        UIBezierPath *path4 = [UIBezierPath bezierPathWithRect:CGRectMake(0, 156, 320, 50)];
        [[UIColor whiteColor] set];
        [path4 fill];

        //and so on...

        //Let's draw the shadow behind the last portion of the cell.
        UIBezierPath *shadow = [UIBezierPath bezierPathWithRect:CGRectMake(0, 208, 320, 52)];
        [[UIColor darkGrayColor] set];
        [shadow fill];

        //Finally, here's the last cell with a curved bottom
        UIBezierPath *path5 = [UIBezierPath bezierPath];
        [path5 moveToPoint:CGPointMake(0, 208)];
        [path5 addLineToPoint:CGPointMake(320, 208)];
        [path5 addLineToPoint:CGPointMake(320, 258)];
        [path5 addCurveToPoint:CGPointMake(0, 258) controlPoint1:CGPointMake(160, 254) controlPoint2:CGPointMake(160, 254)];
        [[UIColor grayColor] set];
        [path5 fill];
    }

Код не совсем перетаскивается. Вам все еще нужно добавить белые линии, исправить некоторые размеры и настроить последнюю ячейку и тень, чтобы они были правильными. Но этого должно быть достаточно, чтобы вы начали.

Ура!

0 голосов
/ 20 августа 2012

Посмотрите на мой ответ на похожий вопрос, этот может быть возможным решением вашей проблемы! Изменяя путь тени, вы сможете достичь желаемого эффекта тени!

0 голосов
/ 08 сентября 2011

Вы можете сослаться на следующую ссылку для эффекта тени в uitableview, который поможет вам

попробуйте это

Фундаментальная часть вида это его слойCALayer.Вы можете получить к нему доступ через свойство layer представления:

myView.layer

В документации CALayers имеют несколько свойств, которые управляют тенью.Вы должны быть в состоянии сказать слою панели навигации отбрасывать тень.Наряду со слоями любого другого содержимого, для которого вы хотите отбросить тень.

myView.layer.shadowOffset

myView.layer.shadowRadius

Для доступа к этому свойству необходимо обязательно добавить платформу QuartzCore в свой проект

...