码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-03-11 14:10:18      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:

 在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 页
技术分享 技术分享
 
 
 
 
 
 

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

标签:

原文地址:http://www.cnblogs.com/guiyangxueyuan/p/5265304.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!