OC基础之可循环滚动并突出中间图片,并且可点击
前两天一哥们儿让我帮他写一下:可循环滚动并突出中间图片,并且可点击的一种滑动视图的效果,今天放在这里给大家展示一下,具体文字代码中都有注解,代码还有待完善,不喜勿喷,转载请注明,下载请点星,谢谢~
-(void)addItemViewWithArray:(NSArray *)imgArr titleArray:(NSArray *)titleArr
{
//这里因为我要保证屏幕上至少能够出现三个完整的,两边两个部分内容,所以我写了4
if (_imgArray.count<4) {
return;
}
//设计item大小,中间比两边的宽、高各大30,间距为10,距离左右边界为30
itemWidthF = (_frameE.size.width-30*2-30-20)/3;
itemHeightF = _frameE.size.height-30;
bigItemWidthF = itemWidthF+30;
bigItemHeightF = itemHeightF+30;
//中心值
xCenterF = _frameE.size.width/2.0;
//创建新的数组
NSMutableArray *newImgArr = [NSMutableArray new];
NSMutableArray *newTitleArr = [NSMutableArray new];
for (int i = 0; i < imgArr.count+4; i++) {
if (i < 2) {//0,1
[newImgArr addObject:imgArr[imgArr.count+i-2]];
[newTitleArr addObject:titleArr[titleArr.count+i-2]];
}else if(i >= 2 && i < imgArr.count+2){//2,3,.....(imgArr.count-1)
[newImgArr addObject:imgArr[i-2]];
[newTitleArr addObject:titleArr[i-2]];
}else{
[newImgArr addObject:imgArr[i-imgArr.count-2]];
[newTitleArr addObject:titleArr[i-imgArr.count-2]];
}
}
//记录数组数量
NSInteger totalNum = newImgArr.count;
for (int i = 0; i < totalNum; i++) {
UIButton *bgBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[bgBtn setTitle:newTitleArr[i] forState:UIControlStateNormal];
[bgBtn setBackgroundColor:[UIColor blueColor]];
bgBtn.layer.cornerRadius = 5;
bgBtn.layer.borderColor = [UIColor lightGrayColor].CGColor;
bgBtn.layer.borderWidth = 1.0;
[bgBtn setBackgroundImageForState:UIControlStateNormal withURL:[NSURL URLWithString:newImgArr[i]] placeholderImage:[UIImage imageNamed:@""]];
[bgBtn addTarget:self action:@selector(bgBtnClick:) forControlEvents:UIControlEventTouchUpInside];
bgBtn.userInteractionEnabled = NO;
if (i == 2) {
bgBtn.frame = CGRectMake(30+(itemWidthF+10)*i, 0, bigItemWidthF, bigItemHeightF);
bgBtn.userInteractionEnabled = YES;
[_bgScrollV setContentOffset:CGPointMake(((30+(itemWidthF+10)*i)+bigItemWidthF/2)-xCenterF, 0) animated:YES];
_currentInt = i;
}else if(i>2){
bgBtn.frame = CGRectMake(30+(itemWidthF+10)*i+30, 15, itemWidthF, itemHeightF);
}else{
bgBtn.frame = CGRectMake(30+(itemWidthF+10)*i, 15, itemWidthF, itemHeightF);
}
bgBtn.tag = i+100;
[_bgScrollV addSubview:bgBtn];
}
_bgScrollV.contentSize = CGSizeMake((itemWidthF+10)*totalNum+30+30*2, bigItemHeightF);
[self addgesture];
}
//手势方法
-(void)transitionPush:(UISwipeGestureRecognizer *)swipeGes
{
[UIView animateWithDuration:0.2 animations:^{
UIButton *oldBtn = (UIButton *)[_bgScrollV viewWithTag:_currentInt+100];
//取消旧按钮的交互
oldBtn.userInteractionEnabled = NO;
//NSLog(@"输出1111--------%ld",_currentInt);
if (swipeGes.direction == UISwipeGestureRecognizerDirectionLeft){
if (_currentInt==_imgArray.count+2-1) {
NSLog(@"已经是最后一张了....");
//回到最原始的位置,记录的是数组中的索引值
_currentInt = 2;
//变大的后面的按钮到最后一个的位置都变小
for (int i = 3; i<_imgArray.count+2; i++) {
UIButton *allOldBtn = (UIButton *)[_bgScrollV viewWithTag:i+100];
allOldBtn.frame = CGRectMake(30+(itemWidthF+10)*i+30, 15, itemWidthF, itemHeightF);
}
}else{
_currentInt = _currentInt+1;
//旧的按钮变小,比下面的差了30的距离
oldBtn.frame = CGRectMake(30+(itemWidthF+10)*(_currentInt-1), 15, itemWidthF, itemHeightF);
}
}
if(swipeGes.direction == UISwipeGestureRecognizerDirectionRight){
if (_currentInt==2) {
NSLog(@"已经是第一张了....");
//回到最后的位置,记录的是数组中的索引值
_currentInt = _imgArray.count+2-1;
//变大的后面的按钮到_currentInt==2的位置都变小
for (int i = 2; i<_imgArray.count+2-1; i++) {
UIButton *allOldBtn = (UIButton *)[_bgScrollV viewWithTag:i+100];
allOldBtn.frame = CGRectMake(30+(itemWidthF+10)*i, 15, itemWidthF, itemHeightF);
}
}else{
_currentInt = _currentInt-1;
//旧的按钮变小
oldBtn.frame = CGRectMake(30+(itemWidthF+10)*(_currentInt+1)+30, 15, itemWidthF, itemHeightF);
}
}
//新的变大
UIButton *newBtn = (UIButton *)[_bgScrollV viewWithTag:_currentInt+100];
newBtn.frame = CGRectMake(30+(itemWidthF+10)*_currentInt, 0, bigItemWidthF, bigItemHeightF);
//添加新按钮的交互
newBtn.userInteractionEnabled = YES;
[_bgScrollV setContentOffset:CGPointMake(((30+(itemWidthF+10)*_currentInt)+bigItemWidthF/2)-xCenterF, 0) animated:YES];
//NSLog(@"输出2222--------%ld",_currentInt);
}];
}
效果图:(源码下载:https://github.com/hbblzjy/OCSelectImgDemo)
OC基础之可循环滚动并突出中间图片,并且可点击的更多相关文章
- 【OC基础语法考试】
OC基础语法已经全部学完,但是这些知识只是最基础的,还有很多高级知识,这个可能需要后面慢慢的去学习才能体会到.接下来我会总结前面的OC基础语法,如果大家发现有什么不正确的地方,请指正,小弟是新生,多请 ...
- iOS 阶段学习第11天笔记(OC基础知识)
iOS学习(OC语言)知识点整理 一.OC基础知识 1)#import 用于导入头文件,预处理阶段加载引用,只加载一次. 2)OC 依赖于Foundation框架下的头文件Foundation.h, ...
- OC基础笔记目录
OC基础(1) Objective-C简介 OC和C对比 第一个OC程序 面向对象思想 OC基础(2) 类与对象 类的设计 第一个OC类 对象方法的声明和实现 类方法的声明和实现 OC基础(3) 对象 ...
- OC基础 文件管理
OC基础 文件管理 1.文件管理类NSFileManager对象的创建: NSFileManager *fm = [NSFileManager defaultManager]; 2.文件操作: (1 ...
- OC基础 NSDate
OC基础 NSDate #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @auto ...
- OC基础 NSData
OC基础 NSData 1.NSString转NSData //NSString转NSData NSString *string = @"abcd12345"; NSData *d ...
- OC基础 代理和协议
OC基础 代理和协议 1.协议 (1)oc语言中得协议:一组方法列表,不需要我们自己实现,由遵守协议的类来实现协议所定制的方法. (2)协议的使用步骤:制定协议-->遵守协议-->实现协议 ...
- OC基础 内存管理
OC基础 内存管理 我们所了解的c语言内存管理,如下: (1)c语言的内存分配:char *p = (char*)malloc(100*sizeof(char)); (2)c语言的内存释放:free ...
- OC基础 类的三大特性
OC基础 类的三大特性 OC的类和JAVA一样,都有三大特性:继承,封装,多态,那么我们就来看一下OC中类的三大特性. 1.继承 继承的特点: (1)子类从父类继承了属性和方法. (2)子类独有的属 ...
随机推荐
- React-Native(四):React Native之View学习
React Native实现以下布局效果:携html5(http://m.ctrip.com/html5/) 基于HelloWord修改项目代码: /** * Sample React Native ...
- Java - Spring MVC 实现跨域资源 CORS 请求
拦截器设置响应头 这种方式原理就是利用拦截器在方法执行前,我们增加请求的响应头,用来支持跨域请求.这种方案是可行的,大部分都是采用这种方案.我当时也是打算采用这种方案,直到我发现原来 Spring 框 ...
- jquery ajax 发送邮件例子
<div class="form"> <dl> <dt>您的称呼<small>(必填)</small></dt&g ...
- C# 关键字替换
/// <summary> /// 关键字替换 /// </summary> /// <param name="body"></param ...
- C# 获取网页源代码
/// <summary> /// 获取网页源代码 /// </summary> /// <param name="url"></para ...
- 最新版Charles破解方法(Mac+Windows).md
Charles 破解 去网站 http://charles.iiilab.com/ 下载相对应的版本 下载破解文件 charles.jar http://charles.iiilab.com/ 替换掉 ...
- 两个css之间的切换
需求: 头部两个按钮 两种样式之间的切换 解决办法: 结合JQ 三目运算 来处理 第一步: 把需要切换的样式设置为样式里背景,这样做的目的为了避免 js里出现过多 css代码 二来这样会显得更加的清 ...
- 如何设计一款APP,才能吸引用户眼球
有APP分析机构研究表明,人们每天耗费在手机和平板上的平均时长为158分钟,其中127分钟是耗费在各类APP中,而仅有31分钟是花费在浏览网页上.随着人们对互联网的依赖性越来越强,移动APP发展迅速已 ...
- [LeetCode] Brick Wall 砖头墙壁
There is a brick wall in front of you. The wall is rectangular and has several rows of bricks. The b ...
- react-router 4实现代码分割(code spliting)
官方一开始推荐的使用bundle-loader来做代码分割的方式感觉有点麻烦,而且代码看起来有点不舒服.而且需要一直依赖bunder-loader 一开始我想为什么不能像vue一样,直接使用ES的新特 ...