2017-02-25 2 views
0

私は現在、迅速なコンテンツスライダーのようなものに取り組んでいます。私はちょうどそれを行う方法を理解することはできません。私は基本的に私の意見を半分に分けました。上の方がコンテンツスライダーとして機能すると考えられています(図のように)。Swift 3コンテンツスライダー

The idea of what it should look like.

だから、隣同士に同じ大きさの5つのフレームがあるようになっていると1が集中一つとして真ん中に常にあります。それは他のものより少し大きいはずですが、隣にあるものをすでに見ることができます。ユーザーがもっとあることが分かるように。

私はそれがインタラクティブであることを望んでいましたが、それを行う方法はまだ分かりません。私はUIScrollViewを使用しようとしましたが、それは役に立たなかった...

どのようにこれを達成するためのアイデア?

ありがとうございました!感謝します!

+0

出力のスクリーンショットです(https://www.cocoacontrols.com/search?q=carousel)あなたはすでにあなたのコンテンツを分割も見 –

答えて

0

私はあなたに作業コードを与えます。これは私のアプリケーションのランディングページにあなたの問題を解決するのに役立つかもしれないと願っています。

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) 

    } 

} 

このコードでは、画像スライダやデザインするコンテンツスライダのスライダを作成します。

最初に、ビューコントローラーを作成し、それにスクロールビューを追加して必要な制約を追加する必要があります。

次に、すべてのストーリーボードコンテンツをリンクした後にのみ、View Controllerのココアタッチクラスファイルを作成し、上記のコードを追加します。

そのままコードを貼り付けてはいけません。これは完璧に動作し、コードをテストしなければなりません。だからちょうどそれを試して、あなたが疑問がある場合は私に知らせてください。ここ

は、多くの[例]があります

enter image description here

+0

あなたはここでスライダーに同じことをすることができます –