ios - ビューコントローラーの透明な四角形

Question

下の画像に似た透明な背景を持つ丸いhtmlフォームに似た効果を実現したい(マウスオーバーテキストではなく、背景の長方形だけで、不透明にする)。

これを行う方法がわかりません。いじってみましたCGRectが、それらを思いつくことさえできません。iPad 用のタブ ナビゲーション ベースのテンプレートを使用しています。

を始めるためのリソースを教えてくださいCGRect。

Answer 1

注: 2 つのフォーム フィールドの背後にある灰色の背景の四角形の後にいると仮定します。メール欄の青い枠ではありません。私はあなたがこれに似た何かを達成したいと思っていると仮定しています:

フォームフィールドとボタンを含むか、そのすぐ後ろにあるカスタム UIView サブクラスを作成する必要があります。グラデーションと角の半径の複雑さに応じて、2 つの方法のいずれかで同様の効果を得ることができます。

1. CALayer のcornerRadiusandborderColorを使用する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

drawRect:2.丸みを帯びた角を描画するためのオーバーライド

を使用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 で入手できるクイック デモ プロジェクトから取得したものです。

Answer 2

ビューベースのテンプレートから始めて、Drawer という名前のプロジェクトを作成します。プロジェクトに UIView クラスを追加します。名前を SquareView (.h および .m) にします。

DrawerViewController.xib をダブルクリックして Interface Builder で開きます。Class ポップアップ メニューを使用して、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 ファイルがアクティブ化されたときに、少なくとも 1 回は自分自身を描画するようにビューに指示します。