2013-02-14 16 views
15

UIViewの下の2つのコーナーを丸めて、レイヤーのボーダーも丸く表示しています。私は現在やっています:UIViewのいくつかのコーナーを丸めて、ビューのレイヤーの境界線も丸めます

UIRectCorners corners = UIRectCornerBottomLeft | UIRectCornerBottomRight; 
CGSize radii = CGSizeMake(kThisViewCornerRadius, kThisViewCornerRadius); 
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:myView.bounds 
              byRoundingCorners:corners 
               cornerRadii:radii]; 

CAShapeLayer *maskLayer = [CAShapeLayer layer]; 
[maskLayer setPath:path.CGPath]; 
myView.layer.mask = maskLayer; 

これは正常な表示には問題ありません。しかし、myViewの層がそのborderColorborderWidthセットを持って、そしてあなたがスクリーンショットから見ることができるように、層の境界線が丸みを帯びて取得されていません。

Screenshot of the problem

は、私はまたのUIViewをサブクラス化し、+[Class layerClass]から[CAShapeLayer layer]帰国しようとしました、ビューのレイヤーという形のレイヤーに設定しましたが、境界線がビューのサブビューの下になりました。

ビューのコーナーの一部を丸めたり、ビューのレイヤーの境界線を丸めたり、レイヤーの境界線の下にあるサブビューをクリップすることはできますか?

ではなく、一部のコーナーを丸める方法についてはであることに注意してください。ストロークを正しく動作させる方法

+1

は、層の階層にストロークさシェイプレイヤーを追加しますか? –

+0

良い提案ですが、私はそれをテストし、シェイプレイヤのストロークはまだビューのサブビューの後ろに表示されます。 –

+0

実際、あなたのコメントは私に正しい道で考えさせてくれました。そして、私はそれを手に入れました。私は答えとして投稿します。ありがとう! –

答えて

36

David Rönnqvistさんのコメントのおかげで、私はそれについて新しい考え方を考え出しました。

私はコーナーの丸めとストロークをすべて1つのレイヤーで実行しようとしていました。代わりに、私は2つのレイヤーに分割しました.1つはビューのレイヤーをコーナーを丸く塗り、もう1つはストロークを追加するビューです。

UIView *containerView = [[UIView alloc] initWithFrame:someFrame]; 

UIRectCorners corners = UIRectCornerBottomLeft | UIRectCornerBottomRight; 
CGSize radii = CGSizeMake(kThisViewCornerRadius, kThisViewCornerRadius); 

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:myView.bounds 
              byRoundingCorners:corners 
               cornerRadii:radii]; 

// Mask the container view’s layer to round the corners. 
CAShapeLayer *cornerMaskLayer = [CAShapeLayer layer]; 
[cornerMaskLayer setPath:path.CGPath]; 
containerView.layer.mask = cornerMaskLayer; 

// Make a transparent, stroked layer which will dispay the stroke. 
CAShapeLayer *strokeLayer = [CAShapeLayer layer]; 
strokeLayer.path = path.CGPath; 
strokeLayer.fillColor = [UIColor clearColor].CGColor; 
strokeLayer.strokeColor = [UIColor redColor].CGColor; 
strokeLayer.lineWidth = 2; // the stroke splits the width evenly inside and outside, 
          // but the outside part will be clipped by the containerView’s mask. 

// Transparent view that will contain the stroke layer 
UIView *strokeView = [[UIView alloc] initWithFrame:containerView.bounds]; 
strokeView.userInteractionEnabled = NO; // in case your container view contains controls 
[strokeView.layer addSublayer:strokeLayer]; 

// configure and add any subviews to the container view 

// stroke view goes in last, above all the subviews 
[containerView addSubview:strokeView]; 
+1

+ 100素晴らしいスタッフ – DogCoffee

+0

非常にいい!しかし、これでオプションのボーダーを設定することはできますか? – Vishnu

+0

オプションの罫線はどういう意味ですか? –

0

ここに小さなコードがあります。 Allocはビューを初期化し、このメソッドに送信して角を丸くします。必要に応じて、任意のコーナーを丸めることができます。また、シャドーストロークカラーを与える。

-(void) setMaskTo:(UIView*)view byRoundingCorners:(UIRectCorner)corners withColor: (UIColor*) color 
{ 
UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(9.0, 9.0)]; 

CAShapeLayer* shape = [[[CAShapeLayer alloc] init] autorelease]; 
[shape setPath:rounded.CGPath]; 
shape.strokeColor = [[UIColor grayColor] CGColor]; 

view.backgroundColor=color; 
view.layer.mask = shape; 
} 

このようにメソッドを呼び出します。

[self setMaskTo:ABCView byRoundingCorners:UIRectCornerAllCorners withColor:[UIColor greenColor]]; 
+0

これは誰のためにも機能しますか?私のために働いていない.. –

9

ゼーブルアイゼンベルグの回答が正しいです。

私が好むものの:代わりにサブビューを作成し、追加の

[self.layer addSublayer:strokeLayer]; 

CGSize radii = CGSizeMake(radius, radius); 

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.bounds 
              byRoundingCorners:corners 
               cornerRadii:radii]; 

// Mask the container view’s layer to round the corners. 
CAShapeLayer *cornerMaskLayer = [CAShapeLayer layer]; 
[cornerMaskLayer setPath:path.CGPath]; 
self.layer.mask = cornerMaskLayer; 

// Make a transparent, stroked layer which will dispay the stroke. 
CAShapeLayer *strokeLayer = [CAShapeLayer layer]; 
strokeLayer.path = path.CGPath; 
strokeLayer.fillColor = [UIColor clearColor].CGColor; 
strokeLayer.strokeColor = color.CGColor; 
strokeLayer.lineWidth = 2; // the stroke splits the width evenly inside and outside, 
// but the outside part will be clipped by the containerView’s mask. 

[self.layer addSublayer:strokeLayer]; 
関連する問題