2012-04-17 4 views
6

Очень легко поставить простую рамку на UIView. Вы просто ссылку на QuartzCore, импортировать его и использовать:Как установить градиентную границу на UIView?

self.view.layer.borderColor = [UIColor redColor].CGColor; 
self.view.layer.borderWidth = 2.0f; 

Мой вопрос ... Есть ли способ, чтобы сделать эту границу использовать градиент. Я знаю, как применять градиентную маску к всему виду, но не только к ее границе. Я предполагаю, что это может включать в себя пользовательский вид и CoreGraphics чертеж внутри drawRect:, но я не уверен, с чего начать.

ответ

5

Я не совсем уверен, что вы подразумеваете под «градиентом». Поскольку вы сказали, что используете графику ядра для применения градиента к форме, я предполагаю, что вы имеете в виду это (а не тень, о котором говорит предыдущий ответ).

Вы не можете применить градиент к границе. Однако вы можете создать свою собственную границу, используя пользовательскую форму. Самый простой способ сделать это - создать два пути, внешний путь и внутренний путь. Для простоты предположим, что путь простой прямоугольник (Прямоугольник приведены в drawRect):

UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect]; 

Второй путь будет внутренний путь меньше, чем первый (достаточно, чтобы сделать границу) :

//To create a 1.0f borderWidth 
CGRect innerRect = rect; 
innerRect.origin.x += 1.0f; 
innerRect.origin.y += 1.0f; 
innerRect.size.width -= 2.0f; 
innerRect.size.height -= 2.0f; 
UIBezierPath *innerPath = [UIBezierPath bezierPathWithRect:innerRect]; 

Теперь добавьте внутренний путь к нормальному пути и убедитесь, что путь использует evenOddFillRule. Функция evenOddFillRule будет показывать основную графику только для заполнения внешней части, оставив только внутреннюю часть. О, и вы хотите, чтобы отсечь на пути:

[path appendPath:innerPath]; 
path.usesEvenOddFillRule = YES; 
[path addClip]; 

Если применить градиент к этой форме, она заполнит за пределами внутреннего пути и внутри внешнего пути, делая границы с градиентом.

UPDATE

Если вы ориентируетесь IOS 5.0 может быть лучшим способом сделать это. Я обнаружил замечательную новую функцию пути, называемую CGPathCreateCopyByStrokingPath(). Подробнее см. Ссылку, но в основном она создает новый путь, который является стоком (ами) оригинала, так что если вы заполните новый путь, он создаст то же изображение, что и поглаживание старого пути. Это фантастика, потому что вместо заполнения нового пути вы можете кликнуть на него, а затем заполнить градиентом, указав градиентную границу. Это намного проще, чем предыдущий метод, о котором я упоминал, но, конечно, он доступен только в iOS 5.0. Это также упростит создание новых сложных форм.

+0

Спасибо. Полную реализацию можно найти на странице https://gist.github.com/2423583. Обратите внимание, что это рисует внутреннюю границу, что может быть проблематично, если другие вершины сидят поверх нее. – shawnwall

+0

@shawnwall Я обновил свой ответ. Если вы используете iOS 5.0, есть более простой способ создания градиентных границ. –

0

Я создал второй слой градиента с цветами, обратными в массиве, а затем сделал кадр второго слоя немного меньшим, чем первый слой. Создает внешний вид границы.

Смежные вопросы