首页 技术 正文
技术 2022年11月14日
0 收藏 510 点赞 2,212 浏览 2888 个字

IOS中一般会用到几种方式自定义UIView

1、继承之UIView的存代码的自定义View

2、使用xib和代码一起使用的自定义View

3、存xib的自定义View(不需要业务处理的那种)

本文主要就介绍下存代码的自定义UIView和能够在storeboard中实时显示效果的自定义UIView

先上效果图

IOS自定义UIView

上面为设计界面,能够直接显示一个View的圆角与边框线

IOS自定义UIView

上面那个圆形饼图是用纯代码自定义的

1.实现在storeboard中实时显示效果的自定义UIView

1、创建MyView.h 继承 UIView

#import <UIKit/UIKit.h>// 设置类为可视化设计
IB_DESIGNABLE
@interface MyView : UIView// IBInspectable 为可视化设计属性// 边框宽度
@property (nonatomic,assign)IBInspectable float borderWidth;// 边框颜色
@property (nonatomic,retain)IBInspectable UIColor* borderColor;// 圆角
@property (nonatomic,assign)IBInspectable float cornerRadius;@end

这里要注意的就是上面的两个关键标签

<!–
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #78492a}
span.s1 {font-variant-ligatures: no-common-ligatures}
–>

IB_DESIGNABLE :代表的是这个类可以在storeboard中显示实时的效果

<!–
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #78492a}
span.s1 {font-variant-ligatures: no-common-ligatures}
–>

IBInspectable :代表把这个属性能在storeboard中修改

2、MyView.m的实现

//
// MyView.m
// 01_CirProgress
//
// Created by xgao on 15/10/29.
// Copyright (c) 2015年 xgao. All rights reserved.
//#import "MyView.h"@implementation MyView// 边框宽度
- (void)setBorderWidth:(float)borderWidth{ self.layer.borderWidth = borderWidth;
}// 边框颜色
- (void)setBorderColor:(UIColor *)borderColor{ self.layer.borderColor = borderColor.CGColor;
}// 圆角
- (void)setCornerRadius:(float)cornerRadius{ self.layer.cornerRadius = cornerRadius;
}@end

3、在storeboad中添加一个view,并且设置这个view的类为 我们刚才创建的 MyView

IOS自定义UIView

IOS自定义UIView

上图里面的那些属性就是我们在.h文件里面加了IBInspectable关键字的属性,这里就能实时修改看效果了。

2.实现纯代码的自定义View

1、创建一个继承UIView的 MyProgress 类文件,MyProgress.h 如下:

#import <UIKit/UIKit.h>@interface MyProgress : UIView// 当时进度值
@property (nonatomic,assign) float progressValue;@end

2、MyProgress.m 如下:

#import "MyProgress.h"@implementation MyProgress
{
float _proValue;
}// 重写初始化方法
- (id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) { // 设置背影为透明色
self.backgroundColor = [UIColor clearColor];
}
return self;
}// 重设progressValue属性
- (void)setProgressValue:(float)progressValue
{
_progressValue = progressValue; // 重新画UI
[self setNeedsDisplay];
}// 绘图
- (void)drawRect:(CGRect)rect { // 获取画图的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext(); /**** 绘制圆形背景线 ****/ // 圆的半径
float r = rect.size.width / 2.0; // 全圆
CGFloat endAngle = M_PI * ; // 画圆形线
CGContextAddArc(ctx, r, r, r, , endAngle, ); // 背影颜色
CGContextSetRGBFillColor(ctx, 0.7, 0.7,0.7, ); // 完成绘制
CGContextFillPath(ctx); /**** 绘制扇形区域 ****/ // 计算结束角度
endAngle = M_PI * * _progressValue; /** 画圆
* 参数1:c 当前上下文
* 参数2:x 圆的X坐标
* 参数3:y 圆的Y坐标
* 参数4:radius 圆的半径
* 参数5:startAngle 开始角度
* 参数6:endAngle 结束角度
* 参数7:clockwise 是否逆时针
*/
CGContextAddArc(ctx, r, r, r, , endAngle, ); // 连成线,成弧形
CGContextAddLineToPoint(ctx, r, r);
// 其实就是在连接的那条线上加一个点,让线条连接到那一个点,就像拉弓,可加多个点
// CGContextAddLineToPoint(ctx, r + 20, r + 20); // 填充颜色
CGContextSetRGBFillColor(ctx, , , , ); // 完成绘制
CGContextFillPath(ctx);}

3、调用自定义的MyProgress类

#import "MyProgress.h"@interface ViewController ()
{
MyProgress* _myProView;
}
@end@implementation ViewController- (void)viewDidLoad {
[super viewDidLoad]; // 创建自定义控件
_myProView = [[MyProgress alloc]initWithFrame:CGRectMake(, , , )];
// 默认进度
_myProView.progressValue = 0.2; [self.view addSubview:_myProView];
}
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,918
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,444
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,255
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,069
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,701
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,741