UIPageControl在UITableView和UIScrollView上的使用

今天寫一個(gè)tableView辆飘,要在cell上放scrollView和pageControl,期間碰上了幾個(gè)問題驶赏,這里把解決方法記錄一下:

這是最終要實(shí)現(xiàn)的效果:


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];
    }
}

寫完以后碰到了第一個(gè)問題:


WechatIMG131.jpeg

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就互不干擾了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末瞳别,一起剝皮案震驚了整個(gè)濱河市祟敛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌埠巨,老刑警劉巖辣垒,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異捐韩,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門召娜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事×踊叮” “怎么了价脾?”我有些...
    開封第一講書人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵秋柄,是天一觀的道長获枝。 經(jīng)常有香客問我,道長骇笔,這世上最難降的妖魔是什么省店? 我笑而不...
    開封第一講書人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任机隙,我火速辦了婚禮,結(jié)果婚禮上萨西,老公的妹妹穿的比我還像新娘有鹿。我一直安慰自己,他們只是感情好谎脯,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開白布葱跋。 她就那樣靜靜地躺著,像睡著了一般源梭。 火紅的嫁衣襯著肌膚如雪娱俺。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,764評(píng)論 1 290
  • 那天废麻,我揣著相機(jī)與錄音荠卷,去河邊找鬼。 笑死烛愧,一個(gè)胖子當(dāng)著我的面吹牛油宜,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播怜姿,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼慎冤,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了沧卢?” 一聲冷哼從身側(cè)響起蚁堤,我...
    開封第一講書人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎但狭,沒想到半個(gè)月后披诗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡立磁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年呈队,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片息罗。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡掂咒,死狀恐怖才沧,靈堂內(nèi)的尸體忽然破棺而出迈喉,到底是詐尸還是另有隱情,我是刑警寧澤温圆,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布挨摸,位于F島的核電站,受9級(jí)特大地震影響岁歉,放射性物質(zhì)發(fā)生泄漏得运。R本人自食惡果不足惜膝蜈,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望熔掺。 院中可真熱鬧饱搏,春花似錦、人聲如沸置逻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽券坞。三九已至鬓催,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間恨锚,已是汗流浹背宇驾。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留猴伶,地道東北人课舍。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像他挎,于是被迫代替她去往敵國和親布卡。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容