iOS設定圓角及圓形圖片

iOS設定圓角及圓形圖片

方方正正的樣式往往會顯得很生硬，而圓角的樣式會讓人產生別樣的親切感，現在越來越多地用到圓角，諸如帳戶圖片之類的圖片也大都用圓形來顯示，本文就介紹如何設定按鈕、文字框的圓角以及製作圓形的圖片。

 

先來看看：

如所示，我們製作了一個圓形的頭像，一個完全半圓的圓角按鈕，一個小圓角的按鈕，以及一個帶邊框且邊框為圓角的label。

大概思路如下：

View都有一個layer的屬性，我們正是通過layer的一些設定來達到圓角的目的，因此諸如UIImageView、UIButton、UILabel等view都可以設定相應的圓角。

 

對於圓形的頭像，要製作正圓，我們需要首先設定UIImageView的高寬的一致的，然後我們設定其圓角角度為高度除以2即可，相當於90度，代碼如下：

 

    // 圓形頭像    UIImageView *avatarImgView = [[UIImageView alloc] initWithFrame:CGRectMake((SCREENWIDTH - 75) / 2, 150, 75, 75)];    avatarImgView.image = [UIImage imageNamed:@"icon"];    // 圖片做圓形，圓角角度為高度的一半，而高寬一致，因此可以形成正圓    avatarImgView.layer.masksToBounds = YES;    avatarImgView.layer.cornerRadius = avatarImgView.frame.size.height / 2 ;    [self.view addSubview:avatarImgView];

 

對於第二個完全的半圓圓角，我們同樣設定角度為高度的一般，這樣可以在兩邊形聲半圓，而由於寬度與高度不同，所以不是正圓：

 

    // 完全半圓圓角的按鈕    UIButton *btnOne = [[UIButton alloc] initWithFrame:CGRectMake((SCREENWIDTH - 200) / 2, 250, 200, 40)];    [btnOne setTitle:@"完全圓角" forState:UIControlStateNormal];    [btnOne setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];    [btnOne setBackgroundColor:[UIColor colorWithRed:228.0/255.0 green:117.0/255.0 blue:97.0/255.0 alpha:1.0]];    // 按鈕圓弧，以高度的一半為圓角，兩邊會形成完整的半圓    btnOne.layer.masksToBounds = YES;    btnOne.layer.cornerRadius = btnOne.frame.size.height / 2;    [self.view addSubview:btnOne];

 

對於第三個小圓角的按鈕，我們直接設定圓角的圓度為一個數即可，數的大小決定了按鈕圓角的樣式，這裡我們設為4：

 

    // 小圓角的按鈕    UIButton *btnTwo = [[UIButton alloc] initWithFrame:CGRectMake((SCREENWIDTH - 200) / 2, 315, 200, 40)];    [btnTwo setTitle:@"小圓角" forState:UIControlStateNormal];    [btnTwo setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];    [btnTwo setBackgroundColor:[UIColor colorWithRed:228.0/255.0 green:117.0/255.0 blue:97.0/255.0 alpha:1.0]];    // 按鈕圓弧，以高度的一半為圓角，兩邊會形成完整的半圓    btnTwo.layer.masksToBounds = YES;    btnTwo.layer.cornerRadius = 4.0;    [self.view addSubview:btnTwo];

 

第四個label，我們先要添加邊框，我們設定邊框寬度為1，就可以顯示邊框了，然後同樣設定圓角為4：

 

    // 帶邊框的圓角Label    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake((SCREENWIDTH - 200) / 2, 390, 200, 40)];    label.text = @"帶邊框圓角label";    label.textAlignment = NSTextAlignmentCenter;    label.textColor = [UIColor colorWithRed:228.0/255.0 green:117.0/255.0 blue:97.0/255.0 alpha:1.0];    // 設定邊框寬度    label.layer.borderWidth = 1.0;    // 設定邊框顏色    label.layer.borderColor = [[UIColor colorWithRed:228.0/255.0 green:117.0/255.0 blue:97.0/255.0 alpha:1.0] CGColor];    // 設定圓角    [label.layer setCornerRadius:4.0];    [self.view addSubview:label];

 

如上，基本的圓角設定就實現了，很簡單實用吧。