PageMenuKitSwiftUI is a swift package derived from PageMenuKitSwift framework. PageMenuKitSwiftUI has been improved to be easier and more convenient to use than PageMenuKitSwift.
You can add this package on Xcode. See documentation.
First, import PageMenuKitSwiftUI to use this package.
Then, create a menu according to the PMKMenu
protocol as follows.
enum MonthMenu: Int, PMKMenu
{
case january
case february
case march
case april
case may
case june
case july
case august
case september
case october
case november
case december
var index: Int { // MARK: - Required
return rawValue
}
var title: String { // MARK: - Required
switch self {
case .january: return "January"
case .february: return "February"
case .march: return "March"
case .april: return "April"
case .may: return "May"
case .june: return "June"
case .july: return "July"
case .august: return "August"
case .september: return "September"
case .october: return "October"
case .november: return "November"
case .december: return "December"
}
}
}
Next, pass to PageMenuStack
the menu you have created, the style of menu you wish to use, and the starting menu information.
Final, you implement the menu content view for each menu you created.
struct ContentView: View
{
var body: some View {
PMKPageMenuStack(MonthMenu.allCases, style: .plain, selected: .june) {
(menu) -> MenuContentView in
MenuContentView(menu: menu)
}
}
struct MenuContentView: View
{
let menu: MonthMenu
var body: some View {
GeometryReader { geometry in
ZStack {
Rectangle()
.foregroundColor(.white)
.frame(width: geometry.size.width, height: geometry.size.height)
Text(menu.title)
.font(.title)
}
}
}
}
}
The menu style like ニュースパス app.
The menu style like グノシー app.
The menu style like SmartNews app.
The menu style like ハッカドール app.
The menu style like JCnews app.
The menu style like JCnews Web Site.
The menu style like NewsSuite app (the background is gradient colors).
The menu style like ねとらぼ app (the background is transparent).
The menu style like NHK ニュース・防災 app.
PageMenuKitSwiftUI provides PMKColorConfiguration
to change colors for each menu style.
The .plain
, .hacka
, .ellipse
and .nhk
style can set only tintColor
using the custom initializer which is as follows.
The initializer is .plain
and the argument is tintColor.
The tintColor affects the color of selected title and border.
let configuration: PMKColorConfiguration = .plain(tintColor: .purple)
var body: some View {
PMKPageMenuStack(MonthMenu.allCases, style: .plain, selected: .june, configuration: configuration) {
(menu) -> MenuContentView in
MenuContentView(menu: menu)
}
}
The initializer is .hacka
and the argument is tintColor.
The tintColor affects the color of title, border and selected item background.
let configuration: PMKColorConfiguration = .hacka(tintColor: .purple)
var body: some View {
PMKPageMenuStack(MonthMenu.allCases, style: .hacka, selected: .june, configuration: configuration) {
(menu) -> MenuContentView in
MenuContentView(menu: menu)
}
}
The initializer is .ellipse
and the argument is tintColor.
The tintColor affects the color of selected title and unselected item background.
let configuration: PMKColorConfiguration = .ellipse(tintColor: .purple)
var body: some View {
PMKPageMenuStack(MonthMenu.allCases, style: .ellipse, selected: .june, configuration: configuration) {
(menu) -> MenuContentView in
MenuContentView(menu: menu)
}
}
The initializer is .nhk
and the argument is tintColor.
The tintColor affects the color of title, border and selected item background.
let configuration: PMKColorConfiguration = .nhk(tintColor: .purple)
var body: some View {
PMKPageMenuStack(MonthMenu.allCases, style: .nhk, selected: .june, configuration: configuration) {
(menu) -> MenuContentView in
MenuContentView(menu: menu)
}
}
The .tab
, and .smart
style can set only menuColors
using the custom initializer which is as follows.
The initializer is .tab
and the argument is menuColors.
The menuColors affects the color of the title. The border color is applied by the color of the selected item.
If the number of menus is greater than the number of color schemes, the colors are applied in order.
let configuration: PMKColorConfiguration = .tab(menuColors: [ .red, .orange, .green, .blue, .purple ])
var body: some View {
PMKPageMenuStack(MonthMenu.allCases, style: .tab, selected: .june, configuration: configuration) {
(menu) -> MenuContentView in
MenuContentView(menu: menu)
}
}
The initializer is .smart
and the argument is menuColors.
The menuColors affects the color of the item background. The border color is applied by the color of the selected item.
If the number of menus is greater than the number of color schemes, the colors are applied in order.
let configuration: PMKColorConfiguration = .smart(menuColors: [ .red, .orange, .yellow, .green, .purple ])
var body: some View {
PMKPageMenuStack(MonthMenu.allCases, style: .smart, selected: .june, configuration: configuration) {
(menu) -> MenuContentView in
MenuContentView(menu: menu)
}
}
The initializer is .web
and the arguments are tintColor
, borderColor
and inactiveBackgroundColor
.
The tintColor affects the color of the selected item background.
The borderColor affects the color of bottom border.
The inactiveBackgroundColor affects the unselected item background.
let configuration: PMKColorConfiguration = .web(tintColor: .purple, borderColor: .red, inactiveBackgroundColor: .teal)
var body: some View {
PMKPageMenuStack(MonthMenu.allCases, style: .web, selected: .june, configuration: configuration) {
(menu) -> MenuContentView in
MenuContentView(menu: menu)
}
}
The initializer is .suite
and the arguments are tintColor
and gradient
.
The tintColor affects the bottom border color of the selected item.
The gradient affects the item background.
let configuration: PMKColorConfiguration = .suite(tintColor: .purple, gradient: [.orange, .pink])
var body: some View {
PMKPageMenuStack(MonthMenu.allCases, style: .suite, selected: .june, configuration: configuration) {
(menu) -> MenuContentView in
MenuContentView(menu: menu)
}
}
The initializer is .netlab
and the arguments are tintColor
and activeBackgroundColor
.
The tintColor affects the title color of the unselected items.
The activeBackgroundColor affects the color of selected item background.
let configuration: PMKColorConfiguration = .netlab(tintColor: .green, activeBackgroundColor: .mint)
var body: some View {
PMKPageMenuStack(MonthMenu.allCases, style: .netlab, selected: .june, configuration: configuration) {
(menu) -> MenuContentView in
MenuContentView(menu: menu)
}
}
protocol PMKMenu: CaseIterable, Hashable
{
var index: Int { get }
var title: String { get }
}
static func plain(tintColor: Color) -> Self
static func hacka(tintColor: Color) -> Self
static func ellipse(tintColor: Color) -> Self
static func nhk(tintColor: Color) -> Self
static func tab(menuColors: [Color]) -> Self
static func smart(menuColors: [Color]) -> Self
static func netlab(tintColor: Color, activeBackgroundColor: Color) -> Self
static func suite(tintColor: Color, gradient: [Color]) -> Self
static func web(tintColor: Color, borderColor: Color, inactiveBackgroundColor: Color) -> Self
struct PMKPageMenuStack<Menu,Content>: View where Menu: PMKMenu, Content: View
init(_ menus: [Menu], style: PMKMenuStyle, selected: Menu, configuration: PMKColorConfiguration? = nil, @ViewBuilder content: @escaping (Menu) -> Content)
- Swift 5 or later
- iOS 15 or later
- Xcode 13.4 or later
This package is licensed under BSD License