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

Posted 2020-06-21 驭狼共舞

 在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 页