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





  • 相关阅读:
    基于python内置方法进行代码混淆
    python-__getattr__ 和 __getattribute__
    python-flask学习
    python-创建进程的三种方式
    python-property、__get__、__set__
    call apply bind
    【算法】js实现最短时间走完不同速度的路程
    图片懒加载实现
    MoonLight可视化订单需求区域分析系统前端
    前端代码基本命名规范和格式规范
  • 原文地址:https://www.cnblogs.com/foxmin/p/2434475.html
Copyright © 2011-2022 走看看