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

今天总结了一下平时工作中为那些奇葩的UI设计自定义的控件,下面一个个分享给大家。


一、第一个是tableView的透明度渐变效果

1、效果:

很多app用到了这种效果,比如歌词显示、直播间聊天记录等。
大致效果如下:

1a9b2d43d35e3
WZBGradualTableView

2a9b2d43d35e3

背景图片截取自新浪直播,侵立删
2、使用方法:

参数值说明一下,direction代表方向,是一个位移枚举,如果想让tableView顶部渐变,则此值为WZBTableViewGradualDirectionTop,如果为底部渐变,则此值为WZBTableViewGradualDirectionBottom,如果上下都要渐变,则需要WZBTableViewGradualDirectionTop | WZBTableViewGradualDirectionBottom。gradualValue代表渐变范围值,值的范围为0-1,如果想让顶部20%渐变,此值为@(0.2)。如果想顶部底部都有20%渐变,此值为@[@(0.2), @(0.2)]。

如下:

则显示效果为:

2a9b2d43d35e3

WZBGradualTableView

如果这样写

效果如下:

1a9b2d43d35e3

背景图片截取自新浪直播,侵立删
3、实现大致原理:

这种渐变效果主要用到tableView的mask属性,我们首先要创建一个CAGradientLayer,此类的使用网上介绍有很多,在这里不再累述,不懂得私聊我,或者加入我的技术群。

上代码:

由于tableView可以滑动,滑动的时候就需要实时的作出改变,因此我这里使用KVO监听“contentOffset”属性,每当contentOffset发生改变,证明用户滑动了tableView,这时候需要调用的代码为:

别忘了移除观察者:

4、GitHub源码地址:WZBGradualTableView

二、自定义的开关控件

1、效果:

wzbswitch

WZBSwitch
2、使用方法:

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

在需要使用的地方调用

对于开关状态的监听或者您还可以通过代理:

然后实现代理方法即可

如果您想自定义开关颜色,代码如下:

或者这样

3、实现大致原理:

此控件由两部分组成,顶部View和底部View

这个方法有两个block参数,第一个可以设置您所需要设置的所有颜色值,第二个block是当开关状态发生改变的时候回调

此方法用于设置开关状态

如果您不喜欢使用block,我还提供了代理方法监听开关状态的改变

当外界调用方法改变开关状态时,动画/非动画,改变上层View的frame即可

4、GitHub源码地址:WZBSwitch

三、一个仿网易的Segment

1、效果:

7a9b2d43d35e3

WZBSegmentedControl
2、使用方法:

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

在需要使用的地方调用

3、实现大致原理:

此控件还不是很完善,目前只提供一个初始化方法:

核心方法:改变底部白色滑块的位置,但是如果注意观察,有个注意点是,在滑动的时候title的文字也会随着渐变,目前先试用这个方法临时解决,后续会提供方法设置文字颜色、选中文字颜色、背景颜色以及滑块颜色等。

4、GitHub源码地址:WZBSegmentedControl

怎么样,这些您学会怎么用了吗?

1 8 收藏 评论

相关文章

可能感兴趣的话题



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