今天写一个tableView，要在cell上放scrollView和pageControl，期间碰上了几个问题，这里把解决方法记录一下：
这是最终要实现的效果：
WechatIMG2.png
最初的代码是把scrollView和pageControl都加到cell上：
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *identifier = @"cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
if (cell == nil) {
cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
}
cell.selectionStyle = UITableViewCellSelectionStyleNone;
[self setCell:cell indexPath:indexPath];
return cell;
}
- (void)setCell:(UITableViewCell *)cell indexPath:(NSIndexPath *)indexPath {
[cell.contentView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
if (self.dataArr.count > 0) {
self.photoScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(kScaleX*15, kScaleY*15, kScaleX*345, kScaleY*150)];
self.photoScrollView.delegate = self;
self.photoScrollView.backgroundColor = [UIColor whiteColor];
self.photoScrollView.pagingEnabled = YES;
self.photoScrollView.showsHorizontalScrollIndicator = NO;
self.photoScrollView.layer.cornerRadius = 5;
self.photoScrollView.clipsToBounds = YES;
self.photoScrollView.contentSize = CGSizeMake(self.photoScrollView.frame.size.width*[self.dataArr[indexPath.row][@"imgs"] count], 0);
[cell.contentView addSubview:self.photoScrollView];
for (int i = 0; i < [self.dataArr[indexPath.row][@"imgs"] count]; i++) {
UIImageView *photoImg = [[UIImageView alloc]initWithFrame:CGRectMake(i*self.photoScrollView.frame.size.width, 0, self.photoScrollView.frame.size.width,self.photoScrollView.frame.size.height)];
[photoImg sd_setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"http://%@%@?imageMogr2/thumbnail/!500x300r",kQNImageDomain,self.dataArr[indexPath.row][@"imgs"][i]]] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
}];
photoImg.contentMode = UIViewContentModeScaleAspectFill;
photoImg.clipsToBounds = YES;
[self.photoScrollView addSubview:photoImg];
}
self.pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(kScaleX*15, CGRectGetMaxY(self.photoScrollView.frame)-20, kScaleX*345, 20)];
self.pageControl.numberOfPages = [self.dataArr[indexPath.row][@"imgs"] count];
self.pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
self.pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
self.pageControl.userInteractionEnabled = NO;
[cell.contentView addSubview:self.pageControl];
self.pageControl.backgroundColor = [UIColor yellowColor];
}
}
写完以后碰到了第一个问题：
WechatIMG131.jpeg
pageControl的右边总是多出来一截，无论是把宽度写死，还是取scrollView的宽度都不好使，往下划动tableVIew到第二页的时候才恢复正常
解决方法是以cell的frame为参照设置宽度：
pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(kScaleX*15, CGRectGetMaxY(photoScrollView.frame)-20, cell.contentView.frame.size.width-kScaleX*30, 20)];
接下来碰到了第二个问题：
pageControl翻页不好使，有时划动第二个cell上的图片，却是第一个cell的小圆点在动。
我想了个蠢办法，把所有pageControl放到一个数组里，再根据tag匹配，但这个tableView是可以上拉加载的，这样写的话如果数据有100页，那就是好几百个pageControl。
最后决定自定义一个继承自UIView的类，把scrollView和pageControl，以及它们之间的交互都写在这个类里：
PhotoView.h:
#import <UIKit/UIKit.h>
@interface PhotoView : UIView<UIScrollViewDelegate>
- (instancetype)initWithFrame:(CGRect)frame cellTag:(NSInteger)tag photoArray:(NSArray *)photoArr;
@end
PhotoView.m:
#import "PhotoView.h"
#import "UIImageView+WebCache.h"
@implementation PhotoView
{
UIScrollView *photoScrollView;
UIPageControl *pageControl;
}
- (instancetype)initWithFrame:(CGRect)frame cellTag:(NSInteger)tag photoArray:(NSArray *)photoArr {
self = [super initWithFrame:frame];
if (self) {
[self createSubViewWithFrame:frame cellTag:tag andPhotos:photoArr];
}
return self;
}
- (void)createSubViewWithFrame:(CGRect)frame cellTag:(NSInteger)tag andPhotos:(NSArray *)photoArr {
photoScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
photoScrollView.delegate = self;
photoScrollView.backgroundColor = [UIColor whiteColor];
photoScrollView.pagingEnabled = YES;
photoScrollView.showsHorizontalScrollIndicator = NO;
photoScrollView.layer.cornerRadius = 5;
photoScrollView.clipsToBounds = YES;
photoScrollView.bounces = NO;
photoScrollView.contentSize = CGSizeMake(photoScrollView.frame.size.width*[photoArr[tag][@"imgs"] count], 0);
[self addSubview:photoScrollView];
for (int i = 0; i < [photoArr[tag][@"imgs"] count]; i++) {
UIImageView *photoImg = [[UIImageView alloc]initWithFrame:CGRectMake(i*photoScrollView.frame.size.width, 0, photoScrollView.frame.size.width,photoScrollView.frame.size.height)];
[photoImg sd_setImageWithURL:[NSURL URLWithString:[NSString stringWithFormat:@"http://%@%@?imageMogr2/thumbnail/!500x300r",kQNImageDomain,photoArr[tag][@"imgs"][i]]] completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
}];
photoImg.contentMode = UIViewContentModeScaleAspectFill;
photoImg.clipsToBounds = YES;
[photoScrollView addSubview:photoImg];
}
pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(photoScrollView.frame)-20, photoScrollView.frame.size.width, 20)];
pageControl.numberOfPages = [photoArr[tag][@"imgs"] count];
pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
pageControl.currentPageIndicatorTintColor = [UIColor whiteColor];
pageControl.userInteractionEnabled = NO;
[self addSubview:pageControl];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGPoint offset = scrollView.contentOffset;
NSInteger index = offset.x / scrollView.frame.size.width;
pageControl.currentPage = index;
}
@end
这样在写cell布局的时候只要把这个自定义View放上去就好了：
PhotoView *myPhotoView = [[PhotoView alloc]initWithFrame:CGRectMake(kScaleX*15, kScaleY*15, kScaleX*345, kScaleY*150) cellTag:indexPath.row photoArray:self.dataArr];
[cell.contentView addSubview:myPhotoView];
自定义init方法中传入需要展示的图片数组
这样每个cell中的pageControl就互不干扰了
网友评论