読者です 読者をやめる 読者になる 読者になる

なかじまの開発ブログ

アプリ開発における備忘録などなど。

MENU

ボタンをタップしてUIScrollViewをページスクロールする【Objective-C】

スクロールしたい画像を用意しておき、Xcodeに追加しておきます。(今回は3枚用意しました)

ではまず、ViewControllerにUIScrollViewとボタン2つを設置します。

f:id:s_nakajima:20151002165128p:plain

重なり方は画像の左側を参考にしてください。

そして、設置したUIScrollViewの『Paging Enabled』にチェックを入れてください。

f:id:s_nakajima:20151002165250p:plain



次に、ViewController.hにUIScrollViewをOutlet接続(名前:scrollView)し、UIButtonをAction接続(左:LeftBtnTap 右:RightBtnTap)してください。


『ViewController.h』

@interface ViewController : UIViewController <UIScrollViewDelegate>

@property (weak, nonatomic) IBOutlet UIScrollView *scrollView;

- (IBAction)LeftBtnTap:(id)sender;
- (IBAction)RightBtnTap:(id)sender;

@end


『ViewController.m』

// 画面サイズ
#define WINSIZE self.view.bounds.size

@interface ViewController()
@end

@implementation ViewController

@synthesize scrollView;

- (void)viewDidLoad {
    [super viewDidLoad];

    NSInteger pageNum = 3;  // ページ数

    scrollView.delegate = self;

    // スクロールの範囲を設定
    [scroll View setContentSize:CGSizeMake((pageNum * WINSIZE.width), WINSIZE.height)];

    // 各ページにUIImageViewを設置
  //*** 1ページ目
    UIImageView *ImgView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed@"back1.png"]];
    ImgView1.frame = CGRectMake(0, 0, WINSIZE.width, WINSIZE.height);
    [scrollView addSubview:ImgView1];

  //*** 2ページ目
    UIImageView *ImgView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed@"back2.png"]];
    ImgView2.frame = CGRectMake(WINSIZE.width, 0, WINSIZE.width, WINSIZE.height);
    [scrollView addSubview:ImgView2];

  //*** 3ページ目
    UIImageView *ImgView3 = [[UIImageView alloc] initWithImage:[UIImage imageNamed@"back3.png"]];
    ImgView3.frame = CGRectMake(WINSIZE.width * 2, 0, WINSIZE.width, WINSIZE.height);
    [scrollView addSubview:ImgView3];
}

    ・
    ・
    ・

- (IBAction)LeftBtnTap:(id)sender {
    // 左ボタンが押されたとき
  [scrollView scrollRectToVisible:CGRectMake(scrollView.contentOffset.x - scrollView.bounds.size.width, 0, WINSIZE.width, WINSIZE.height) animated:YES];
}

- (IBAction)RightBtnTap:(id)sender {
    // 右ボタンが押されたとき
  [scrollView scrollRectToVisible:CGRectMake(scrollView.contentOffset.x + scrollView.bounds.size.width, 0, WINSIZE.width, WINSIZE.height) animated:YES];
}


左を押したときは、UIScrollViewの現在のオフセット値からUIScrollViewのサイズ値を引き、右を押したときは逆に足すと、1ページ分スクロールされます。

これで、ボタンとスワイプでスクロールが可能になります。

f:id:s_nakajima:20151002170716p:plain