今天寫一個(gè)tableView辆飘,要在cell上放scrollView和pageControl,期間碰上了幾個(gè)問題驶赏,這里把解決方法記錄一下:
這是最終要實(shí)現(xiàn)的效果:
最初的代碼是把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];
}
}
寫完以后碰到了第一個(gè)問題:
pageControl的右邊總是多出來一截咏花,無論是把寬度寫死,還是取scrollView的寬度都不好使棚菊,往下劃動(dòng)tableVIew到第二頁的時(shí)候才恢復(fù)正常
解決方法是以cell的frame為參照設(shè)置寬度:
pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(kScaleX*15, CGRectGetMaxY(photoScrollView.frame)-20, cell.contentView.frame.size.width-kScaleX*30, 20)];
接下來碰到了第二個(gè)問題:
pageControl翻頁不好使统求,有時(shí)劃動(dòng)第二個(gè)cell上的圖片,卻是第一個(gè)cell的小圓點(diǎn)在動(dòng)像屋。
我想了個(gè)蠢辦法,把所有pageControl放到一個(gè)數(shù)組里篇恒,再根據(jù)tag匹配,但這個(gè)tableView是可以上拉加載的腾么,這樣寫的話如果數(shù)據(jù)有100頁攘须,那就是好幾百個(gè)pageControl。
最后決定自定義一個(gè)繼承自UIView的類捞魁,把scrollView和pageControl,以及它們之間的交互都寫在這個(gè)類里:
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布局的時(shí)候只要把這個(gè)自定義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方法中傳入需要展示的圖片數(shù)組
這樣每個(gè)cell中的pageControl就互不干擾了