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類文件並只有在鏈接了所有故事板內容後才添加上面的代碼。

不要複製粘貼代碼，你將不得不做一些完美的工作和測試代碼。所以，請試試看，如果您有任何疑問，請告訴我。

這裏是輸出的屏幕截圖