ios - View Controller 中的透明矩形

Question

我想实现类似于具有透明背景的圆形 html 表单的效果，类似于下图(不是鼠标悬停文本，只是背景中的矩形，并且具有不透明度)。

我不知道该怎么做，我已经尝试过 CGRect 但我什至无法让它们出现。我正在为 iPad 使用基于选项卡导航的模板。

您能否为我指出一些可以让我开始使用 CGRect 的资源？

Answer 1

注意 我假设您正在寻找两个表单域后面的灰色背景矩形。不是电子邮件字段周围的蓝色边框。我假设您想实现与此类似的目标:

您需要创建自定义 UIView 子类，它包含或直接位于您的表单字段和按钮后面。根据渐变和圆角半径的复杂性，您可以通过以下两种方式之一实现类似的效果。

1。使用 CALayer 的 cornerRadius 和 borderColor 和 borderWidth

这个 View 的一个简单实现可以是:

#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

上面的屏幕截图取自一个快速演示项目 available on GitHub .