| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
qcgs5654
8年前发布

iOS开发 使用纯代码或xib创建圆角视图

   <p>引言:</p>    <blockquote>     <p>在我们日常开发中, 很多中情况下我们需要设置UIView或者UIImageView的圆角以及边框等,例如个人中心的用户头像等等。<br> <br> <strong>例如 简书:</strong></p>     <img alt="iOS开发 使用纯代码或xib创建圆角视图" src="https://simg.open-open.com/show/28eb3bf8e11276ec617283f1aacfa968.png">     <p>简书-我的界面</p>     <p>我们通常的做法是:</p>     <ol>      <li>使用纯代码。</li>      <li>在xib下设置属性。</li>     </ol>    </blockquote>    <p>纯代码创建圆角视图:</p>    <p>代码如下:</p>    <pre>  <code>    UIView *view = [[UIView alloc] initWithFrame:(CGRectMake(50, 100, 200, 200))];      view.backgroundColor = [UIColor brownColor];        // 设置圆角的角度(当view的宽和高相等, 且 圆角角度为宽的一半时 为圆形)      view.layer.cornerRadius = 20;        // 设置允许裁剪      view.layer.masksToBounds = YES;        // 设置边框      view.layer.borderWidth = 5;        // 设置边框颜色      view.layer.borderColor = [[UIColor redColor] CGColor];        [self.view addSubview:view];</code></pre>    <p>创建imageView 和 view 的方式是一样的, 在这里只演示view的创建。</p>    <p>xib下创建圆角视图:</p>    <p>正常情况下, 我们在xib中使用 keyPath 来设置圆角。如图:</p>    <p><img alt="iOS开发 使用纯代码或xib创建圆角视图" src="https://simg.open-open.com/show/7563a3797f71dd4b74d4cfd2508294d8.png"></p>    <p><br> 这里虽然设置了, 但是我们并不能立即在xib中看到设置后圆角效果的, 只有在程序运行后才会看到效果。 所以我们要使用 <code>IB_DESIGNABLE</code> 和 <code>IBInspectable</code> 来实现实时查看圆角效果。</p>    <p>IB_DESIGNABLE:</p>    <p>这是一个宏定义, 功能就是让XCode动态渲染出该类图形化界面。<br> 使用方法: 在自定义的view的.h文件中 添加该 宏定义。</p>    <p>IBInspectable:</p>    <p>IBInspectable 宏定义的功能是可以可视化显示自定义view中相关的属性。</p>    <p>如何实现实时查看圆角效果:</p>    <p>1.自定义view , CornerView.h:</p>    <pre>  <code>#import <UIKit/UIKit.h>  IB_DESIGNABLE  // 动态刷新  @interface CornerView : UIView  // 注意: 加上IBInspectable就可以可视化显示相关的属性  /** 可视化设置边框宽度 */  @property (nonatomic, assign)IBInspectable CGFloat borderWidth;  /** 可视化设置边框颜色 */  @property (nonatomic, strong)IBInspectable UIColor *borderColor;  /** 可视化设置圆角 */  @property (nonatomic, assign)IBInspectable CGFloat cornerRadius;  @end</code></pre>    <p>CornerView.m:</p>    <pre>  <code>@implementation CornerView.m    #pragma mark - 设置边框宽度  - (void)setBorderWidth:(CGFloat)borderWidth {        if (borderWidth < 0) return;        self.layer.borderWidth = borderWidth;  }    #pragma mark - 设置边框颜色  - (void)setBorderColor:(UIColor *)borderColor {        self.layer.borderColor = borderColor.CGColor;  }    #pragma mark - 设置圆角  - (void)setCornerRadius:(CGFloat)cornerRadius {        self.layer.cornerRadius = cornerRadius;      self.layer.masksToBounds = cornerRadius > 0;  }</code></pre>    <p><br> <br> 2.在xib中拖一个view, 将view设定为 自定义view: CornerView 如图:</p>    <p><img alt="iOS开发 使用纯代码或xib创建圆角视图" src="https://simg.open-open.com/show/51fd1ba67bea1f14891efb6eb2ff0e90.png"></p>    <p><br> 注意: <code>Designable</code> 如果没有这行字,说明没有正确添加添加IB_DESIGNABLE,如果它的状态显示up to date,说明设置成功, 如果是updating,说明视图在更新,案如果是build failed的话,请检查布局代码,可能有哪里出错了。</p>    <p>3.如图, 我们就可以看到自定义view中设置的属性了:</p>    <p><img alt="iOS开发 使用纯代码或xib创建圆角视图" src="https://simg.open-open.com/show/8317e389d4a52f0448c86a4140081eb5.png"></p>    <p>4.设置好 属性后 , 右边的view就会立即 更新了!</p>    <p><img alt="iOS开发 使用纯代码或xib创建圆角视图" src="https://simg.open-open.com/show/ae12848bf0cdaf89908661c32e03f3db.png"></p>    <p>该方法同样适用于UIIamgeView ! ! ! !</p>    <p>效果图:</p>    <p><img alt="iOS开发 使用纯代码或xib创建圆角视图" src="https://simg.open-open.com/show/e5447e0592f4a51acf92b022780a661c.png"></p>    <p><br> <br> 本篇文章对应的源代码下载地址:<a href="/misc/goto?guid=4959674461732942978">CornerViewDemo</a></p>    <p><strong>该 demo 中封装了 自定义view 和 自定义imageView , 可以将CornerTool文件夹拖入到项目中直接使用, <code>xib下 view</code> 继承 <code>CornerView</code>类, <code>imageView</code> 继承 <code>CornerImageView</code>即可设置属性。</strong></p>    <p><br> 来自:https://github.com/LiCheng244/CornerViewDemo</p>    
 本文由用户 qcgs5654 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1466066889574.html
IOS iOS开发 移动开发