iOS之用xib给控件设置圆角、边框效果

xib中为各种控件设置圆角

  • 通过代码的方式设置
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *myView;
@end

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.myView.layer.masksToBounds = YES;
    self.myView.layer.cornerRadius = 10;
}
  • 通过xib快速设置圆角

    • 利用User Defined Runtime Attributes 进行设置

身份检查器

  • 详细步骤介绍

    • 点击UI控件
    • 点击 Xcode 右侧上方身份检查器(左起第三个按钮)
    • 找到 Runtime Attributes 属性,通过Key Path 和 Value 进行设置
  • 设置圆角需要到的Key Path:
    • layer.cornerRadius ,注意该 key 对应 Value 的 type 应该设置为 String
    • layer.masksToBounds ,注意该 key 对应 Value 的 type 应该设置为 Boolean , 当右侧出现对号时为YES
    • 注意:经过测试,UILabel 必须设置设置 masksToBounds 这一键值对,才会出现圆角效果;UIButton、UIView、UIImageView 只需设置 layer.cornerRadius 这一键值对就可实现圆角效果

Xib 为控件设置边框效果

  • 通过代码方式进行设置
- (void)viewDidLoad {
    [super viewDidLoad];

    self.myView.layer.borderColor = [UIColor redColor].CGColor;
    self.myView.layer.borderWidth = 2;
}
  • 通过xib快速设置边框

    • 所用方法和上面所讲Xib设置圆角基本相同,唯一不同的就是设置 key Path 键值对
  • 设置边框需要到的Key Path:
    • layer.borderWidth ,注意该 key 对应 Value 的 type 应该设置为 String
    • layer.borderColor , 注意该 key 对应 Value 的 type 应该设置为 Color

      当我们满怀欣喜的运行程序的时候,你会发现结果并不会如你所想,边框效果并没有出现,那么难道是我们的方法不对么?

  • 不知道你有没有注意到 layer.borderColor 对应值得类型:Color;经常用代码进行边框设置的你,一定记得我们设置的颜色类型为CGColor,不错问题就出在了这上面
    • 按照上述方法我们设置的边框颜色为 UIColor 类型,当然不会起作用了啊。
  • 下面就给出一种简便的解决方法,我们只需要为 CALayer 创建一个分类就可以了,具体代码如下:
CALayer+ZZYXibBorderColor.h

#import <QuartzCore/QuartzCore.h>
@interface CALayer (ZZYXibBorderColor)

@end

CALayer+ZZYXibBorderColor.m

#import "CALayer+ZZYXibBorderColor.h"
#import <UIKit/UIKit.h>

@implementation CALayer (ZZYXibBorderColor)

- (void)setBorderColorWithUIColor:(UIColor *)color
{

    self.borderColor = color.CGColor;
}

@end

注意此时,设置边框颜色就需要用 layer.borderColorWithUIColor来代替 layer.borderColor
注意:当我们使用Xib设置控件圆角、边框的时候,如果将key Path写错,系统不会报错,但是运行不会实现理想的效果

文/念男(简书作者)
原文链接:http://www.jianshu.com/p/3f6a4343139e
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

时间: 2024-10-25 12:39:47

iOS之用xib给控件设置圆角、边框效果的相关文章

iOS之分别使用代码和storyboard、xib为控件设置圆角(以按钮为例)

首先我们看一下代码是如何给按钮设置圆角的: 我们再来看看如何在storyboard或xib中给按钮设置圆角: 1.在storyboard或xib中添加按钮后,设置标题和背景色,做好约束: 2.点击 Show the identity inspector 按钮:按钮位置如下图所示: 3.然后在User Defined Runtime Attributes 栏为按钮添加layer.cornerRadius属性,类型为Number,根据需求设置一个Value值.如下图所示: 4.到这里基本完成了对按钮

50个Android开发技巧(12 为控件加入圆角边框)

控件的圆角边框能够使你的App看起来更美观,事实上实现起来也非常easy. (原文地址:http://blog.csdn.net/vector_yi/article/details/24463025) 以创建一个灰色的带圆角边框的Button为例: 一.创建一个ShapeDrawable作为背景 在drawable文件夹下创建一个button_rounded_background.xml文件: <shape xmlns:android = "http://schemas.android.c

iOS xib的控件带有蓝色边框

效果图:

Button UIImageVIew UIView UILabel 等控件设置一个圆角

给控件设置圆角平时大家用的最多应该是layer.cornerRadius这个属性吧  但是这个属性设置成功后是4个角都是圆角类型的; 现在控制器里创建一个imageVIew UIImageView *imageView=[[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 50)]; imageView.backgroundColor=[UIColor redColor]; [self.view addSubview:imageV

iOS开发UI篇—UITableview控件使用小结

iOS开发UI篇—UITableview控件使用小结 一.UITableview的使用步骤 UITableview的使用就只有简单的三个步骤: 1.告诉一共有多少组数据 方法:- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView; 2.告诉每组一共有多少行 方法:- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSIntege

iOS开发UI篇—UITableview控件基本使

iOS开发UI篇—UITableview控件基本使用 一.一个简单的英雄展示程序 NJHero.h文件代码(字典转模型) #import <Foundation/Foundation.h> @interface NJHero : NSObject /** * 头像 */ @property (nonatomic, copy) NSString *icon; /** * 名称 */ @property (nonatomic, copy) NSString *name; /** * 描述 */ @

第二课:IOS(App)UIImage控件与TextField控件学习

作为一名实习生我是1.3.5在办公室工作,2.4.6去另一个地方听课学习IOS(app)课程,为了不落下课程,我准备每天晚上把落下的课程自学一遍,把不懂的记下等去听课的时候问老师,希望自己能跟上学习的步伐,不浪费时间.这一课是前几天听的,今天一起也写上了. 第二课:IOS(App)UIImage控件与TextField控件的学习,代码如下 一:UIImage控件代码:把图片添加到视图中并设置大小,这里没有牵涉到图片背景的颜色设置,我猜想应该是没必要去设置的吧,因为没有按钮功能的话背景颜色也看不到

iOS开发UI篇—UIPickerView控件简单介绍

iOS开发UI篇—UIPickerView控件简单介绍 一.UIPickerView 控件 1.简单介绍: 2.示例代码 TXViewController.m文件 1 // Created by 鑫 on 14-10-15. 2 3 // Copyright (c) 2014年 梁镋鑫. All rights reserved. 4 5 // 6 7 8 9 #import "TXViewController.h" 10 11 12 13 @interface TXViewContro

【转】 iOS开发UI篇—UIScrollView控件实现图片轮播

原文:http://www.cnblogs.com/wendingding/p/3763527.html iOS开发UI篇—UIScrollView控件实现图片轮播 一.实现效果 实现图片的自动轮播            二.实现代码 storyboard中布局 代码: 1 #import "YYViewController.h" 2 3 @interface YYViewController () <UIScrollViewDelegate> 4 @property (w