Just a Computer Graphics Studio & My Life

[iOS] 視圖圓角

四角的影像讓我覺得不友善,於是讓尖角變成圓角,感覺起來就舒服多了~如下這用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

廣告

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

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

    按讚數

發表留言

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

WordPress.com Logo

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

Twitter picture

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

Facebook照片

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

Google+ photo

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

連結到 %s

標籤雲

%d 位部落客按了讚: