iOS development Project Combat--swift implement ScrollView scroll bar function

Source: Internet
Author: User

Mobile phone as a small screen device, need to display the information often can not be displayed on a screen, it is necessary to use the scroll bar, of course, in addition to like TableView can be self-scrolling function. If there is more view on an interface, then you have to use the ScrollView. Now we'll use Swift to scroll through iOS. The specific implementation is as follows:

(1) Create a new iOS project, language Select Swift, and drag a ScrollView control into the Main.storyboard. Then drag a few photos in the ScrollView, and so on you can use the scrolling function to view the photos, the interface is as follows:


(2) ScrollView and several ImageView drag and drop code to outlet binding, after the code is as follows:

    @IBOutlet weak var homepagescrollview:uiscrollview!  This is the scroll bar;    @IBOutlet weak var image1:uiimageview!    @IBOutlet weak var image2:uiimageview!    @IBOutlet weak var image3:uiimageview!    

(3) then in the Viewdidload () method to implement the scroll bar code, note the following contentsize use, you must set the ScrollView content size, the interface will have a scrolling effect, and this size can be entered arbitrarily, you set how long and wide, The whole scrollview is like a canvas, the size of the canvas, and then because the screen is small, only a portion is displayed, so you can swipe to see the other unseen parts.

    Override Func Viewdidload () {        super.viewdidload ()        //Add view in scroll bar,        Homepagescrollview.addsubview (image1 )//Continuously add child controls in 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)        //Note To add the height of all controls to ScrollView, or you can customize the length and width;            }

(4) Run the program to view the results.



(5) Some people may have doubts, my above pictures are directly added to the storyboard, are written dead, I now add a picture through the code dynamically, and added to the ScrollView. In order to realize the function of the scroll bar really;

Dynamic display of picture code:

        The "Image4" here is dynamically added through the code, not in storyboard, added to the image3 below;        var imageview:uiimage = UIImage (named: "Gallery4")!        Gallery4 is the name of this image and does not require an extension;        var image4:uiimageview = Uiimageview (Frame:cgrect (origin:cgpoint: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height), size:image1.bounds.size)        / /Set the display position and size of this picture, the original image is larger, I set to the same size as image1;        image4.image = ImageView

Continue adding this view to the ScrollView:

Homepagescrollview.addsubview (Image4)

Finally, don't forget to add the appropriate length to the 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)//Note To add the height of all controls to ScrollView ; You can also customize the length and width;

So the code in the last whole class is as follows:

Class homepageviewcontroller:uiviewcontroller,uiscrollviewdelegate{//Note to implement this delegate delegate; @IBOutlet weak var  homepagescrollview:uiscrollview!    This is the scroll bar; @IBOutlet weak var image1:uiimageview!    @IBOutlet weak var image2:uiimageview!        @IBOutlet weak var image3:uiimageview!        Override Func Viewdidload () {super.viewdidload ()//The "Image4" here is dynamically added by code, not written in storyboard, added under Image3;        var imageview:uiimage = UIImage (named: "Gallery4")! Gallery4 is the name of this image and does not require an extension; 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)//Set the display position and size of this picture, The original is larger, I set to the same size as image1, image4.image = imageView//Add view in the scroll bar, Homepagescrollview.addsubview (i            MAGE1)//Add child controls continuously in ScrollView; Homepagescrollview.addsubview (image2) Homepagescrollview.addsubview (image3) Homepagescrollview.Addsubview (image4) homepagescrollview.contentsize=cgsize (Width:image1.bounds.size.width, height:image1.bounds.si ZE.HEIGHT+IMAGE2.BOUNDS.SIZE.HEIGHT+IMAGE3.BOUNDS.SIZE.HEIGHT+IMAGE4.BOUNDS.SIZE.HEIGHT+500)// Note To add the height of all controls to ScrollView, you can also customize the length and width;} override func didreceivememorywarning () {Super.didreceivememor        Ywarning ()//Dispose of any of the resources that can is recreated. ///////////////////////////////////////////    }}

(6) The result of the final operation is as follows:



In fact, ScrollView scroll bar has a lot of other property settings and features, some can also be set in the storyboard, is profound, we later in the development of slowly learning.









Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

iOS development Project Combat--swift implement ScrollView scroll bar function

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.