iOS開發之 滾動視圖 + 頁面控件(UIScrollView + UIPageControl)


效果圖 :





1、UIScrollView :滾動視圖

    滾動視圖 多個頁面實現的原理 滾動視圖位置不變 內容的位置發生改變

    1⃣️分頁查看圖片  2⃣️查看大圖片  3⃣️當內容過多,需要在一個頁面上顯示的時候(如註冊、修改個人信息等)  4⃣️當不希望感覺咱們的界面是一張圖片的時候 contentSize height+1 or width+1

查看大圖片

2、初始化UIScrollView,設置背景顏色

UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];


3、設置滾動視圖的尺寸


NSString *path = [[NSBundle mainBundle]pathForResource:@"大圖" ofType:@"png"];

    UIImage *bgimage = [UIImage imageWithContentsOfFile:path];

scrollView.contentSize = bgimage.size;


4、設置滾動視圖縮放的最小倍數和最大倍數

scrollView.minimumZoomScale = 0.5;

 scrollView.maximumZoomScale = 20;

[self.view addSubview:scrollView];


5、在滾動視圖上添加視圖

imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, bgimage.size.width, bgimage.size.height)];

    imageView.image = bgimage;

    [scrollView addSubview:imageView];


6、設置需要在滾動視圖中放大的視圖

   在。h文件裏添加代理,在初始化UIScrollView的時候掛上代理

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView

{

    return imageView;

}


當內容過多,需要一個頁面顯示


7、初始化,掛上代理,設置背景顏色,設置滾動視圖的尺寸

    UIScrollView *myscrollView = [[UIScrollView alloc]initWithFrame:self.view.frame];

    myscrollView.delegate = self;

    myscrollView.backgroundColor = [UIColor grayColor];

    myscrollView.contentSize = CGSizeMake(0, CGRectGetHeight(self.view.frame)+10);


8、屏蔽橫向縱向滾動條


 myscrollView.showsVerticalScrollIndicator = NO;

myscrollView.showsHorizontalScrollIndicator = NO;


9、設置滾動視圖 是否允許點擊頂部 滾動到初始位置  添加


myscrollView.scrollsToTop = YES;

[self.view addSubview:myscrollView];


1 0、 設置分頁效果,桉葉滾動  設置滾動條的樣式  是否有反彈效果


myScrollView.pagingEnabled = YES;

myScrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;

myScrollView.bounces = YES;


11、給滑動視圖添加視圖

 NSArray *imageName = @[@“1",@"2",@"3"];

for (int i =0; i<imageName.count; i++) {

        

        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.view.frame)*i, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame))];

        imageView.image = [UIImage imageNamed:imageName[i]];

        [myScrollView addSubview:imageView];

    }

    

    [self.view addSubview:myScrollView];


頁面控件 UIPageControl 


12、初始化頁面控件,添加到self。view


UIPageControl *pageControl = [[UIPageControl alloc]initWithFrame:CGRectMake(0, CGRectGetHeight(self.view.frame)-40, CGRectGetWidth(self.view.frame), 20)];

[self.view addSubview:pageControl];


13、頁面控件屬性


1⃣️設置頁數

 pageControl.numberOfPages = imageName.count;


2⃣️設置指示的當前頁面

pageControl.currentPage = 0;

3⃣️當只有一個頁面的時候隱藏

pageControl.hidesForSinglePage = YES;

4⃣️設置小圓點的顏色

pageControl.pageIndicatorTintColor = [UIColor yellowColor];

pageControl.currentPageIndicatorTintColor = [UIColor redColor];//當前小圓點pageControl.tag = 119; //設置tag值


14、頁面控件與滾動視圖融合

  • (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

CGFloat x = scrollView.contentOffset.x;//得到滾動視圖的偏移量

CGFloat w = CGRectGetWidth(self.view.frame);

UIPageControl *pageControl = (UIPageControl *)[self.view viewWithTag:119];


pageControl.currentPage = x/w;//設置PageControl的當前頁面


}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章