首页 > 编程知识 正文

微博像ios一样地,Ios微博

时间:2023-05-05 19:22:46 阅读:214252 作者:356

引言:今天就花半个小时的时间,学习一下单薄的书包的导航头像缩放,小总结一下,若是侵了单薄的书包的权,请见怪,及时提醒,本篇仅供学习。

就如单薄的书包,微博所说,在很多App中,经常存在一种需求就是,界面上下滚动时用户头像也跟着变化,而用户头像是放在系统的导航条上的。也有很多人,尝试自定义View,但是单薄的书包,说了,没有必要,直接用系统的便可。(虽然,我不太认识单薄的书包,哈哈)。

要学到的知识点: - 如何分析实现原理- 如何实现缩放效果- 如何将计算缩放系数 跟着效果图一探究竟
如图所示,要明白两点: 一、是当往下滚动时,在一定范围内,会放大头像,但是不会放得过大;二、在往上滚动时,在一定范围内,会缩小头像,但是不会缩小得过小:
titleView放大缩小.gif

这说明了什么呢?头像的缩放和放大都是有上、下限的,而且,头像的起点y值始终不变。

在啰嗦一下实现原理
从效果图可以看出以下几点: 1.向上移动头像会缩小,但是有下限2.向下移动头像会放大,但是有上限3.头像的起点y始终不变 问题: 1.如何缩放控件--->使用transform来实现。2.怎样做到每次都需要更新头像的y坐标,以保证y值不变。3.有上限、下限,应设置,最小缩放系数及最大缩放系数。 解决:
1.要设置最小/最大缩放系数,我们就需要计算出来,但是如何计算呢?其实挺简单的,我们只需要设置下拉或者上拉需要处理缩放的最大距离,就可以计算出来了。 计算放大系数: MIN(1.5, 1 – offsetY / 300); 计算缩小系数: MAX(0.45, 1 – offsetY / 300); [解析]:假设正常状态下用户头像的大小为70,当放大到最大时,不得超过105;当缩小到最小时,不得小于31.5.则这个最大倍数1.5就是我们期望用户头像可放大的最大值除以正常状态下的值,即105/70.0=1.5。同样,最小倍数0.45计算公式为:31.5 / 70.0 = 0.45.
2.为了保证在缩放过程中,y坐标不变,那么就需要动态地更新y坐标,也就是在缩放时,将y坐标固定。

代码实现

首先,我们给导航栏添加一个titlteView: UIView *titleView = [[UIView alloc] init]; self.navigationItem.titleView = titleView; self.headerImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"head.jpg"]]; self.headerImageView.layer.cornerRadius = 35; self.headerImageView.layer.masksToBounds = YES; self.headerImageView.frame = CGRectMake(0, 0, 70, 70); // 这一句话非常重要,保证用户头像水平居中 self.headerImageView.center = CGPointMake(titleView.center.x, 0); [titleView addSubview:self.headerImageView];

[疑惑]:
这里为什么不直接将headerImageView作为titleView呢?因为titleView会自动被系统给设置大小了,而我们的头像是固定大小的,可以可自由调整的,因此我们只能作为一个单独的控件放在titleView上。

接下来最关键的代码就是在滚动时处理缩放用户头像的了:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGFloat offsetY = scrollView.contentOffset.y + scrollView.contentInset.top; CGFloat scale = 1.0; // 放大 if (offsetY < 0) { // 允许下拉放大的最大距离为300 // 1.5是放大的最大倍数,当达到最大时,大小为:1.5 * 70 = 105 // 这个值可以自由调整 scale = MIN(1.5, 1 - offsetY / 300); } else if (offsetY > 0) { // 缩小 // 允许向上超过导航条缩小的最大距离为300 // 为了防止缩小过度,给一个最小值为0.45,其中0.45 = 31.5 / 70.0,表示 // 头像最小是31.5像素 scale = MAX(0.45, 1 - offsetY / 300);} self.headerImageView.transform = CGAffineTransformMakeScale(scale, scale); // 保证缩放后y坐标不变 CGRect frame = self.headerImageView.frame; frame.origin.y = -self.headerImageView.layer.cornerRadius / 2;self.headerImageView.frame = frame;}

知识点扩展:

1.用Content Insets对窗口稍作调整
contentInset属性可以改变content offset的最大和最小值,这样便可以滚动出可滚动区域。它的类型为UIEdgeInsets,包含四个值:{top,left,bottom,right}。xsdls引进一个inset时,你改变了content offset的范围。比如,设置content inset顶部值为10,则允许content offset的y值达到10。

2.contentInset是scrollview的contentview的顶点相对于scrollview的位置,例如你的contentInset = (0 ,100),那么你的contentview就是从scrollview的(0 ,100)开始显示.

3.CGRectZero 是一个(0,0,0,0)的矩形常量。需要创建边框但还不确定边框大小和位置时,可以使用此常量。

结束语

终于,这个demo终于敲完了一遍,感谢单薄的书包,最后自己简单的封装了一下,以后直接用就可以。

用法: 1.导入类 ZYScaleTitleView 到您的工程中2.在所需界面中,导入头文件 #import "ZYScaleTitleView.h"3.在viewDidLoad中self.navigationItem.titleView = [[ZYScaleTitleView shareScaleTitleView] initWithTitleViewImageName:@"114"];4.在ViewDidScroll:中调去- (void)scrollViewDidScroll:(UIScrollView *)scrollView{ [[ZYScaleTitleView shareScaleTitleView] ScaleTitleView:scrollView];}

Demo地址:https://github.com/RenZhengYang/ZYScaleNavTitleView
如有不足,请指点,虚心学习,互相交流。欢迎点星,鼓励!!!

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。