カスタムタブバーの作成

Question

上部にカスタムタブバーを作成したいとします。ちょうど9gagのように。私はそれをする方法を学ぶことができる場所を知っていますか？ （文書化またはビデオチュートリアル）ありがとう 9gag custom tab bar

Answer 1

私が実装した作品。

1. カスタムタブバーを持つビューを作成します。

   let tabView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 60)) 
   tabView.backgroundColor = UIColor(red: 45/255, green: 58/255, blue: 114/255, alpha: 1) 
   self.view.addSubview(tabView) 
   

2. ボタンの数に応じて、ボタンのサイズを決定し、サブビューとして追加。（ここでは2を取る）

   firstButton = UIButton(type: .Custom) 
   firstButton.frame = CGRect(x: 0, y: 20, width: tabView.frame.size.width/2, height: 30) 
   firstButton.setTitle("BUT 1", forState: .Normal) 
   firstButton.setTitleColor(UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0), forState: .Normal) 
   firstButton.addTarget(self, action: #selector(ViewController.firstButtonTapped), forControlEvents: .TouchUpInside) 
   
   tabView.addSubview(firstButton) 
   
   secondButton = UIButton(type: .Custom) 
   secondButton.frame = CGRect(x: tabView.frame.size.width/2, y: 20, width: tabView.frame.size.width/2, height: 30) 
   secondButton.setTitle("BUT 2", forState: .Normal) 
   secondButton.setTitleColor(UIColor.whiteColor(), forState: .Normal) 
   secondButton.addTarget(self, action: #selector(ViewController.secondButtonTapped), forControlEvents: .TouchUpInside) 
   
   tabView.addSubview(secondButton) 
   

3. がボタンの下のラインとして機能小型のUIViewを追加します。 。

   lineView = UIView() 
   lineView.frame = CGRect(x: 0, y: CGRectGetMaxY(tabView.frame) - 3, width: tabView.frame.size.width/2, height: 3) 
   lineView.backgroundColor = UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0) 
   
   tabView.addSubview(lineView) 
   

4. 以下のビューをスクロールビューで作成します。

   self.scrollView.frame = CGRectMake(0, CGRectGetMaxY(tabView.frame), self.view.frame.width, self.view.frame.height) 
   self.scrollView.backgroundColor = UIColor.whiteColor() 
   self.scrollView.delegate = self 
   self.scrollView.pagingEnabled = true 
   
   self.view.addSubview(self.scrollView) 
   
   let aScrollViewWidth = self.scrollView.frame.width 
   let aScrollViewHeight = self.scrollView.frame.height 
   self.scrollView.contentSize = CGSizeMake(aScrollViewWidth * CGFloat(2), aScrollViewHeight) 
   

5. ビューを順番に追加します。この例のために、私はUITextViewを追加しています。あなたはこのようなものを作成するために、コレクションビューを使用することができます

   for anIndex in 0 ..< 2 { 
   
       let anEssayTextView = UITextView(frame: CGRectMake(aScrollViewWidth * CGFloat(anIndex), 0, aScrollViewWidth, aScrollViewHeight)) 
       anEssayTextView.text = essays[anIndex] 
       anEssayTextView.editable = false 
       self.scrollView.addSubview(anEssayTextView) 
   
   } 
   

6. ScrollViewデリゲート機能

   func scrollViewDidEndDecelerating(scrollView: UIScrollView) { 
   
   pageNumber = round(scrollView.contentOffset.x/scrollView.frame.size.width) 
   
   if (pageNumber == 0) { 
       firstButtonTapped() 
   } else { 
       secondButtonTapped() 
   } 
   } 
   

7. ボタンアクション

   func firstButtonTapped() { 
   
   firstButton.setTitleColor(UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0), forState: .Normal) 
   secondButton.setTitleColor(UIColor.whiteColor(), forState: .Normal) 
   
   if (self.lineView.frame.origin.x != 0) { 
   
       UIView.animateWithDuration(0.25) { 
   
        self.lineView.frame.origin.x -= self.tabView.frame.size.width/2 
   
       } 
   
   } 
   
   scrollView.setContentOffset(CGPointMake(0, 0), animated: true) 
   
   pageNumber = 0 
   
   } 
   
   
   func secondButtonTapped() { 
   
   firstButton.setTitleColor(UIColor.whiteColor(), forState: .Normal) 
   secondButton.setTitleColor(UIColor(red: 0/255, green: 191/255, blue: 165/255, alpha: 1.0), forState: .Normal) 
   
   if (self.lineView.frame.origin.x != self.tabView.frame.size.width/2) { 
   
       UIView.animateWithDuration(0.25) { 
   
        self.lineView.frame.origin.x += self.tabView.frame.size.width/2 
   
       } 
   
   } 
   
   scrollView.setContentOffset(CGPointMake(self.scrollView.frame.size.width, 0), animated: true) 
   
   pageNumber = 1 
   
   } 
   

Answer 2

。ここで

はそれを行う方法です：

scroll directionのを設定することを忘れないでください：以下のスクリーンショットに示すように

1. はあなたのViewControllerインターフェースを作成します。 collection view〜horizontal

   2としてあなたのViewControllerクラスを作成します

   import UIKit 
   
   
       class CustomCollectionViewCell: UICollectionViewCell 
       { 
        //MARK: Outlets 
        @IBOutlet private weak var titleLabel: UILabel! 
        @IBOutlet private weak var blueDividerLineImageView: UIImageView! 
   
        //MARK: Overridden Properties 
   
       override var isSelected: Bool{ 
        willSet{ 
         super.isSelected = newValue 
         if newValue 
         { 
          self.titleLabel.textColor = UIColor(red: 0.0/255.0, green: 122.0/255.0, blue: 255.0/255.0, alpha: 1.0) 
          self.blueDividerLineImageView.isHidden = false 
         } 
         else 
         { 
          self.titleLabel.textColor = UIColor.black 
          self.blueDividerLineImageView.isHidden = true 
         } 
        } 
       } 
   
       //MARK: Internal Properties 
       var titleString : String?{ 
        get{ 
         return self.titleLabel.text 
        } 
        set{ 
         self.titleLabel.text = newValue 
        } 
       } 
   
       //MARK: View Lifecycle Methods 
       override func awakeFromNib() 
       { 
        self.titleLabel.text = nil 
   
   
       } 
   } 
   

   3としてカスタムコレクションビューのセルクラスを作成します。

   import UIKit 
   
   class ViewController: UIViewController 
   { 
       @IBOutlet weak var customCollectionView: UICollectionView! 
   
       let tabsArray = ["Tab 1", "Tab 2", "Tab 3", "Tab 4", "Tab 5"] 
   
       override func viewDidLoad() 
       { 
       } 
   
       override var prefersStatusBarHidden: Bool{ 
        return true 
       } 
   } 
   
   // MARK: - UICollectionViewDataSource, UICollectionViewDelegate Methods 
   extension ViewController : UICollectionViewDataSource, UICollectionViewDelegate 
   { 
       //MARK: UICollectionViewDataSource 
       func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
       { 
        return self.tabsArray.count 
       } 
   
       func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 
       { 
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell 
        cell.titleString = self.tabsArray[indexPath.row] 
        return cell 
       } 
   
       //MARK: UICollectionViewDelegate 
       func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) 
       { 
        //For initially highlighting the first cell of "customCollectionView" when ViewController is loaded 
        guard let _ = collectionView.indexPathsForSelectedItems?.first, indexPath.row != 0 else 
        { 
         cell.isSelected = true 
         collectionView.selectItem(at: indexPath, animated: false, scrollPosition: .left) 
         return 
        } 
       } 
   
       func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) 
       { 
        collectionView.selectItem(at: indexPath, animated: true, scrollPosition: .centeredHorizontally) 
        print("\(self.tabsArray[indexPath.row]) Pressed") 
   
        //Do your task here..whatever you want to do when pressing the tabs 
       } 
   } 
   

   出力画面には、次のとおりです。