老司机工作中用到的自定义控件,总有一个适合你的(二)

时隔半个月,终于来更新第二篇了,大家有木有很期待!


一、一个强大的UITextView分类,让系统TextView自带placeholder属性、自动高度、支持输入图片三大功能

1、效果:

功能一、让系统TextView自带placeholder属性

textview9c98786a8816

image

功能二、自动改变高度,类似聊天输入框

11textviewheightchange

image

功能三、支持输入图片

image
2、使用方法:

将UITextView+WZB.h和UITextView+WZB.m拖入工程

只需要在需要使用的地方直接导入头文件UITextView+WZB.h,你的UITextView就拥有了这三大功能

13textview-demo-1

image

如果想要计算高度,只需要调用这个方法即可,你需要在block回调里手动更改textView的高度

如图

14textviewheightchange

image

插入图片的方法如下:

注释写的很清楚,效果如下:

image
3、实现大致原理:

使用runtime为textView添加如下属性

监听

当文字发生变化的时候

添加图片是用的NSTextAttachment

4、GitHub源码地址:UITextView-WZB

二、一句话实现一个可以自动计算年龄和星座的DatePicker

1、效果:

169c98786a88160

普通显示在界面上

179c98786a88161

从屏幕下边弹出

189c98786a88162

做键盘显示
2、使用方法:

将WZBDatePicker.h和WZBDatePicker.m拖入工程

只需要在需要使用的地方直接导入头文件WZBDatePicker.h,然后调用下边这个方法即可

h文件中提供了这些方法和属性,注释写的很清楚,可以直接使用。

如果做键盘显示,需要这样:

注意,参数view,必须传带有inputView的控件,比如UITextField或UITextView等

3、实现大致原理:

里边是一个tableView,tableView的headerView是一个label,显示信息。tableView的footerView是个UIDatePicker,显示日期。这样写是因为比较好控制中间两行cell的显示与隐藏,headerView和footerView也不用单独管理size

监听picker的滚动,并刷新tableView或者调用block更新时间,如果是键盘,隐藏了中间两行cell,所以不需要刷新tableView

如果enableDarkMask为yes,背景颜色变成半透明颜色,并且启用单击手势

4、GitHub源码地址:WZBDatePicker

三、一句话实现一个带有文字闪动渐变的标签

1、效果:

19wzbgraduallabels

带有文字闪动渐变的label
2、使用方法:

将WZBGradualLabel.h和WZBGradualLabel.m拖入工程

只需要在需要使用的地方直接导入头文件WZBGradualLabel.h,然后调用下边这个方法即可

20wzbgraduallabel

效果

下边是提供的一些属性和方法

h文件中提供了这些方法和属性,注释写的很清楚,所有方法可以直接使用。colors是个数组,可以设置渐变层的颜色,至少传入两个值

3、实现大致原理:

219c98786a88161

原理分析

其实看到层级图,它是有三层的,最底层的label就是你要显示的label,中间有层红色的部分,这个其实是渐变层view(截图没截好),最上层的label是渐变层的文字

这句话是设置渐变图层的mask为label图层,这样就可以用文字裁剪渐变图层了,只保留文字的部分

至于动画改变,我用的是一个UIView动画,动态改变中间层View和渐变层label的x值,view是添加在底层label上的,上层label是添加在中间view上的,先让view在父控件的最左边,上层label在此view的右边,说白了就是让上层label和底层label完全重合,为了维持这一状态,中间的view向右走,上层label必须以同样的值向左走!具体请看代码:

kvo监听这些属性,也是为了维持上层label和底层label能完全重合的状态,以便支持用户对label进行文字对其、文字改变、文字换行、字体大小、frame、换行以及attributedText等操作

4、GitHub源码地址:WZBGradualLabel

四、一行代码画一个表格,UIView的分类,可以很简单的画擅长表格

1、效果:

很多app用到了这种html元素效果,写了个demo
效果如下:

229c98786a88161

image
2、使用方法:

只需要一行代码 ,可以自定义文字颜色、背景颜色、合并单元格、点击事件等操作

.h文件中提供了这些方法,用法看注释即可,getLabelWithIndex:方法是得到第index个格子,比如你有10个格子,[view getLabelWithIndex:0];是得到第一个格子,可以对其进行任何操作,比如我在第三个表格中拿到右边三个label,添加单击手势进行跳转

3、实现大致原理:

这是核心代码,其中做了合并单元格、文字颜色、背景颜色、等判断。画线是用的贝塞尔曲线和CAShapeLayer,代码在下边,每个单元格里都创建了label显示文字。我还提供了方法画一条直线,相信项目中很多页面某些位置需要画一条直线, - (void)wzb_drawLineWithFrame:(CGRect)frame lineType:(WZBLineType)lineType color:(UIColor *)color lineWidth:(CGFloat)lineWidth这个方法能够很方便的实现这一需求

下边画了一下随机颜色的线条,最终效果是这样:

239c98786a88160

image
4、GitHub源码地址:UIView-WZB

 

1 5 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部