方方正正的樣式往往會顯得很生硬,而圓角的樣式會讓人產生別樣的親切感,現在越來越多地用到圓角,諸如用戶頭像之類的圖片也大都用圓形來顯示,本文就介紹如何設置按鈕、文本框的圓角以及制作圓形的圖片。
先來看看效果圖:
如效果圖所示,我們制作了一個圓形的頭像,一個完全半圓的圓角按鈕,一個小圓角的按鈕,以及一個帶邊框且邊框為圓角的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];
如上,基本的圓角設置就實現了,很簡單實用吧。