美文网首页
SwiftUI-TabView实现自定义icon显示

SwiftUI-TabView实现自定义icon显示

作者: 丿小七 | 来源:发表于2022-08-19 18:11 被阅读0次

因为要兼容Ios13把,Lable的用法不适用,所以还是回归原始方式实现tabbarItem。

image.png

搜索了两种自定义的实现方式

方法一、根据选中项绑定显示的图片


import SwiftUI

struct ContentView: View {
    enum Tab: Int {
        case home, mall, my
    }
    @State var selectedTab = Tab.home
    var body: some View {
        NavigationView {
            TabView(selection: $selectedTab) {
                HomeView().tag(Tab.home) .tabItem {
                    if selectedTab == .home { Image("shouye-b")
                    } else {
                        Image("shouye-a")
                    }
                    Text("首页")
                }
                MallView().tag(Tab.mall) .tabItem {
                    if selectedTab == .mall { Image("jfsc-b")
                    } else {
                        Image("jfsc-a")
                    }
                    Text("积分商城")
                }
                MyView().tag(Tab.my) .tabItem {
                    if selectedTab == .my { Image("user_b")
                    } else {
                        Image("user_a")
                    }
                    Text("我的")
                }
            }.accentColor(Color.orange)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

方法二、重新布局底部item,页面事件切换绑定系统的方法。适合有特殊按钮的tabbar场景。
参考:SwiftUI自定UITabBar

import SwiftUI

struct ContentView: View {
    enum Tab: Int {
        case home, mall, my
    }
    @State var selectedTab = Tab.home
    
    func tabbarItem(text: String, img: String, tab:Tab, selectedImg:String) -> some View {
        VStack(spacing: 0) {
            Image(selectedTab == tab ? selectedImg : img).imageScale(.large)
            Text(text)
                .font(Font.system(size: 13)).foregroundColor(selectedTab == tab ? Color.orange : Color.gray)
                .padding(.top, 3)
        }.frame(width: UIScreen.main.bounds.size.width / 3, height: 49, alignment: .center).background(Color.white)
    }
    
    var body: some View {
        NavigationView {
            ZStack(alignment: .bottom) {
                TabView(selection: $selectedTab) {
                    HomeView().tag(Tab.home) //自定义的内容view
                    MallView().tag(Tab.mall)//自定义的内容view
                    MyView().tag(Tab.my)//自定义的内容view
                }
                HStack(alignment: .center, spacing: 0) {
                    self.tabbarItem(text: "首页", img: "shouye-a", tab: Tab.home, selectedImg: "shouye-b").onTapGesture {
                        selectedTab = .home
                    }
                    self.tabbarItem(text: "积分商城", img: "jfsc-a", tab: Tab.mall, selectedImg: "jfsc-b").onTapGesture {
                        selectedTab = .mall
                    }
                    self.tabbarItem(text: "我的", img: "user_a", tab: Tab.my, selectedImg: "user_b").onTapGesture {
                        selectedTab = .my
                    }
                }
            }
        }
    }
}

相关文章

网友评论

      本文标题:SwiftUI-TabView实现自定义icon显示

      本文链接:https://www.haomeiwen.com/subject/aepugrtx.html