share
一个自动轮播图的完整实现过程
UIScrollView的一部分基本属性
- frame:@property(nonatomic) CGRect frame; 决定了该ScrollView所占其父视图的相对位置 ,后面一般是CGRectMake函数。
- pagingEnabled:@property(nonatomic, getter=isPagingEnabled) BOOL pagingEnabled; 是否按整页翻动
- scrollEnabled:@property(nonatomic, getter=isScrollEnabled) BOOL scrollEnabled; 能否滚动
- alwaysBounceVertical:@property(nonatomic) BOOL alwaysBounceVertical;是否开启纵向弹动效果
- alwaysBounceHorizontal:@property(nonatomic) BOOL alwaysBounceHorizontal; 是否开启横向弹动效果
- showsHorizontalScrollIndicator:@property(nonatomic) BOOL showsHorizontalScrollIndicator; 是否显示横向滚动条
- showsVerticalScrollIndicator:@property(nonatomic) BOOL showsVerticalScrollIndicator; 是否显示纵向滚动条
- contentSize:@property(nonatomic) CGSize contentSize;
设置画布大小,画布显示在滚动视图内部,一般大于frame大小(当需要多张图片滚动时)
scrollView的第一个frame和最后一个contenrSize的设置尤其重要,容易出错
无限轮播图原理
实现无线轮播,需要将图片顺序整理好,例如:
1,2,3,4号图片,把它们添加到scrollView中,则应是如下顺序
4,1,2,3,4,1
当图片向右播到第五张,也就是第二个4号图片,此时使用contentOfset属性,使scrollView跳转到第一张图片。这样完成了从“4”到“4”的跳转。实现了无线轮播。
自动无线轮播
这里设置了属性
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface FirstViewController : UIViewController
<UIScrollViewDelegate>
@property (strong, nonatomic) UIScrollView* autoScroll ;
@property (strong, nonatomic) NSTimer* scrollTimer ;
@end
NS_ASSUME_NONNULL_END
接下来在.m文件设置滚动视图
_autoScroll = [[UIScrollView alloc] init] ;
_autoScroll.frame = CGRectMake(0, 0, self.view.frame.size.width, 220) ;
_autoScroll.pagingEnabled = YES ;
_autoScroll.scrollEnabled = YES ;
_autoScroll.alwaysBounceVertical = NO ;
_autoScroll.alwaysBounceHorizontal = YES ;
_autoScroll.showsVerticalScrollIndicator = NO ;
_autoScroll.showsHorizontalScrollIndicator = NO ;
_autoScroll.backgroundColor = [UIColor blackColor] ;
//轮播图画布大小,需大于frame大小
_autoScroll.contentSize = CGSizeMake(428*6, 220) ;
//循环添加图片到autoScroll
for(int i = 0; i < 6; i++) {
NSString* imageName = [[NSString alloc] init] ;
if(i == 0) {
imageName = @"main_img4.png" ;
}
if(i == 1) {
imageName = @"main_img1.png" ;
}
if(i == 2) {
imageName = @"main_img2.png" ;
}
if(i == 3) {
imageName = @"main_img3.png" ;
}
if(i == 4) {
imageName = @"main_img4.png" ;
}
if(i == 5) {
imageName = @"main_img1.png" ;
}
//显示视图
UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectMake(i* _autoScroll.frame.size.width, 0, _autoScroll.frame.size.width, 220)] ;
imageView.image = [UIImage imageNamed:imageName] ;
[_autoScroll addSubview: imageView] ;
}
[self.view addSubview:_autoScroll] ;
定时器的设置
_scrollTimer = [NSTimer scheduledTimerWithTimeInterval:3.0 target:self selector:@selector(goToRight) userInfo:nil repeats:YES] ;
[[NSRunLoop currentRunLoop] addTimer:_scrollTimer forMode:NSDefaultRunLoopMode] ;
//自动轮播的关键函数
- (void) goToRight {
int page = _autoScroll.contentOffset.x/self.view.frame.size.width ;
if(page!=4) {
[_autoScroll setContentOffset:CGPointMake(428*(page%5+1), 0) animated:YES] ;
}else {
_autoScroll.contentOffset = CGPointMake(0, 0) ;
}
}
//滚动视图开始被拖拽
- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
if(scrollView.tag == 1) {
[_scrollTimer invalidate] ;
_scrollTimer = nil ;
}
}
//滚动视图停止被拖拽
- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
if(scrollView.tag == 1) {
_scrollTimer = [NSTimer scheduledTimerWithTimeInterval:3.0 target:self selector:@selector(goToRight) userInfo:nil repeats:YES] ;
}
}
这样,一个可以自动翻页的轮播图就完成了。
上传图片界面——协议传值的使用
传值的发起者订立协议 ,协议需要实现方法:
sendPic: sendPicNum: 。
并且创建一个代理对象
//所自定义的协议
@protocol upPicDelegate <NSObject>
//协议函数
- (void) sendPic:(UIImage*)pic sendPicNum:(NSInteger) picNum ;
@end
@interface upPicViewController : UIViewController
//代理对象创建
@property (strong, nonatomic) id<upPicDelegate> delegate ;
@end
传值的接收者继承协议,并在.m文件完成协议函数
@interface upLoadViewController : UIViewController <upPicDelegate>
- (void) sendPic:(UIImage*)pic sendPicNum:(NSInteger) picNum ;
@end
从这个协议方法来接收到传来的值(方法的形式参数)
//协议函数,接收图片名和数字
- (void) sendPic:(UIImage*)pic sendPicNum:(NSInteger)picNum {
NSString* str =[NSString stringWithFormat:@"%ld",picNum] ;
_nLabel.text = str ;
_nLabel.textColor = [UIColor blackColor] ;
_HimageView.image = pic ;
[_HimageView addSubview:_nLabel] ;
}
协议的发起者通过代理对象调用协议方法,完成从发起者到接收者的一个传值过程
//_array 是可变数组,存储了所需传递的图片元素
[_delegate sendPic:_array.lastObject sendPicNum:_array.count] ;
最后会传回最后一张图片,以及所选图片数量
UISegmentedControl与UIscrollView的结合应用
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface ThirdViewController : UIViewController<UIScrollViewDelegate>
@end
NS_ASSUME_NONNULL_END
需要签订UIScrollViewDelegate协议
@property (strong, nonatomic) UISegmentedControl* segment ;
@property (strong, nonatomic) UIScrollView* backScroll ;
设置了两个属性
有关scrollView的内容不再赘述,这里是segmentedControl的创建
NSArray* array = [NSArray arrayWithObjects:@"推荐",@"热度高", @"最近浏览", nil] ;
_segment = [[UISegmentedControl alloc] initWithItems:array] ;
_segment.frame = CGRectMake(0, 100, 428, 25) ;
_segment.tintColor = [UIColor blackColor] ;
[_segment addTarget:self action:@selector(pressSc:) forControlEvents:UIControlEventValueChanged] ;
[self.view addSubview: _segment] ;
[self.view addSubview:_backScroll ];
接下来需要让两种不同的控件关联起来,具体细节见注释
//点击segmentedControl时,scrollView作出的响应
- (void)pressSc: (UISegmentedControl*) seg{
//点击第一个按钮,scrollView跳转
if (seg.selectedSegmentIndex == 0) {
[_backScroll setContentOffset:CGPointMake(0, -40) animated:YES];
} else if (seg.selectedSegmentIndex == 1) {
//点击第二个按钮,scrollView跳转
[_backScroll setContentOffset:CGPointMake(428, -40) animated:YES];
} else if (seg.selectedSegmentIndex == 2) {
//点击第三个按钮,scrollView跳转
[_backScroll setContentOffset:CGPointMake(2 * 428, -40) animated:YES];
}
}
//滑动scrollView到指定位置(坐标)时,segmentedControl作出的反应
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
//scrollView的x坐标分别为0,428,428*2时,上方segmented的按钮变化
if (scrollView.contentOffset.x == 0) {
_segment.selectedSegmentIndex = 0;
} else if (scrollView.contentOffset.x == 428) {
_segment.selectedSegmentIndex = 1;
} else if (scrollView.contentOffset.x == 428 * 2) {
_segment.selectedSegmentIndex = 2;
}
}