Swift 3 内容滑块

Posted 2023-03-10

【中文标题】Swift 3 内容滑块

【英文标题】：Swift 3 content slider

【发布时间】：2017-02-25 09:51:14

【问题描述】：

我目前正在开发类似 swift 中的内容滑块之类的东西。我只是不知道该怎么做。我基本上把我的观点分成了两半。上面的应该用作内容滑块（如图所示）。

所以应该有 5 个大小相同的帧彼此相邻，并且一个始终位于中间作为焦点。它应该比另一个大一点，但你可以看到它旁边的那些已经在侧面。让用户知道还有更多。

我希望它是交互式的，但还不知道如何做到这一点。我尝试使用 UIScrollView 但没有帮助...

知道如何实现这一点吗？

感谢您的帮助！欣赏！

【问题讨论】：

有很多examples

【参考方案1】：

我会给你工作代码。这是我为我的应用程序的着陆页制作的内容，希望这可能有助于解决您的问题。

import UIKit

class ViewController: UIViewController 

    @IBOutlet weak var topView: UIView!
    //Create an outlet for your scrollview
    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var registerButton: UIButton!

    //Create your image array and caption if any
    var imageArray = [UIImage]()
    var labelArray = [String]()

    //Timer init if u want auto slide
    var timer = Timer()

    override func viewDidLoad() 
        super.viewDidLoad()

        //on viewload set ur scrollview to parent view frame

        scrollView.frame = view.frame

        /*create image literals and set the images you want in the 
       content if its not images then make an array of your content 
       depending on ur need*/

        imageArray = [#imageLiteral(resourceName: "landing-slide1"),#imageLiteral(resourceName: "landing-slide2"),#imageLiteral(resourceName: "landing-slide3")]
        labelArray = ["Learn mindfulness practices to cope with stress","Choose from a specially designed selection of proven programs","Learn to be completely present in the moment!"]
        // now lets loop for the number of slides you want
        for i in 0..<imageArray.count
            // CREATE AN IMAGE VIEW IF UR OPTING FOR IMAGE SLIDER 
            // OR CREATE A UIVIEW INSTEAD
            let imageView = UIImageView()
            let labelView = UILabel()

            // SETTINGS YOU NEED FOR THE VIEW HEIGHT AND UI DESIGN OF
            // YOUR CHOICE

            let imageViewHeight = scrollView.frame.height - 170
            let xPos = (self.view.frame.width * CGFloat(i)) + 10
            // SET THE CONTENT HERE
            imageView.image = imageArray[i]
            imageView.frame = CGRect(x: xPos, y: 20, width: self.scrollView.frame.width - 20, height: imageViewHeight)
            imageView.backgroundColor = UIColor(red: 1/255.5, green: 110/255.5, blue: 125/255.5, alpha: 1.0)
            imageView.layer.cornerRadius = 20.0
            // FOR ROUNDED CORNERS SET THIS ITS IMPORTANT
            imageView.clipsToBounds = true

            labelView.text = labelArray[i]
            labelView.frame = CGRect(x: xPos + 6, y: imageView.frame.height/2, width: self.scrollView.frame.width - 30, height: 70)
            labelView.textColor = UIColor.white
            labelView.textAlignment = .center
            labelView.font = UIFont(name: "Helvetica Neue", size: 12)
            labelView.font = UIFont.boldSystemFont(ofSize: 18)
            labelView.numberOfLines = 0

            registerButton.layer.cornerRadius = 20.0

            // CREATE NSLAYOUT CONSTRAINTS FOR THE VIEWS
            NSLayoutConstraint(item: labelView, attribute: NSLayoutAttribute.centerX, relatedBy: NSLayoutRelation.equal, toItem: labelView, attribute: NSLayoutAttribute.centerX, multiplier: 1, constant: 0).isActive = true
            NSLayoutConstraint(item: labelView, attribute: NSLayoutAttribute.centerY, relatedBy: NSLayoutRelation.equal, toItem: labelView, attribute: NSLayoutAttribute.centerY, multiplier: 1, constant: 0).isActive = true
            // ADD THE SUBVIEWS TO THE SCROLLVIEW
            scrollView.addSubview(labelView)
            scrollView.contentMode = .scaleAspectFit
            scrollView.contentSize.width = scrollView.frame.width * CGFloat(i + 1)
            scrollView.addSubview(imageView)
            scrollView.bringSubview(toFront: labelView)

        
    
    // FUNCTION TO SLIDE THE SCROLL VIEW
    func slideScrollView()
        var offset = self.view.frame.width
        var currentPos = self.scrollView.contentOffset.x

        if(currentPos >= (offset * 2))

            offset = 0
            currentPos = 0
            self.scrollView.setContentOffset(CGPoint(x: (currentPos + offset), y: 0), animated: true)

        
        else

            self.scrollView.setContentOffset(CGPoint(x: (currentPos + offset), y: 0), animated: true)

        
    
    // JUST SOME EXTRA CODE FOR MY APP YOU CAN IGNORE SOME OF IT
    // ELSE PART IS IMPORTANT TO YOUR CODE
    override func viewDidAppear(_ animated: Bool) 
        if(LoggedIn())
            let moodSurveyCotroller = self.storyboard?.instantiateViewController(withIdentifier: "moodSurvey") as! MoodSurvey
            self.present(moodSurveyCotroller, animated: true, completion: nil)
        
        else
         // START YOUR TIMER FOR THE SLIDER LIKE THIS WITHIN THE 
         //VIEWDIDAPPEAR   
        timer = Timer.scheduledTimer(timeInterval: 5.0, target: self, selector: #selector(slideScrollView), userInfo: nil, repeats: true)

        
    

    override func didReceiveMemoryWarning() 
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    

    @IBAction func registerPage(_ sender: UIButton) 

        let registerController = self.storyboard?.instantiateViewController(withIdentifier: "registerViewController") as! RegisterController
        self.present(registerController, animated: true, completion: nil)

    

    @IBAction func loginButtonPressed(_ sender: UIButton) 

        let loginController =  self.storyboard?.instantiateViewController(withIdentifier: "loginViewController") as! LoginViewController
        self.present(loginController,animated: true, completion: nil)

    

所以这段代码的作用是创建一个滑块，它可以是图像滑块，也可以是您设计的内容滑块。

首先，您需要创建一个视图控制器并向其添加滚动视图并添加必要的约束。

然后创建视图控制器 cocoatouch 类文件并仅在链接所有故事板内容后添加上述代码。

不要照原样复制粘贴代码，您必须做一些工作才能完美运行并经过测试的代码。所以请尝试一下，如果您有任何疑问，请告诉我。

这是输出的截图

【讨论】：

还看到您已经以这种方式拆分内容，您可以在此处对滑块执行相同操作