视图控制器中的透明矩形

Question

我希望实现类似于圆形html表单的效果,其透明背景类似于下面的图像(不是鼠标悬停文本,只是背景中的矩形,并且具有不透明度).

我不知道怎么做这个,我玩弄了,CGRect但我甚至无法让它们上来.我正在使用基于标签导航的iPad模板.

你能指点一些可以让我入手的资源CGRect吗？

Answer 1

注意我将假设您在两个表单字段后面的灰色背景矩形之后.不是电子邮件字段周围的蓝色边框.我假设你想要实现类似的东西:

您需要创建自定义UIView子类,它包含或直接位于表单域和按钮后面.根据渐变和圆角半径的复杂程度,您可以通过两种方式实现类似的效果.

1.使用CALayer cornerRadius和borderColorandborderWidth

此视图的简单实现可能是:

#import "RoundedView.h"
#import <QuartzCore/QuartzCore.h>

@implementation RoundedView

- (id)initWithFrame:(CGRect)frame
{
  if ((self = [super initWithFrame:frame])) {
    self.backgroundColor = [UIColor grayColor];
    self.layer.borderColor = [[UIColor lightGrayColor] CGColor];
    self.layer.cornerRadius = 10;
  }
  return self;
}

@end

2.覆盖drawRect:绘制圆角

您将使用UIBezierPath绘制带圆角的矩形,填充并敲击它.

@implementation DrawnBackgroundView

- (id)initWithFrame:(CGRect)frame
{
  if ((self = [super initWithFrame:frame])) {
    self.backgroundColor = [UIColor clearColor];
  }
  return self;
}


- (void)drawRect:(CGRect)rect
{
  CGFloat lineWidth = 2;
  CGFloat selfWidth = self.bounds.size.width - (lineWidth * 2);
  CGFloat selfHeight = self.bounds.size.height - (lineWidth * 2);

  UIColor* lightGray = [UIColor colorWithRed: 0.84 green: 0.84 blue: 0.84 alpha: 1];

  UIBezierPath* roundedRectanglePath = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(lineWidth, lineWidth, selfWidth, selfHeight) cornerRadius: 10];
  [lightGray setFill];
  [roundedRectanglePath fill];

  [lightGray setStroke];
  roundedRectanglePath.lineWidth = lineWidth;
  [roundedRectanglePath stroke];
}

@end

上面的屏幕截图来自GitHub上提供的快速演示项目.