Как на iPhone делается закругленный прямоугольник с прозрачностью? - PullRequest
39 голосов
/ 23 июня 2009

Многие приложения выдают прозрачное представление с закругленными углами и ActivityIndicator при выполнении длительной операции.

Как это округление и возможно ли это сделать просто с помощью Interface Builder (так как есть много мест, где я хотел бы использовать что-то подобное)? Или я должен использовать просмотр изображений со скругленным прямоугольным или растягиваемым изображением? Нужно ли сам рисовать фон?

До сих пор мне удалось получить базовый вид с аналогичной прозрачностью, установив alphaValue в Интерфейсном Разработчике, однако он не имеет закругленных углов, а также прозрачность применяется ко всем подпредставлениям (я не хочу текст и индикатор активности должны быть прозрачными, однако, хотя я устанавливаю значение alphaValue для значений в IB, оно, похоже, игнорируется).

Ответы [ 5 ]

78 голосов
/ 30 октября 2009

Начиная с iPhone SDK 3.0, вы можете просто использовать свойство слоя cornerRadius. E.g.:

view.layer.cornerRadius = 10.0;

Вдоль тех же строк вы можете изменить цвет и ширину границы представления:

view.layer.borderColor = [[UIColor grayColor] CGColor];
view.layer.borderWidth = 1;
47 голосов
/ 23 июня 2009
view.layer.cornerRadius = radius;

Сложный способ (который требовался в первом iPhone SDK) - создать собственный подкласс UIView с методом drawRect::

 CGContextRef context = UIGraphicsGetCurrentContext();
 CGContextSetRGBFillColor(context, 0,0,0,0.75);

 CGContextMoveToPoint(context, rect.origin.x, rect.origin.y + radius);
 CGContextAddLineToPoint(context, rect.origin.x, rect.origin.y + rect.size.height - radius);
 CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + rect.size.height - radius, 
                radius, M_PI, M_PI / 2, 1); //STS fixed
 CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius, 
                        rect.origin.y + rect.size.height);
 CGContextAddArc(context, rect.origin.x + rect.size.width - radius, 
                rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
 CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
 CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius, 
                radius, 0.0f, -M_PI / 2, 1);
 CGContextAddLineToPoint(context, rect.origin.x + radius, rect.origin.y);
 CGContextAddArc(context, rect.origin.x + radius, rect.origin.y + radius, radius, 
                -M_PI / 2, M_PI, 1);

 CGContextFillPath(context);

Примечание: rect в этом коде должно быть взято из [self bounds] (или из любого места, в котором вы хотите его использовать), это не имеет смысла, если rect передано методу drawRect:.

8 голосов
/ 23 июля 2011

Я абстрагировал ответ @ lostInTransit в эту функцию:

static void ContextAddRoundedRect(CGContextRef c, CGRect rect, CGFloat radius) {
  CGFloat minX = CGRectGetMinX(rect);
  CGFloat maxX = CGRectGetMaxX(rect);
  CGFloat minY = CGRectGetMinY(rect);
  CGFloat maxY = CGRectGetMaxY(rect);

  CGContextMoveToPoint(c, minX + radius, minY);
  CGContextAddArcToPoint(c, maxX, minY, maxX, minY + radius, radius);
  CGContextAddArcToPoint(c, maxX, maxY, maxX - radius, maxY, radius);
  CGContextAddArcToPoint(c, minX, maxY, minX, maxY - radius, radius);
  CGContextAddArcToPoint(c, minX, minY, minX + radius, minY, radius);
}

, который помещает путь в контекст для вас, как вы можете

немного отличаться от вызовов CoreGraphics, и я нене закрывайте путь, если хотите добавить, что

CGContextFillPath(c);
7 голосов
/ 23 июня 2009

По вашему мнению, сделайте это в методе drawRect

float radius = 5.0f;

CGRect rect = self.bounds;
CGContextRef context = UIGraphicsGetCurrentContext();   
rect = CGRectInset(rect, 1.0f, 1.0f);

CGContextBeginPath(context);
CGContextSetGrayFillColor(context, 0.5, 0.7);
CGContextMoveToPoint(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect));
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMinY(rect) + radius, radius, 3 * M_PI / 2, 0, 0);
CGContextAddArc(context, CGRectGetMaxX(rect) - radius, CGRectGetMaxY(rect) - radius, radius, 0, M_PI / 2, 0);
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMaxY(rect) - radius, radius, M_PI / 2, M_PI, 0);
CGContextAddArc(context, CGRectGetMinX(rect) + radius, CGRectGetMinY(rect) + radius, radius, M_PI, 3 * M_PI / 2, 0);

CGContextClosePath(context);
CGContextFillPath(context);

Это сделает ваш прямоугольник с закругленными углами для вашего просмотра. Вы можете найти полный пример в образце HeadsUpUI, поставляемом с SDK. НТН

6 голосов
/ 05 мая 2010
...