Just My Life & My Work

[iOS] 視圖圓角

2013 年 01 月 17 日

四角的影像讓我覺得不友善，於是讓尖角變成圓角，感覺起來就舒服多了～如下這用UIImageView製作的HouseBook四個九十度角變成圓角囉！

housebook uiimageview round corner

在寫程式前的兩個步驟：

  1. add QuartzCore.framework
  2. import <QuartzCore/QuartzCore.h>

接下來就是設定自己喜歡的參數程度。

    self.albumImageView.userInteractionEnabled = YES;
    //設定邊框粗細
    [[self.albumImageView layer] setBorderWidth:3.0];
    //設定邊框顏色
    [[self.albumImageView layer] setBorderColor:[UIColor colorWithRed:1.0 green:0.75 blue:0.0 alpha:0.7].CGColor];
    //設定超出邊框的部份做遮罩
    [[self.albumImageView layer] setMasksToBounds:YES];
    //設定背景顏色
    [[self.albumImageView layer] setBackgroundColor:[UIColor colorWithRed:0.5 green:0.5 blue:0.5 alpha:0.6].CGColor];
    //設定圓角程度
    [[self.albumImageView layer] setCornerRadius:10.0];

所有繼承UIView的視覺元件都可使用圓角！圓角之外，還有陰影、邊框和漸層光澤可以設定～

如果view中有圖片，以上設置後還要設定，影像才會有預期的圓角喔！

[self.albumImageView.layer setMasksToBounds:YES];

參考：關於 UIView 圓角的二三事、UIView 視覺效果：圓角、陰影、邊框、漸層光澤、UIView必備基礎與常用方法、set cornerRadius and setbackgroundimage to UIButton。

廣告

分類：

iOS, 教學

1 Comment

Tagged with:

Comments on: "[iOS] 視圖圓角" (1)

  1. [iOS] TextField和TextView顯示圓角 | 逍遙文工作室 said:
    2013 年 12 月 29 日 at 19:11:16

    […] 在視圖圓角這篇文章中介紹過，只要是繼承UIView的子類別都可以實現圓角的效果～所以當然TextField和TextView也可以顯示圓角囉！除了可以變成不同程度的圓角，還可以改變框的厚度和顏色。 […]

    讚

隨意留個言吧：）～

在下方填入你的資料或按右方圖示以社群網站登入：

Gravatar
WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 ( 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 ( 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 ( 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 ( 登出 /  變更 )

取消

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚：