iOS开发项目实战——Swift实现ScrollView滚动栏功能

时间:2023-08-02 22:34:20
iOS开发项目实战——Swift实现ScrollView滚动栏功能

手机作为一个小屏设备,须要显示的信息往往无法在一个屏幕上显示,此时就须要使用到滚动栏,当然除了像TableView这样能够自带滚动功能的。

假设一个界面上View较多,那就必须要使用到ScrollView了。如今我们将会使用Swift在iOS上实现滚动效果。详细实现例如以下:

(1)创建一个新的iOS项目。语言选择Swift,并在Main.storyboard中拖入一个ScrollView控件。然后在ScrollView中拖入几张照片,等下能够使用滚动功能查看照片。界面例如以下:

iOS开发项目实战——Swift实现ScrollView滚动栏功能

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">。

(2)把ScrollView和几个ImageView拖拽与代码进行Outlet绑定。绑定后代码例如以下:

    @IBOutlet weak var homepageScrollView: UIScrollView!  //这个是滚动栏。
@IBOutlet weak var image1: UIImageView!
@IBOutlet weak var image2: UIImageView!
@IBOutlet weak var image3: UIImageView!

(3)然后在viewDidLoad()方法中实现 滚动栏的代码,注意例如以下contentSize的使用,必须设置ScrollView的内容大小,界面才会有滚动效果,而且这个大小是能够自己随意输入的。你设置多大的长和宽,整个ScrollView就像画布。这个画布的大小就是多大。然后因为屏幕较小。仅仅能显示一部分,所以你就能够通过滑动查看其它未见的部分。

    override func viewDidLoad() {
super.viewDidLoad() //在滚动栏中添加View。
homepageScrollView.addSubview(image1)//不断在ScrollView中加入子控件;
homepageScrollView.addSubview(image2)
homepageScrollView.addSubview(image3) homepageScrollView.contentSize=CGSize(width: image1.bounds.size.width, height: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height+500)
//注意要加入全部控件的高度到ScrollView中;也能够自己定义长和宽。 }

(4)执行程序。查看结果。

iOS开发项目实战——Swift实现ScrollView滚动栏功能

iOS开发项目实战——Swift实现ScrollView滚动栏功能

(5)可能会有人有疑问,我上面的图片都是直接加入到storyboard中的。都是写死的。我如今通过代码动态添加一张图片,而且加入到ScrollView中。以此来真正实现滚动栏的功能;

动态显示图片代码:

        //这里的“image4”是通过代码动态加入的。而不是在storyboard中写死的,加在image3以下。
var imageView:UIImage = UIImage(named: "gallery4")!
//gallery4是这张图片的名字,不须要扩展名;
var image4:UIImageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0,y: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height),
size: image1.bounds.size))
//设置这张图片的显示位置和大小。原图较大。我设置为和image1大小一样;
image4.image = imageView

继续在ScrollView中添加这个View:

 homepageScrollView.addSubview(image4)

最后别忘了在contentSize中添加对应的长度:

homepageScrollView.contentSize=CGSize(width: image1.bounds.size.width, height: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height+
image4.bounds.size.height+500)//注意要加入全部控件的高度到ScrollView中;也能够自己定义长和宽;

所以最后整个类中的代码例如以下:

class HomepageViewController: UIViewController,UIScrollViewDelegate{    //注意要实现这个Delegate托付。

    @IBOutlet weak var homepageScrollView: UIScrollView!  //这个是滚动栏;
@IBOutlet weak var image1: UIImageView!
@IBOutlet weak var image2: UIImageView!
@IBOutlet weak var image3: UIImageView! override func viewDidLoad() {
super.viewDidLoad() //这里的“image4”是通过代码动态加入的,而不是在storyboard中写死的。加在image3以下。
var imageView:UIImage = UIImage(named: "gallery4")!
//gallery4是这张图片的名字,不须要扩展名;
var image4:UIImageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0,y: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height),
size: image1.bounds.size))
//设置这张图片的显示位置和大小。原图较大,我设置为和image1大小一样;
image4.image = imageView //在滚动栏中添加View;
homepageScrollView.addSubview(image1)//不断在ScrollView中加入子控件。
homepageScrollView.addSubview(image2)
homepageScrollView.addSubview(image3)
homepageScrollView.addSubview(image4) homepageScrollView.contentSize=CGSize(width: image1.bounds.size.width, height: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height+
image4.bounds.size.height+500)//注意要加入全部控件的高度到ScrollView中。也能够自己定义长和宽; } override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
///////////////////////////////////////////
} }

(6)最后执行结果例如以下:

iOS开发项目实战——Swift实现ScrollView滚动栏功能

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">。

iOS开发项目实战——Swift实现ScrollView滚动栏功能

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">。

事实上ScrollView滚动栏还有非常多其它的属性设置和特性,有一部分也能够在storyboard中进行设置。是博大精深的。我们以后在开发中在慢慢学习。

github主页:https://github.com/chenyufeng1991  。

欢迎大家訪问!