2016-11-18 15 views
0

と似ていますが、の質問がありますが、私の問題を解決するのに役立つ回答は見つかりませんでした。あなたが見たことがあれば、これを重複としてマークしてください。ただし、類似の部分だけでなく質問全体にも答えてください。UIImageViewを丸くして境界線と影を境界線の周りに追加します

私はUIImageViewを持っており、コーナーを丸めて境界線を追加しています。しかし、私はいくつかの深さを私のUIを与えるためにいくつかのドロップシャドウを追加し始めている。私は自分のプロフィール画像に影を追加しています。次のコードは完璧な円形に切り取られた完全に正方形の画像に最適です。しかし、非正方形の矩形画像の場合、影は画像ビューではなく画像そのものに適用されるので、丸みを帯びた矩形画像の周りに丸い境界線ができます。円形の境界線。 UIImageView内の画像ではなく、ボーダーの周りにこの影を適用するコードを変更する方法についての洞察はありますか?

おかげ

//Set profile image view to be rounded (default appears rounded due to alpha background, need rest to appear rounded as well 
[self.profileImageView layoutIfNeeded]; 
CALayer *imageLayer = self.profileImageView.layer; 
[imageLayer setCornerRadius:self.profileImageView.frame.size.width/2]; 
[imageLayer setBorderWidth:1]; 
[imageLayer setBorderColor:[[UIColor colorWithRed:78.0/255.0 green:82.0/255.0 blue:85.0/255.0 alpha:1] CGColor] ]; 
[imageLayer setMasksToBounds:YES]; 

//Apply shadows to necessary views for the job badge 
[self.profileImageView.layer setShadowColor:[[UIColor blackColor] CGColor]]; 
[self.profileImageView.layer setShadowRadius:4.0f]; 
[self.profileImageView.layer setShadowOffset:CGSizeMake(0, -3)]; 
[self.profileImageView.layer setShadowOpacity:0.5f]; 
+0

あなたがそうしない行動のスクリーンショットを提供することができ好き? – charmingToad

+0

私は実際に固定実装を完了したばかりで、間違っていてコミットしなかったので、簡単にロールバックできません。しかし、基本的に、私が背の高いイメージよりも広いイメージを持っていれば、影は、サークルの周りを回るのではなく、サークルで切り取られたイメージの上にのみ表示されます。影は*円の中にあった。画像の幅がワイドよりも大きければ、影は円の周りを回りますが、画像の端で止まります。私は以下のAlexと同様のアプローチを使用しました。 –

答えて

4

問題は、あなたがcornerRadiusを設定すると影が他のコンテンツと一緒にマスクされていることです。

内側の影とマスクされたimageViewを使用して中間のコンテキストビューを使用することができます。ここでは、コードですが、あなたは同様にInterface Builderとautolayoutsと同じ操作を行うことができます。

UIView *containerView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)]; 
[containerView.layer setShadowColor:[[UIColor blackColor] CGColor]]; 
[containerView.layer setShadowRadius:4.0f]; 
[containerView.layer setShadowOffset:CGSizeMake(0, -3)]; 
[containerView.layer setShadowOpacity:0.5f]; 
[self.view addSubview:containerView]; 

UIImageView *imageView = [[UIImageView alloc] initWithFrame:containerView.bounds]; 
imageView.image = [UIImage imageNamed:@"rgb"]; 
[imageView.layer setCornerRadius:imageView.frame.size.width/2]; 
[imageView.layer setBorderWidth:1]; 
[imageView.layer setBorderColor:[[UIColor colorWithRed:78.0/255.0 green:82.0/255.0 blue:85.0/255.0 alpha:1] CGColor] ]; 
[imageView.layer setMasksToBounds:YES]; 
[containerView addSubview:imageView]; 

出力:

enter image description here

+0

私はこれを正しいとマークしていますが、これは基本的には私が使った実装なので、私はストーリーボードを使ってビューを初期化しましたが、シャドー/コーナー/ボーダーのみをプログラムで行いました。プログラムでの初期化ではなく、SB以外では、これは私が使用した解決策です。 –

+0

あなたが言ったように、影はコンテンツに適用されます。完全に正方形の画像では、コンテンツは境界線で切り取られ、コンテンツに適用された影は境界線の端を適切に通過します。同じコーナーを持つ親ビューに影を適用することは、そのトリックを行いました。 –

+0

ここで注意しなければならないのは、コンテンツが完全にマスクされていないと、シャドウが適切にエッジを回らないということです。たとえ内容が完全に正方形であっても。このブログ記事では、「コンテナ」アプローチも紹介しています。[iOS - 画像をマスクしてシャドウする方法(http://travisjeffery.com/b/2012/08/ios-how-to-mask-and-shadow-an -画像/)。 –

関連する問題