Swift 3的内容滑块

Question

我目前正在使用像swift中的内容滑块。我只是无法弄清楚如何去做。我基本上将我的观点分为两部分。上面的那个应该用作内容滑块（正如你在图片中看到的那样）。

所以有应该是5帧中的相同尺寸的彼此相邻并且一个总是在中间作为关注之一。它应该比另一个大一点，但你可以在旁边看到它旁边的那个。这样用户就知道还有更多。

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

任何想法如何实现这一目标？

谢谢你的帮忙！欣赏它！

Answer 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) 

    } 

} 

那么这段代码所做的就是创建一个滑块它可能是一个图像滑块，或者为您设计一个内容滑块。

首先你需要创建一个viewcontroller并为其添加一个滚动视图并添加必要的约束。

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

不要复制粘贴代码，你将不得不做一些完美的工作和测试代码。所以，请试试看，如果您有任何疑问，请告诉我。

这里是输出的屏幕截图