我们都爱笑20140412,ca1485,北京军海癫痫医院
前言
这篇文章主要给大家介绍的是利用ios实现淘宝中上拉进入详情页交互的效果，下面话不多说，来看看详细的实现过程。
实现分析
可以看到，该页面是分为两部分的，一部分是一开始就能看到的商品信息，然后我们上拉屏幕，屏幕不断往上滚动，滚动到第一部分结束时可以看到底部有“继续拖动，查看图文详情”一行文本出现。继续上拉到一个临界点便触发了翻页，此时第二部分以动画的形式从底部涌出占满整个屏幕。而且效果是该页面整体上移了，即第一部分和第二部分都是上移的。
此时，第二部分占满着整个屏幕，若我们下拉屏幕，则在屏幕顶部淡出“下拉，返回宝贝详情”的文本提示，并且达到一个临界值后文本变为“释放，返回宝贝详情”，此时松开手指，页面又滚动到第一部分的尾部。
实现方法
在自己写的demo中，第一部分是个tableview，展示商品基本信息。第二部分是个webview，展示商品图文详情。
第一步首先加载需要的视图。主要是第一部分的tableview和第二部分的webview，还有第二部分顶部显示上拉返回文本提示的headlab。为了节省资源，其实可以在上拉触发时再加载第二部分视图的，但是这里仅作示例，所以并没有懒加载。
我要评论
- (void)loadcontentview
{
// first view
[self.contentview addsubview:self.tableview];
// second view
[self.contentview addsubview:self.webview];
uilabel *hv = self.headlab;
// headlab
[self.webview addsubview:hv];
[self.headlab bringsubviewtofront:self.contentview];
}
- (uilabel *)headlab
{
if(!_headlab){
_headlab = [[uilabel alloc] init];
_headlab.text = @"上拉，返回详情";
_headlab.textalignment = nstextalignmentcenter;
_headlab.font = font(13);
}
_headlab.frame = cgrectmake(0, 0, pdwidth_mainscreen, 40.f);
_headlab.alpha = 0.f;
_headlab.textcolor = pdcolor_button_gray;
return _headlab;
}
- (uitableview *)tableview
{
if(!_tableview){
_tableview = [[uitableview alloc] initwithframe:cgrectmake(0, 0, pdwidth_mainscreen, self.contentview.bounds.size.height) style:uitableviewstyleplain];
// _tableview.contentsize = cgsizemake(pdwidth_mainscreen, 800);
_tableview.datasource = self;
_tableview.delegate = self;
_tableview.rowheight = 40.f;
uilabel *tabfootlab = [[uilabel alloc] initwithframe:cgrectmake(0, 0, pdwidth_mainscreen, 60)];
tabfootlab.text = @"继续拖动，查看图文详情";
tabfootlab.font = font(13);
tabfootlab.textalignment = nstextalignmentcenter;
// tabfootlab.backgroundcolor = pdcolor_orange;
_tableview.tablefooterview = tabfootlab;
}
return _tableview;
}
- (uiwebview *)webview
{
if(!_webview){
_webview = [[uiwebview alloc] initwithframe:cgrectmake(0, _tableview.contentsize.height, pdwidth_mainscreen, pdheight_mainscreen)];
_webview.delegate = self;
_webview.scrollview.delegate = self;
[_webview loadrequest:[nsurlrequest requestwithurl:[nsurl urlwithstring:@"https://www.baidu.com"]]];
}
return _webview;
}
然后实现滚动视图uiscrollview的代理方法，在里面完成滚动到达临界值后，触发翻页动画的处理。包括了上拉翻到第二页和下拉翻回第一页两部分，即要在该方法里通过判断scrollview的类型做相应的处理。
#pragma mark ---- scrollview delegate
-(void)scrollviewdidenddragging:(uiscrollview *)scrollview willdecelerate:(bool)decelerate
{
cgfloat offsety = scrollview.contentoffset.y;
if([scrollview iskindofclass:[uitableview class]]) // tableview界面上的滚动
{
// 能触发翻页的理想值:tableview整体的高度减去屏幕本省的高度
cgfloat valuenum = _tableview.contentsize.height -pdheight_mainscreen;
if ((offsety - valuenum) > _maxcontentoffset_y)
{
[self gotodetailanimation]; // 进入图文详情的动画
}
}
else // webview页面上的滚动
{
nslog(@"-----webview-------");
if(offsety<0 && -offsety>_maxcontentoffset_y)
{
[self backtofirstpageanimation]; // 返回基本详情界面的动画
}
}
}
再看看两个翻页的动画，其实很简单，就是移动它们的位置。
// 进入详情的动画
- (void)gotodetailanimation
{
[uiview animatewithduration:0.3 delay:0.0 options:uiviewanimationoptionlayoutsubviews animations:^{
_webview.frame = cgrectmake(0, 0, pdwidth_mainscreen, pdheight_mainscreen);
_tableview.frame = cgrectmake(0, -self.contentview.bounds.size.height, pdwidth_mainscreen, self.contentview.bounds.size.height);
} completion:^(bool finished) {
}];
}
// 返回第一个界面的动画
- (void)backtofirstpageanimation
{
[uiview animatewithduration:0.3 delay:0.0 options:uiviewanimationoptionlayoutsubviews animations:^{
_tableview.frame = cgrectmake(0, 0, pdwidth_mainscreen, self.contentview.bounds.size.height);
_webview.frame = cgrectmake(0, _tableview.contentsize.height, pdwidth_mainscreen, pdheight_mainscreen);
} completion:^(bool finished) {
}];
}
然后还有个在第二页下拉时屏幕顶部的文本提示的动画呢。这个我我们通过kvo来监听webview的scrollview的偏移量，只要其偏移量发生变化，便会实时执行kvo的代理方法，然后我们在方法内根据其偏移量的变动完成动画即可（随着偏移量变大字体变得非透明，达到某个临界点后，字体变为红色，文本内容也变为“释放，返回详情”）。
开始监听webview滚动的偏移量
// 开始监听_webview.scrollview的偏移量 [_webview.scrollview addobserver:self forkeypath:@"contentoffset" options:nskeyvalueobservingoptionnew|nskeyvalueobservingoptionold context:nil];
在kvo的代理方法里，根据偏移量完成提示文本的动画
- (void)observevalueforkeypath:(nsstring *)keypath ofobject:(id)object change:(nsdictionary<nsstring *,id> *)change context:(void *)context
{
if(object == _webview.scrollview && [keypath isequaltostring:@"contentoffset"])
{
nslog(@"----old:%@----new:%@",change[@"old"],change[@"new"]);
[self headlabanimation:[change[@"new"] cgpointvalue].y];
}else
{
[super observevalueforkeypath:keypath ofobject:object change:change context:context];
}
}
提示文本的动画的实现代码：
// 头部提示文本动画
- (void)headlabanimation:(cgfloat)offsety
{
_headlab.alpha = -offsety/60;
_headlab.center = cgpointmake(pdwidth_mainscreen/2, -offsety/2.f);
// 图标翻转，表示已超过临界值，松手就会返回上页
if(-offsety>_maxcontentoffset_y){
_headlab.textcolor = [uicolor redcolor];
_headlab.text = @"释放，返回详情";
}else{
_headlab.textcolor = pdcolor_button_gray;
_headlab.text = @"上拉，返回详情";
}
}
实现的最终效果：
总结
以上就是这篇文章的全部内容了，希望本文的内容对各位ios开发者们能有所帮助，如果有疑问大家可以留言交流。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
iOS 使用UITextField自定义搜索框 实现用户输入完之后“实时搜索”功能
网友评论