下面简单仿下现在流行的主页菜单选择布局,原理很简单,不过下面这个是固定样式的,大家有时间的话,可以自己按照需求改成动态的。
Simulator Screen Shot 2016年6月21日 下午11.00.15.png
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)
}
}