zoukankan      html  css  js  c++  java
  • 利用UIScrollView和UIPageControl实现图片切换

    一种简单的图片切换效果,如下:

    通过滚动中间的图片或页面控制,都可以实现图片的切换。

    在xib中添加UIScrollView和UIPageControl,并设置为对应类的IBOutlet,

    #import <UIKit/UIKit.h>

    @interface HomePage : UIViewController<UIScrollViewDelegate>{

    IBOutlet UILabel *message;
    IBOutlet UIScrollView *myScrollView;
    IBOutlet UIPageControl *myPageControl;
    }
    @property (retain, nonatomic) IBOutlet UILabel *message;
    @property (retain, nonatomic) IBOutlet UIScrollView *myScrollView;
    @property (retain, nonatomic) IBOutlet UIPageControl *myPageControl;

    @end

    视图载入:

    - (void)viewDidLoad
    {
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.

    int pageCount = 3;

    CGRect scrollViewRect = [self.view bounds];
    //create scrollview
    myScrollView.pagingEnabled = YES;
    myScrollView.contentSize = CGSizeMake(scrollViewRect.size.width * pageCount,1);
    myScrollView.showsHorizontalScrollIndicator = NO;
    myScrollView.showsVerticalScrollIndicator = NO;
    myScrollView.delegate = self;



    myPageControl.backgroundColor = [UIColor clearColor];
    myPageControl.numberOfPages = pageCount;
    myPageControl.currentPage = 0;
    [myPageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];

    //create pages
    [self createPages];




    }

    实现:

    #pragma mark 图片切换
    - (void)loadScrollViewWithPage:(UIView *)page
    {
    int pageCount = [[myScrollView subviews] count];

    CGRect bounds = myScrollView.bounds;
    bounds.origin.x = bounds.size.width * pageCount;
    bounds.origin.y = 0;
    page.frame = bounds;
    [myScrollView addSubview:page];

    }

    - (void)scrollViewDidScroll:(UIScrollView *)sender
    {
    CGFloat pageWidth = sender.frame.size.width;
    int page = floor((sender.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    myPageControl.currentPage = page;


    if(page==0){
    message.text=@"fox1";
    }
    if(page==1){
    message.text=@"fox2";
    }
    if(page==2){
    message.text=@"fox3";
    }


    }

    - (void)createPages
    {
    CGRect pageRect = myScrollView.frame;

    //create pages
    UIView *page1 = [[UIView alloc] initWithFrame:pageRect];
    page1.backgroundColor = [UIColor blackColor];
    [page1 setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @"fengmian12.png"]]];
    UIView *page2 = [[UIView alloc] initWithFrame:pageRect];
    page2.backgroundColor = [UIColor blackColor];
    [page2 setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @"fengmian2.png"]]];
    UIView *page3 = [[UIView alloc] initWithFrame:pageRect];
    page3.backgroundColor = [UIColor blackColor];
    [page3 setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @"fengmian3.png"]]];

    //add to scrollview
    [self loadScrollViewWithPage:page1];
    [self loadScrollViewWithPage:page2];
    [self loadScrollViewWithPage:page3];

    //cleanup
    [page1 release];
    [page2 release];
    [page3 release];
    }

    - (void)changePage:(id)sender
    {
    int page = myPageControl.currentPage;

    if (page == 0) {
    self.message.text = @"fox1";
    }else if (page == 1) {
    self.message.text = @"fox2";
    }else {
    self.message.text = @"fox3";
    }



    // update the scroll view to the appropriate page
    CGRect frame = myScrollView.frame;
    frame.origin.x = frame.size.width * page;
    frame.origin.y = 0;
    [myScrollView scrollRectToVisible:frame animated:YES];
    }





  • 相关阅读:
    微服务2.0时代,论其痛点与触点
    微服务架构的中国式落地
    【干货】微服务技术栈选型手册2.0
    每位开发者都该看:如何在四十岁后还能继续从事软件开发?
    在IBM学到的东西,到底对我的程序生涯产生了多大的影响
    十年程序员老兵告诉你,2018年程序员如何发展
    IntelliJ IDEA 快捷键大全
    List<Integer>.remove()的一个小细节
    eclipse 设置 @author @version等注释模板
    Android 获取当前应用的版本号和当前系统的版本号
  • 原文地址:https://www.cnblogs.com/foxmin/p/2434475.html
Copyright © 2011-2022 走看看