scrollView的简单实现效果

scrollView的简单效果图实现

关于scrollView,就是可以上下滑动和左右滑动。从最基本和最实用的出发,比如相册浏览,就是用scrollView实现的。以下是scrollView的基本创建和用法。

首先,创建工程之后,在viewController中的viewDidLoad中初始化scrollView,在此之前,新创建了一个PageScrollView类,在PageScrollView.m中书写了一段代码如下:

 1 - (UIView*)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
 2
 3 //在高度范围内,如果super hitTest 返回是nil,则返回 self  如果不是,就返回null
 4
 5     if (point.y > 0 && point.y < self.bounds.size.height) {
 6
 7         UIView *superRet = [super hitTest:point withEvent:event];
 8
 9         if (superRet) {
10
11             return superRet;
12         }
13         return self;
14     }
15
16     return nil;
17 }

上述代码中提到了hitTest:这是时间点击传递事件。(可以去找一下)。

下面我们开始创建scrollView。应注意以下几点:1.首先初始化的时候找准自己需要的位置;2.务必要设置scrollView的内容大小,不然不会有效果,并且,内容大小(左右滑动时,宽度不能小于图片的总宽度)3.属性中有滚动条是否显示、是否开启反弹效果、翻页效果等。如下代码:(注意:将创建的类PageScrollView.h导入)

 1     //初始化scrollView
 2     PageScrollView *scrollView = [[PageScrollView alloc] initWithFrame:CGRectMake((width - 200)/2.f, 100, 200, 300)];
 3
 4     //设置内容大小
 5     scrollView.contentSize = CGSizeMake(200 * imageArrary.count, 300);
 6     scrollView.pagingEnabled = YES;
 7
 8     //关闭边界裁剪
 9     scrollView.clipsToBounds = NO;
10     //隐藏水平滚动条(默认开启)
11     scrollView.showsHorizontalScrollIndicator = NO/YES;
12     scrollView.showsVerticalScrollIndicator = NO/YES;
13
14     //反弹效果(默认开启)
15 //    scrollView.bounces = NO;
16     scrollView.bounces = YES;

效果图如下:可以看到水平滚动条和反弹效果。(数值滚动条没显示,是因为不能上下滑动)

我们看到的效果图就是如上所示。具体实现的代码如下:

 1  //添加子视图
 2     for (int i = 0; i < imageArrary.count; i ++) {
 3
 4       //创建view并使其显示不同颜色,颜色是随机的
 5         UIView *view = [[UIImageView alloc] initWithFrame:CGRectMake(200 * i, 0, 200, 300)];
 6
 7         //添加随机颜色,(具体设置随机颜色的方法读者可以去查阅,或者百度)
 8         view.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0  blue:arc4random()%255/255.0  alpha:1];
 9
10         [scrollView addSubview:view];
11
12 }

如果有错误,欢迎指正。如有转载,请标明出处转载字样。谢谢!

时间: 2024-10-12 03:35:28

scrollView的简单实现效果的相关文章

iOS开发——实用技术OC篇&amp;简单抽屉效果的实现

简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一些功夫了,我们这里知识简单的介绍怎么去实现,不过一般我们开发都是找别人做好的,也没必要烂肺时间,除非你真的是大牛或者闲的蛋疼. 其实关于抽屉效果就是界面有三个View,其实一个主View其他两个分别是左边和右边的View,我们分别为他们添加手势,实现左右滑动显示对应的View. 一:所以,首先我们需

自定义实现ExpandableListView收缩的简单动画效果

以下是 ExpandableListView 收缩的简单动画效果 1 /* 2 * Copyright (C) 2014 Gary Guo 3 * 4 * Licensed under the Apache License, Version 2.0 (the "License"); 5 * you may not use this file except in compliance with the License. 6 * You may obtain a copy of the L

js网站轮播图怎么做如何做?鸡哥教你简单制作效果炫酷

日了狗啦,刚刚鸡哥辛苦码了那么多字全丢了又要重新写,这是第二遍写了...今天鸡哥给小白写个不需要写js原生代码,只需要几个插件和一段通俗易懂得jquery代码就能搞定的轮播图,当然js原生代码写着也不算很繁琐,但是有些浪费时间,更何况很多人并不会用js直接写包括鸡哥,当年在学校还是研究过一段时间js的,当时还独自写了一个轮播图俘获了多少同班妹子的芳心,不过现在是基本废了,这东西要常写,不然忘的很快. 唉,本来还有妹子等着鸡哥呢,我这一大意文章丢了,重新写的话估计来不及了,先打个电话让妹子回家吧~

JavaScript简单计算器效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单计算器效果</title> </head> <body> <form name="myForm"> 数字1:<input type="text" name="nu

ScrollView的阻尼回弹效果实现(仿qq空间)

玩过新浪微博,qq空间等手机客户端的童鞋,都应该清楚,在主界面向下滑动时,会有一个阻尼回弹效果,看起来挺不错,接下来我们就来实现一下这种效果,下拉后回弹刷新界面,先看效果图: 这个是编辑器里面的界面效果,不言自明: 运行效果: 正常界面下: 下拉: 下拉结束: 实现代码: 主要部分就是重写的ScrollView: package com.byl.scollower; import android.content.Context; import android.graphics.Rect; imp

HTML与CSS简单页面效果实例

本篇博客实现一个HTML与CSS简单页面效果实例 index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="style.css" rel="stylesheet" type="t

android 自定义scrollview 仿QQ空间效果 下拉伸缩顶部图片,上拉回弹 上拉滚动顶部title 颜色渐变

首先要知道  自定义scrollview 仿QQ效果 下拉伸缩放大顶部图片 的原理是监听ontouch事件,在MotionEvent.ACTION_MOVE事件时候,使用不同倍数的系数,重置布局位置[注此处是伸缩隐藏,不是同比例放大] inner.layout(normal.left, (int) (normal.top + inner_move_H), normal.right, (int) (normal.bottom + inner_move_H)); 关于“自定义scrollview 仿

基于定时器延时器的简单打字效果——拿去表白吧

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 #div1{ 9 width: 300px; height: 500px; margin: 0 auto;border: 10px solid skyblue; border-radius: 10px; 10 line-

使用模块化管理工具seajs实现简单动画效果

今天使用模块化的管理工具seajs实现了一个简单的动画效果. seajs具有简单友好的模块定义规范.seajs遵循CMD规范,可以像nodejs一样编写代码. seajs具有自然直观的代码组织方式.依赖的自动加载,配置简洁清晰. 通过学习,发现seajs的使用是具有一个标准的格式的,如下define(function(require,exports,module){ //定义的代码块 });其中回调的参数名和顺序都是不可改变的. 这次小动画实现的文件结构: word.html代码如下: 1 <!