您的位置:首页 > 产品设计 > UI/UE

UI-滚动视图(滚动视图)

2015-09-18 20:53 337 查看
UIScrollView (滚动视图) (产品使用介绍就是用滚动视图实现的)
滚动视图实现原理:滚动视图位置不变 内容的位置发生改变
效果:1. 分页查看图片
2.查看大图片
3.当内容过多 需要一个页面显示(如注册 修改个人信息)
4.当不希望用户感觉我们的界面不是一张图片的时候 contentSize : height +1 or
width +1

--------------------------1. 分页查看图片-------------------------------------------------------------------------

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

#pragma -------------分页查看图片

NSArray *imageName = @[@"t-1.jpg",@"t-2.jpg",@"t-3.jpg"];

UIScrollView *myscrollview = [[UIScrollView alloc]initWithFrame:self.view.frame];

myscrollview.delegate = self;

myscrollview.contentSize = CGSizeMake(CGRectGetWidth(self.view.frame)*imageName.count, 0);

// 设置滚动视图的分页效果

myscrollview.pagingEnabled = YES;

// 设置滚动条的样式

myscrollview.indicatorStyle = UIScrollViewIndicatorStyleWhite;

// 设置滚动视图的偏移量 可以达到 设置滚动视图默认在第几屏的位置 还可以通过contentoffest来判断滚动到第几屏

myscrollview.contentOffset = CGPointMake(CGRectGetWidth(self.view.frame), 0);

// 设置是否有反弹效果

myscrollview.bounces = NO;// 如果默认值是可以看到底图 并有反弹效果

myscrollview.showsHorizontalScrollIndicator = NO;

for (int i = 0; i <imageName.count; i++) {

UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(CGRectGetWidth(self.view.frame)*i, 0, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame))];

imageView.image = [UIImage imageNamed:imageName[i]];

imageView.alpha = 0.5;

[myscrollview addSubview:imageView];

}//把图片添加到滚动视图上

#pragma----UIPageControl(点点点)

UIPageControl *pagecontrol = [[UIPageControl alloc]initWithFrame:CGRectMake( 0, CGRectGetHeight(self.view.frame)-40, CGRectGetWidth(self.view.frame), 20)];

// 设置pagecontrol总共有多少页

pagecontrol.numberOfPages = imageName.count;

// 设置指示的当前页面

pagecontrol.currentPage = 1;

// 当只有一个页面的时候隐藏pagecontrol

pagecontrol.hidesForSinglePage = YES;

// 设置空心小圆点的颜色

pagecontrol.pageIndicatorTintColor = [UIColor orangeColor];

pagecontrol.tag = 119;

[self.view addSubview:pagecontrol];

[self.view addSubview:myscrollview];

}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

// NSLog(@"%f",scrollView.contentOffset.x);

// 在哪一个页面通过偏移x的位置初一屏幕的宽度得到当前的页数

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{//得到一个当前页数

// x滚动视图的偏移量 (特有的数据)屏幕的宽(持有的数据)

float x = scrollView.contentOffset.x;

float w = CGRectGetWidth(self.view.frame);

NSLog(@"%f",x);

// 偏移量除以宽 得到当前页面的页数

NSInteger curpage = x/w;

// 通过tag值找到pagecontrol

UIPageControl *pagecontrol = (UIPageControl *)[self.view viewWithTag:119];

pagecontrol.currentPage = curpage;

}

--------------------------2.查看大图片 -------------------------------------------------------------------------

#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>

{

UIImageView *imageview;

}

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

#pragma -----------查看大图片

// 一、 查看大图片

NSString *path = [[NSBundle mainBundle]pathForResource:@"fj-i" ofType:@"jpg"];

UIImage *bg = [UIImage imageWithContentsOfFile:path];

UIScrollView * scrolview = [[UIScrollView alloc]initWithFrame:self.view.frame];

scrolview.backgroundColor = [UIColor greenColor];

// 设置滚动视图的contentsize 如果滚动视图的contentsize 如果contentsize 小于滚动视图的bounds 就不会滚动

scrolview.contentSize = CGSizeMake(0, CGRectGetHeight(self.view.frame)+100);

scrolview.contentSize = bg.size;// 设置滚动视图的contentsize跟滚动视图一样大

// 在滚动视图上 添加图片(在滚动视图上 添加内容)

imageview = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, bg.size.width, bg.size.height)];

imageview.image = bg;

[scrolview addSubview:imageview];

//二、放大图片 :1.需要用到滚动视图的代理方法 2.设置放大缩小图片的最大最小倍数 3. 让滚动视图知道要放大那个视图

scrolview.minimumZoomScale = 0.5;// 设置滚动视图的缩放最小倍数

scrolview.maximumZoomScale = 5; // 设置滚动视图的缩放最大倍数

scrolview.delegate = self;

[self.view addSubview:scrolview];

}

#pragma -------------ScrollViewDelegate---

//设置需要在滚动视图上 添加图片视图(在滚动视图上 添加内容)

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView//缩放图片方法

{

return imageview;

}

-------------------------- 当内容过多 需要一个页面显示(如注册 修改个人信息) -------------------------------------------

#pragma ----当内容过多 需要一个页面视图 (如 注册 修改个人信息)
#import "ViewController.h"

@interface ViewController ()<UIScrollViewDelegate>
{
UITextField *textfield;
}
@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
textfield = [[UITextField alloc]initWithFrame:CGRectMake(100, 200, 200, 40)];
textfield.borderStyle = UITextBorderStyleLine;
[mysrollview addSubview:textfield];

UIScrollView * mysrollview = [[UIScrollView alloc]initWithFrame: self.view.frame];
mysrollview.contentSize = CGSizeMake(0 , CGRectGetHeight(self.view.frame)+10);
mysrollview.delegate = self;
mysrollview.scrollsToTop = YES;//设置滚动视图 是否允许点击顶部 滚动到初始位置
// 屏蔽滚动条
mysrollview.showsVerticalScrollIndicator = NO;//纵向
// mysrollview.showsHorizontalScrollIndicator = NO; //水平方向

[self.view addSubview:mysrollview];

}
//开始滚动的时候开始调用
//- (void)scrollViewDidScroll:(UIScrollView *)scrollView
//{
// [textfield resignFirstResponder];
//}
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
// [textfield resignFirstResponder];
}

- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView
{
[textfield resignFirstResponder];
}
由于4比较简单就不介绍了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: