iOS开发 - 自定义主页菜单选择视图

下面简单仿下现在流行的主页菜单选择布局，原理很简单，不过下面这个是固定样式的，大家有时间的话，可以自己按照需求改成动态的。

Simulator Screen Shot 2016年6月21日 下午11.00.15.png Menu.gif

MenuView.swift

import UIKit

struct MenuModel {
    
   static let menuArr = [(1,title:"sunbed", imageUrl:"sunbed"),
                   (2,title:"bag", imageUrl:"bag-1"),
                   (3,title:"cocktail", imageUrl:"cocktail"),
                   (4,title:"cruise", imageUrl:"cruise"),
                   (5,title:"f-flops", imageUrl:"flip-flops-1"),
                   (6,title:"helm", imageUrl:"helm"),
                   (7,title:"bellhop", imageUrl:"bellhop"),
                   (8,title:"aqualung", imageUrl:"aqualung-1"),
                   (9,title:"gps", imageUrl:"gps"),
                   (10,title:"igloo", imageUrl:"igloo"),
                   (11,title:"lifebuoy", imageUrl:"lifebuoy"),
                   (12,title:"luggage", imageUrl:"luggage"),
                   (13,title:"oxygen-tank", imageUrl:"oxygen-tank"),
                   (14,title:"ring", imageUrl:"ring"),
                   (15,title:"seashell", imageUrl:"seashell"),
                   (16,title:"snorkel", imageUrl:"snorkel"),
                   (17,title:"protection", imageUrl:"sun-protection"),
                   (18,title:"castle", imageUrl:"sand-castle"),
                   (19,title:"service", imageUrl:"room-service"),
                   (20,title:"castle", imageUrl:"sand-castle")]
}

protocol MenuViewDelegate {
    func menuDidSelectedAtIndex(index: Int)
}

class MenuView: UIView {
    
    // MARK: - 属性
   private let SCREEN_WIDTH = UIScreen.mainScreen().bounds.size.width
   private let SCREEN_HEIGHT = UIScreen.mainScreen().bounds.size.height

   private var backView1 = UIView()
   private var backView2 = UIView()
   private var pageControl = UIPageControl()
    
   var delegate: MenuViewDelegate? //找个代理
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.initWithMenuView()
        self.initPageControl()
    }
   
   // MARK: - 初始化视图
   private func initWithMenuView() {
        
        backView1.frame = CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: 160)
        backView2.frame = CGRect(x: SCREEN_WIDTH, y: 0, width: SCREEN_WIDTH, height: 160)
        let scrollView = UIScrollView(frame: CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: 180))
        scrollView.contentSize = CGSizeMake(2 * SCREEN_WIDTH, 180)
        scrollView.pagingEnabled = true
        scrollView.delegate = self
        scrollView.showsVerticalScrollIndicator = false
        scrollView.showsHorizontalScrollIndicator = false
        
        scrollView.addSubview(backView1)
        scrollView.addSubview(backView2)
        self.addSubview(scrollView)
        
        for i in 0..<20 {
            var frame = CGRect()
            switch i {
            case 0..<5:
                frame = CGRect(x: CGFloat(i) * SCREEN_WIDTH/5, y: 0, width: SCREEN_WIDTH/5, height: 80)
            case 5..<10:
                frame = CGRect(x: CGFloat(i - 5) * SCREEN_WIDTH/5, y: 80, width: SCREEN_WIDTH/5, height: 80)
            case 10..<15:
                frame = CGRect(x: CGFloat(i - 10) * SCREEN_WIDTH/5, y: 0, width: SCREEN_WIDTH/5, height: 80)
            case 15..<20:
                frame = CGRect(x: CGFloat(i - 15) * SCREEN_WIDTH/5, y: 80, width: SCREEN_WIDTH/5, height: 80)
            default:
                break
            }
            self.generateTheview(frame, index: i)
        }
    }
    
   private func generateTheview(frame: CGRect, index: Int) {
        let frame = frame
        let title = MenuModel.menuArr[index].title
        let imagestr = MenuModel.menuArr[index].imageUrl
        
        let AmenuView = UIView(frame: frame)
        AmenuView.tag = MenuModel.menuArr[index].0 //tag值从1开始
        
        if index < 10 {
            backView1.addSubview(AmenuView)
        } else {
            backView2.addSubview(AmenuView)
        }
        //手势
        let tap = UITapGestureRecognizer(target: self, action: #selector(MenuView.OnTapMenuView(_:)))
        AmenuView.addGestureRecognizer(tap)
        
        let frameW = frame.size.width
        let _ = frame.size.height
        
        //图片
        let imageView = UIImageView(frame: CGRect(x: frameW/2 - 20, y: 20, width: 40, height: 40))
        imageView.image = UIImage(named: imagestr)
        AmenuView.addSubview(imageView)
        //文字
        let tiltelabel = UILabel(frame: CGRect(x: 0, y: imageView.frame.height + 20, width: frameW, height: 20))
        tiltelabel.font = UIFont.systemFontOfSize(12)
        tiltelabel.textAlignment = .Center
        tiltelabel.text = title
        AmenuView.addSubview(tiltelabel)
    }
    
    // 初始化 pageControl
   private func initPageControl()  {
        pageControl.frame = CGRect(x: SCREEN_WIDTH/2, y: 160, width: 0, height: 20)
        pageControl.currentPage = 0
        pageControl.numberOfPages = 2
        self.addSubview(pageControl)
        pageControl.currentPageIndicatorTintColor = UIColor.brownColor()
        pageControl.pageIndicatorTintColor = UIColor.grayColor()
    }
    
    //MARK: - 方法  代理回传
   func OnTapMenuView(sender: UITapGestureRecognizer) {
        let index = sender.view?.tag ?? 0
        self.delegate?.menuDidSelectedAtIndex(index)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

extension MenuView: UIScrollViewDelegate {
   func scrollViewDidScroll(scrollView: UIScrollView) {
        let scrollViewW = scrollView.frame.size.width
        let x = scrollView.contentOffset.x
        let page = (x + scrollViewW/2) / scrollViewW
        pageControl.currentPage = Int(page)
    }
}

---

使用例子：ViewController.swift

import UIKit

class ViewController: UIViewController,MenuViewDelegate {

    @IBOutlet weak var imageView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let menuView = MenuView(frame: CGRect(x: 0, y: 20, width: self.view.frame.width, height: 200))
        self.view.addSubview(menuView)
        menuView.delegate = self
    }
    
    func menuDidSelectedAtIndex(index: Int) {
        print(index)
        //imageView.image = UIImage(named: MenuModel.menuArr[index-1].imageUrl)
    }
}