iOS设计—滚动页面的设计 (控件UIScrollView)

在ios开发中 ，都会涉及页面的滚动设计，在此我就以手机的滚动页面设计为例简单说一下；
专为初学者而准备的，高手就不用看了 ，因为内容太过于简单
下面为设计的过程，

首先在.h文件中声明属性

ViewController.h
#import <UIKit/UIKit.h>

//宏定义 手机屏幕的宽Width和高Height；注：宏定义的结束不能加符号“;”.

#define Width self.view.frame.size.width

#define Height self.view.frame.size.height

此处也可以不用设置宏定义，

@interface ViewController : UIViewController<UIScrollViewAccessibilityDelegate>//此处为遵循代理
//属性的声明；
@property(strong,nonatomic)UIScrollView *myScrollView;//滑动视图

@property(strong,nonatomic)UIPageControl *mypageControl;//页面控制

@end

在.m文件中
ViewController.m


#import "ViewController.h"


@interface ViewController ()


@end


@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
//创建底屏幕面板
self.myScrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, Width, Height)];
self.myScrollView.backgroundColor=[UIColor grayColor];
//内容面板大小
self.myScrollView .contentSize=CGSizeMake(414 *5, 736);
//指定代理
self.myScrollView.delegate=self;

//添加图片1
UIImageView *imageView1=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 414, 700)];
imageView1.image=[UIImage imageNamed:@"/Users/scjy/Desktop/UIPickView/UIPickView/image/屏幕快照 2016-03-09 下午1.22.21.png"];

//添加图片2
UIImageView *imageView2=[[UIImageView alloc]initWithFrame:CGRectMake(414, 0, 414, 700)];
imageView2.image=[UIImage imageNamed:@"/Users/scjy/Desktop/UIPickView/UIPickView/image/屏幕快照 2016-03-09 下午1.23.16.png"];

//添加图片3
UIImageView *imageView3=[[UIImageView alloc]initWithFrame:CGRectMake(414*2, 0, 414,700)];
imageView3.image=[UIImage imageNamed:@"/Users/scjy/Desktop/UIPickView/UIPickView/image/屏幕快照 2016-03-09 下午1.24.13.png"];
//添加图片3
UIImageView *imageView4=[[UIImageView alloc]initWithFrame:CGRectMake(414*3, 0, 414,700)];
imageView4.image=[UIImage imageNamed:@"/Users/scjy/Desktop/UIPickView/UIPickView/image/屏幕快照 2016-03-09 下午1.33.30.png"];
//添加图片3
UIImageView *imageView5=[[UIImageView alloc]initWithFrame:CGRectMake(414*4, 0, 414,700)];
imageView5.image=[UIImage imageNamed:@"/Users/scjy/Desktop/UIPickView/UIPickView/image/屏幕快照 2016-03-09 下午1.50.36.png"];
//将图片添加带屏幕面板上
[self.myScrollView addSubview:imageView1];
[self.myScrollView addSubview:imageView2];
[self.myScrollView addSubview:imageView3];
[self.myScrollView addSubview:imageView4];
[self.myScrollView addSubview:imageView5];
//将屏幕面板添加到视图上
[self.view addSubview:self.myScrollView];

//锁定滚动方向
self.myScrollView.directionalLockEnabled=NO;
//判定是否设置面板屏幕的分页..........
self.myScrollView.pagingEnabled=YES;
//判定是否显示滚动条
self.myScrollView .showsHorizontalScrollIndicator=NO;

//页面控制按钮
self.mypageControl=[[UIPageControl alloc]init];
CGSize pageSize=CGSizeMake(120, 20);
self.mypageControl.frame=CGRectMake((Width-pageSize.width)/2, Height-pageSize.height-40, pageSize.width, pageSize.height);

// self.mypageControl.backgroundColor=[UIColor grayColor];

//设置滚动页面的页数
self.mypageControl.numberOfPages=5;
//设置最初显示的页数
self.mypageControl.currentPage=0;
[self.view addSubview:self. mypageControl];

}

//代理Delegate的方法实现

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{
self.mypageControl.currentPage=(int)(scrollView.contentOffset.x/Width);
NSLog(@"%@",scrollView);

}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.

}

@end

设计的最终效果如下
滑动到不同页面效果不同。。
第1 页 第2 页