分页菜单 html,Swift - 分页菜单的实现（使用PagingMenuController库实现tab标签切换）...

这个很重要，用来配置整个分页菜单控制器包含的页面和菜单标签。这也是一个枚举，可选值如下：

public enum ComponentType {

case menuView(menuOptions: MenuViewCustomizable)

case pagingController(pagingControllers: [UIViewController])

case all(menuOptions: MenuViewCustomizable, pagingControllers: [UIViewController])

}

8，下面是一个完整的配置样例

//分页菜单配置

private struct PagingMenuOptions: PagingMenuControllerCustomizable {

//默认显示第2页

var defaultPage: Int = 1

//页面切换动画播放时间为0.5秒

var animationDuration: TimeInterval = 0.5

//不允许手指左右滑动页面切换

var isScrollEnabled: Bool = false

//页面背景色为紫色

var backgroundColor: UIColor = .purple

//lazy loading的页面数量(默认值就是.three)

var lazyLoadingPage: LazyLoadingPage = .three

//不太清楚干嘛用的(默认值就是.multiple)

var menuControllerSet: MenuControllerSet = .multiple

//第1个子视图控制器

private let viewController1 = ViewController1()

//第2个子视图控制器

private let viewController2 = ViewController2()

//组件类型

fileprivate var componentType: ComponentType {

return .all(menuOptions: MenuOptions(), pagingControllers: pagingControllers)

}

//所有子视图控制器

fileprivate var pagingControllers: [UIViewController] {

return [viewController1, viewController2]

}

//菜单配置项

fileprivate struct MenuOptions: MenuViewCustomizable {

//菜单显示模式

var displayMode: MenuDisplayMode {

return .segmentedControl

}

//菜单项

var itemsOptions: [MenuItemViewCustomizable] {

return [MenuItem1(), MenuItem2()]

}

}

//第1个菜单项

fileprivate struct MenuItem1: MenuItemViewCustomizable {

//自定义菜单项名称

var displayMode: MenuItemDisplayMode {

return .text(title: MenuItemText(text: "电影"))

}

}

//第2个菜单项

fileprivate struct MenuItem2: MenuItemViewCustomizable {

//自定义菜单项名称

var displayMode: MenuItemDisplayMode {

return .text(title: MenuItemText(text: "音乐"))

}

}

}

七、自定义菜单栏样式

MenuViewCustomizable对象有如下几个属性对菜单栏进行自定义：

1，backgroundColor: UIColor

设置未选中的菜单标签背景色。

2，selectedBackgroundColor: UIColor

设置选中的菜单标签背景色。

3，height: CGFloat

设置菜单标签的高度。

4，animationDuration: TimeInterval

设置菜单标签切换时动画持续时长。

5，deceleratingRate: CGFloat

设置菜单切换动画减速率(默认为：UIScrollViewDecelerationRateFast)

6，menuSelectedItemCenter: Bool

不太清楚干嘛的。

7，displayMode: MenuDisplayMode

菜单显示模式，它是一个枚举有三个可选值：

public enum MenuDisplayMode {

case standard(widthMode: MenuItemWidthMode, centerItem: Bool,

scrollingMode: MenuScrollingMode)

case segmentedControl

case infinite(widthMode: MenuItemWidthMode,

scrollingMode: MenuScrollingMode) //这个至少要求有3个页面

}

其中的 MenuItemWidthMode、MenuScrollingMode也是枚举：

//设置菜单标签的宽度

public enum MenuItemWidthMode {

case flexible //自动

case fixed(width: CGFloat) //固定宽度

}

//菜单如何滚动

public enum MenuScrollingMode {

case scrollEnabled //可以跨多个菜单项切换

case scrollEnabledAndBouces //可以跨多个菜单项切换

case pagingEnabled //菜单只能一个接一个切换

}

样例1：分段模式

//菜单显示模式(分段模式)

var displayMode: MenuDisplayMode {

return .segmentedControl

}

样例2：标准模式，这里我让选中标签始终居中

 

//菜单显示模式(标准模式)

var displayMode: MenuDisplayMode {

return .standard(widthMode: .fixed(width: 30), centerItem: true,

scrollingMode: .pagingEnabled)

}

样例3：无限循环模式(这个必需至少有三个菜单项)

 

//菜单显示模式(无限循环模式)

var displayMode: MenuDisplayMode {

return .infinite(widthMode: .flexible, scrollingMode: .pagingEnabled)

}

8，focusMode: MenuFocusMode

选中菜单标签的样式，这个也是枚举：

public enum MenuFocusMode {

case none

case underline(height: CGFloat, color: UIColor, horizontalPadding: CGFloat,

verticalPadding: CGFloat)

case roundRect(radius: CGFloat, horizontalPadding: CGFloat, verticalPadding: CGFloat,

selectedColor: UIColor)

}

样例1：无样式

//选中项无样式

var focusMode: MenuFocusMode = .none

样例2：下划线样式

//选中项为橙色下划线样式

var focusMode: MenuFocusMode = .underline(height: 3, color: .orange, horizontalPadding: 0,

verticalPadding: 0)

样例3：圆角矩形背景样式

//选中项为橙色矩形背景

var focusMode: MenuFocusMode = .roundRect(radius: 6, horizontalPadding: 5,

verticalPadding: 8, selectedColor: .orange)

9，dummyItemViewsSet: Int

不太清楚干嘛用的。

10，menuPosition: MenuPosition

菜单栏的位置，我们可以指定菜单栏在页面视图的上方还是下方。

这个也是个枚举：

public enum MenuPosition {

case top

case bottom

}

11，dividerImage: UIImage?

菜单标签间的分隔图片，显示在每个标签的右侧。

//设置标签间的分隔图片

var dividerImage: UIImage? = UIImage(named: "dividerImage.png")!

12，下面是完整的使用样例

//菜单栏配置

fileprivate struct MenuOptions: MenuViewCustomizable {

//设置未选中的菜单标签背景为深灰色

var backgroundColor: UIColor = .darkGray

//设置选中的菜单标签背景为浅浅灰色

var selectedBackgroundColor: UIColor = .lightText

//设置菜单标签高度为40

var height: CGFloat = 40

//菜单切换动画播放时间为0.5秒

var animationDuration: TimeInterval = 0.5

//菜单切换动画减速率(默认为：UIScrollViewDecelerationRateFast)

var deceleratingRate: CGFloat = UIScrollViewDecelerationRateFast

//不知道干嘛的

var menuSelectedItemCenter: Bool = false

//菜单显示模式(分段模式)

var displayMode: MenuDisplayMode {

return .segmentedControl

}

//选中项为橙色矩形背景

var focusMode: MenuFocusMode = .roundRect(radius: 6, horizontalPadding: 5,

verticalPadding: 8, selectedColor: .orange)

//不知道干嘛的

var dummyItemViewsSet: Int = 3

//设置菜单栏在下方

var menuPosition: MenuPosition = .bottom

//设置标签间的分隔图片

var dividerImage: UIImage? = UIImage(named: "dividerImage.png")!

//菜单项

var itemsOptions: [MenuItemViewCustomizable] {

return [MenuItem1(), MenuItem2(), MenuItem3() , MenuItem4()]

}

}

八、自定义单独的菜单标签样式

MenuItemViewCustomizable对象有如下几个属性可以对单独的菜单项进行自定义：

1，horizontalMargin: CGFloat

设置该菜单标签的左右水平间距。

//第2个菜单项

fileprivate struct MenuItem2: MenuItemViewCustomizable {

//该标签的水平边距设为50

var horizontalMargin: CGFloat = 50

//自定义菜单项名称

var displayMode: MenuItemDisplayMode = .text(title: MenuItemText(text: "音乐e"))

}

2，displayMode: MenuItemDisplayMode

设置该菜单标签的显示模式，它是一个枚举：

public enum MenuItemDisplayMode {

case text(title: MenuItemText) //普通标题文本

case multilineText(title: MenuItemText, description: MenuItemText) //标题+描述文本

case image(image: UIImage, selectedImage: UIImage?) //图片

case custom(view: UIView) //自定义视图

}

样例1：修改标签文字的颜色和字体(包括选中和未选中)

//第1个菜单项

fileprivate struct MenuItem1: MenuItemViewCustomizable {

//自定义菜单项名称

var displayMode: MenuItemDisplayMode {

return .text(title: MenuItemText(text: "电影",

color: .lightGray, selectedColor: .orange,

font: UIFont.systemFont(ofSize: 13) ,

selectedFont: UIFont.systemFont(ofSize: 18)))

}

}

//第2个菜单项

fileprivate struct MenuItem2: MenuItemViewCustomizable {

//自定义菜单项名称

var displayMode: MenuItemDisplayMode {

return .text(title: MenuItemText(text: "音乐",

color: .lightGray, selectedColor: .orange,

font: UIFont.systemFont(ofSize: 13) ,

selectedFont: UIFont.systemFont(ofSize: 18)))

}

}

样例2：标签显示为标题+描述文本

//第2个菜单项

fileprivate struct MenuItem2: MenuItemViewCustomizable {

//该标签的水平边距设为50

var horizontalMargin: CGFloat = 50

//自定义菜单项标题和描述

var displayMode: MenuItemDisplayMode {

let desFont = UIFont.systemFont(ofSize: 10)

let description = MenuItemText(text: "Music", font: desFont , selectedFont: desFont )

return .multilineText(title: MenuItemText(text: "音乐"), description: description)

}

}

样例3：将菜单标签显示为图片

//第2个菜单项

fileprivate struct MenuItem2: MenuItemViewCustomizable {

//该标签的水平边距设为50

var horizontalMargin: CGFloat = 50

//菜单项显示为图片

var displayMode: MenuItemDisplayMode {

return .image(image: UIImage(named: "forward")!,

selectedImage: UIImage(named: "forward")!)

}

}