视图控制器中的透明矩形

Question

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

我不知道该怎么做，而且我已经玩过CGRect，但我甚至无法让它们出现。我正在使用基于标签导航的iPad模板。

请您指点一些可以让我开始CGRect的资源？

Answer 1

注意我将假设您在两个表单字段后面的灰色背景矩形之后。不是电子邮件字段周围的蓝色边框。我假设你想要达到类似的目的：

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

1。使用CALayer的cornerRadius和borderColor以及borderWidth

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

#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的快速演示项目。

Answer 2

从基于视图的模板开始，创建名为Drawer的项目。将UIView类添加到项目中。将其命名为SquareView（.h和.m）。

双击DrawerViewController.xib以在Interface Builder中打开它。使用“类”弹出菜单将Identity中的通用视图更改为Identity Inspector（command-4）中的SquareView。保存并返回Xcode。

将此代码放在SquareView.m文件的drawRect：方法中，绘制一个大的，弯曲的空黄色矩形和一个小的绿色透明方块：

- (void)drawRect:(CGRect)rect;
{   
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetRGBStrokeColor(context, 1.0, 1.0, 0.0, 1.0); // yellow line

    CGContextBeginPath(context);

    CGContextMoveToPoint(context, 50.0, 50.0); //start point
    CGContextAddLineToPoint(context, 250.0, 100.0);
    CGContextAddLineToPoint(context, 250.0, 350.0);
    CGContextAddLineToPoint(context, 50.0, 350.0); // end path

    CGContextClosePath(context); // close path

    CGContextSetLineWidth(context, 8.0); // this is set from now on until you explicitly change it

    CGContextStrokePath(context); // do actual stroking

CGContextSetRGBFillColor(context, 0.0, 1.0, 0.0, 0.5); // green color, half transparent
CGContextFillRect(context, CGRectMake(20.0, 250.0, 128.0, 128.0)); // a square at the bottom left-hand corner
}

您不必为绘图调用此方法。当程序启动并激活NIB文件时，视图控制器将告诉视图至少绘制一次。