ios开发框架封装(一):UITabBar 凸起按钮样式、阴影等

162 阅读3分钟

先放demo地址:github.com/KeWangKW/KW…

  • 基于swift5实现,也适用于OC ,demo中有简单的使用示例
  • 侧重于实现各种凸起样式,以便于在自己项目中根据后台配置,修改Tabbar样式
  • 使用时先默认展示一种样式的Tabbar,拉取到配置信息后再 直接替换Tabbar 或者 下次打开app时替换
  • demo中:
  • vcArr 我直接用的创建VC ,在我项目中从接口拿到vc名的字符串,通过 NSClassFromString 转换成VC
  • imageArr 当前使用的是本地图片 ,如果也要通过后台配置的话,需要用网络图片,可通过把网络图片缓存到本地,然后转化为UIImage对象

注意事项:
  • 默认无分割线,设置阴影
  • 阴影的颜色、偏移量等请自行修改
  • 如果要设置圆角,请自行修改 setTabBarShadowWith 的绘制方法
  • KWTabBarController init 方法中,vcArr、titleArr、normalImageArr、selectedImageArr 为必传项 selectedIndex 为必设项
  • 调用 changeRootViewController 方法就是替换rootViewController
  • radius、imageEdgeInsets_Move、imageEdgeInsets_Normal 需要根据使用的图片自行修改
  • demo和下面的动图中,固定凸起样式时,图片设置的是同一张图
展示:
  • 实现样式1:
  • 普通样式,无凸起
  • 只需传入必要的基础信息即可 屏幕录制2023-06-14 14.05.29.gif
        let vcArr = [TabBar1VC(), TabBar2VC(), TabBar3VC(), TabBar4VC(), TabBar5VC()];
        let titleArr = ["tab1", "tab2", "tab3", "tab4", "tab5"];
        let normalImageArr = ["icon_guanli01", "icon_gongzuotai01", "icon_xiaoxi01", "icon_wode01", "icon_wode01"];
        let selectedImageArr = ["icon_guanli02", "icon_gongzuotai02", "icon_xiaoxi02", "icon_wode02", "icon_wode02"];
        
        //let vc = KWTabBarController(vcArr, titleArr, normalImageArr, selectedImageArr)
        let vc = KWTabBarController(vcArr, titleArr, normalImageArr, selectedImageArr ,backGroundColor: .yellow)
        vc.selectedIndex = 0;
        self.changeRootViewController(vc: vc)
  • 实现样式2:
  • humpType = 1 传值,表示所有item 【选中后凸起样式,未选中默认样式】
  • selectedIndex 必须设置,以便于在初始状态下执行绘制代码 屏幕录制2.gif
        let vc = KWTabBarController(vcArr, titleArr, normalImageArr, selectedImageArr ,humpType: 1)
        vc.selectedIndex = 2;
        self.changeRootViewController(vc: vc)
  • 实现样式3:
  • humpType = 2 传值,表示部分item 【选中后凸起样式,未选中默认样式】
  • humpAddress = [0,2,4] ,表示第0、2、4个item的样式如上所述
  • selectedIndex 必须设置,以便于在初始状态下执行绘制代码 屏幕录制3.gif
        let vc = KWTabBarController(vcArr, titleArr, normalImageArr, selectedImageArr ,humpType: 2 ,humpAddress: [0,2,4])
        vc.selectedIndex = 2;
        self.changeRootViewController(vc: vc)
  • 实现样式4:
  • humpType = 2 humpAddress = [2]
  • 表示仅第2个item的样式为 【选中后凸起样式,未选中默认样式】
  • selectedIndex 必须设置,以便于在初始状态下执行绘制代码 屏幕录制4.gif
        let vc = KWTabBarController(vcArr, titleArr, normalImageArr, selectedImageArr ,humpType: 2 ,humpAddress: [2])
        vc.selectedIndex = 2;
        self.changeRootViewController(vc: vc)
  • 实现样式5:
  • humpType = 3 表示item【选中、未选中 都是固定凸起样式】
  • humpAddress = [0,2,4] ,表示第0、2、4个item样式如上所述
  • selectedIndex 必须设置,以便于在初始状态下执行绘制代码 屏幕录制5.gif
        //let vc = KWTabBarController(vcArr, titleArr, normalImageArr, selectedImageArr ,humpType: 3 ,humpAddress: [0,2,4])
        let vc = KWTabBarController(vcArr, titleArr, normalImageArr, selectedImageArr ,humpType: 3 ,humpAddress: [0,2,4] ,backGroundColor: .yellow)
        vc.selectedIndex = 2;
        self.changeRootViewController(vc: vc)
  • 实现样式6:
  • humpType = 3 表示item【选中、未选中 都是固定凸起样式】
  • humpAddress = [2] ,表示第2个item样式如上所述
  • selectedIndex 必须设置,以便于在初始状态下执行绘制代码 屏幕录制6.gif
        let vc = KWTabBarController(vcArr, titleArr, normalImageArr, selectedImageArr ,humpType: 3 ,humpAddress: [2])
        vc.selectedIndex = 2;
        self.changeRootViewController(vc: vc)
  • 其他样式:
  • 如果需要中间的Item 凸起,不展示文字,只需将titleArr对应的值 设置为空字符串,然后修改半径偏移量等
常见的tabbar样式基本也就这些了吧