欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

你知道Tab Bar图标原来还可以这样玩吗

程序员文章站 2023-11-27 21:10:58
示例代码下载 (本地下载) 背景 框架自带的 tab bar 相信大家已经熟悉得不能再熟悉了,一般使用的时候不过是设置两个图标代表选中和未选中两种状态...

示例代码下载 (本地下载

背景

框架自带的 tab bar 相信大家已经熟悉得不能再熟悉了,一般使用的时候不过是设置两个图标代表选中和未选中两种状态,难免有一些平淡。后来很多控件就在标签选中时进行一些比较抓眼球的动画,不过我觉得大部分都是为了动画而动画。直到后来我看到outlook客户端的动画时,我才意识到原来还可以跟用户的交互结合在一起。

你知道Tab Bar图标原来还可以这样玩吗

图1 标签图标跟随手势进行不同的动画

有意思吧,不过本文并不是要仿制个一模一样的出来,会有稍微变化:

你知道Tab Bar图标原来还可以这样玩吗
图2 本文完成的最终效果

实现分析

写代码之前,咱先讨论下实现的方法,相信你已经猜到标签页的图标显然已经不是图片,而是一个自定义的uiview。将一个视图挂载到原本图标的位置并不是一件难事,稍微有些复杂的是数字滚轮效果的实现,别看它数字不停地在滚动,仔细看其实最多显示2种数字,也就说只要2个label就够了。

基于篇幅,文章不会涉及右侧的时钟效果,感兴趣请直接参考源码。

数字滚轮

打开项目tabbarinteraction,新建文件wheelview.swift,它是uiview的子类。首先设置好初始化函数:

class wheelview: uiview {
 required init?(coder adecoder: nscoder) {
  super.init(coder: adecoder)
  setupview()
 }
 override init(frame: cgrect) {
  super.init(frame: frame)
  setupview()
 }
}

接着创建两个label实例,代表滚轮中的上下两个label:

private lazy var toplabel: uilabel = {
 return createdefaultlabel()
}()

private lazy var bottomlabel: uilabel = {
 return createdefaultlabel()
}()

private func createdefaultlabel() -> uilabel {
 let label = uilabel() 
 label.textalignment = nstextalignment.center
 label.adjustsfontsizetofitwidth = true
 label.translatesautoresizingmaskintoconstraints = false
 return label
}

现在来完成setupview()方法,在这方法中将上述两个label添加到视图中,然后设置约束将它们的四边都与layoutmarginsguide对齐。

private func setupview() {
 translatesautoresizingmaskintoconstraints = false
 for label in [toplabel, bottomlabel] {
  addsubview(label)
  nslayoutconstraint.activate([
   label.topanchor.constraint(equalto: layoutmarginsguide.topanchor),
   label.bottomanchor.constraint(equalto: layoutmarginsguide.bottomanchor),
   label.leftanchor.constraint(equalto: layoutmarginsguide.leftanchor),
   label.rightanchor.constraint(equalto: layoutmarginsguide.rightanchor)
  ])
 }
}

有人可能会问现在这样两个label不是重叠的状态吗?不着急,接下来我们会根据参数动态地调整它们的大小和位置。

添加两个实例变量progress和contents,分别表示滚动的总体进度和显示的全部内容。

var progress: float = 0.0
var contents = [string]()

我们接下来要根据这两个变量计算出当前两个label显示的内容以及它们的缩放位置。这些计算都在progress的didset里完成:

var progress: float = 0.0 {
 didset {
  progress = min(max(progress, 0.0), 1.0) 
  guard contents.count > 0 else { return }
  
  /** 根据 progress 和 contents 计算出上下两个 label 显示的内容以及 label 的压缩程度和位置
   *
   * example: 
   * progress = 0.4, contents = ["a","b","c","d"]
   *
   * 1)计算两个label显示的内容
   * topindex = 4 * 0.4 = 1.6, toplabel.text = contents[1] = "b"
   * bottomindex = 1.6 + 1 = 2.6, bottomlabel.text = contents[2] = "c" 
   * 
   * 2) 计算两个label如何压缩和位置调整,这是实现滚轮效果的原理
   * indexoffset = 1.6 % 1 = 0.6
   * halfheight = bounds.height / 2
   * ┌─────────────┐    ┌─────────────┐         
   * |┌───────────┐| scaley |    |       
   * ||   || 1-0.6=0.4 |    | translationy  
   * || toplabel || ----------> |┌─ toplabel─┐| ------------------ 
   * ||   ||    |└───────────┘| -halfheight * 0.6 ⎞ ┌─────────────┐
   * |└───────────┘|    |    |     ⎥ |┌─ toplabel─┐|
   * └─────────────┘    └─────────────┘     ⎟ |└───────────┘|
   *                 ❯ |┌───────────┐|
   * ┌─────────────┐    ┌─────────────┐     ⎟ ||bottomlabel||
   * |┌───────────┐| scaley |    |     ⎟ |└───────────┘|
   * ||   || 0.6  |┌───────────┐| translationy  ⎠ └─────────────┘
   * ||bottomlabel|| ----------> ||bottomlabel|| ----------------- 
   * ||   ||    |└───────────┘| halfheight * 0.4  
   * |└───────────┘|    |    |      
   * └─────────────┘    └─────────────┘      
   *
   * 可以想象出,当 indexoffset 从 0.0 递增到 0.999 过程中,
   * toplabel 从满视图越缩越小至0,而 bottomlabel刚好相反越变越大至满视图,即形成一次完整的滚动
   */
  let topindex = min(max(0.0, float(contents.count) * progress), float(contents.count - 1))
  let bottomindex = min(topindex + 1, float(contents.count - 1))
  let indexoffset = topindex.truncatingremainder(dividingby: 1)
  
  toplabel.text = contents[int(topindex)]
  toplabel.transform = cgaffinetransform(scalex: 1.0, y: cgfloat(1 - indexoffset))
   .concatenating(cgaffinetransform(translationx: 0, y: -(toplabel.bounds.height / 2) * cgfloat(indexoffset)))
   
  bottomlabel.text = contents[int(bottomindex)]
  bottomlabel.transform = cgaffinetransform(scalex: 1.0, y: cgfloat(indexoffset))
   .concatenating(cgaffinetransform(translationx: 0, y: (bottomlabel.bounds.height / 2) * (1 - cgfloat(indexoffset))))
 }
}

最后我们还要向外公开一些样式进行自定义:

extension wheelview {
 /// 前景色变化事件
 override func tintcolordidchange() {
  [toplabel, bottomlabel].foreach { $0.textcolor = tintcolor }
  layer.bordercolor = tintcolor.cgcolor
 }
 /// 背景色
 override var backgroundcolor: uicolor? {
  get { return toplabel.backgroundcolor }
  set { [toplabel, bottomlabel].foreach { $0.backgroundcolor = newvalue } }
 }
 /// 边框宽度
 var borderwidth: cgfloat {
  get { return layer.borderwidth }
  set {
   layoutmargins = uiedgeinsets(top: newvalue, left: newvalue, bottom: newvalue, right: newvalue)
   layer.borderwidth = newvalue
  }
 }
 /// 字体
 var font: uifont {
  get { return toplabel.font }
  set { [toplabel, bottomlabel].foreach { $0.font = newvalue } }
 }
}

至此,整个滚轮效果已经完成。

挂载视图

在firstviewcontroller中实例化刚才自定义的视图,设置好字体、边框、背景色、contents等内容,别忘了isuserinteractionenabled设置为false,这样就不会影响原先的事件响应。

 override func viewdidload() {
  super.viewdidload()
  // do any additional setup after loading the view.
  
  tableview.delegate = self
  tableview.datasource = self
  tableview.register(uitableviewcell.self, forcellreuseidentifier: "defaultcell")
  tableview.rowheight = 44

  wheelview = wheelview(frame: cgrect.zero)
  wheelview.font = uifont.systemfont(ofsize: 15, weight: .bold)
  wheelview.borderwidth = 1
  wheelview.backgroundcolor = uicolor.white
  wheelview.contents = data
  wheelview.isuserinteractionenabled = false
}

然后要把视图挂载到原先的图标上,viewdidload()方法底部新增代码:

 override func viewdidload() {
 ...
 guard let parentcontroller = self.parent as? uitabbarcontroller else { return }
 let controllerindex = parentcontroller.children.firstindex(of: self)!
 var tabbarbuttons = parentcontroller.tabbar.subviews.filter({
  type(of: $0).description().isequal("uitabbarbutton")
 })
 guard !tabbarbuttons.isempty else { return }
 let tabbarbutton = tabbarbuttons[controllerindex]
 let swappableimageviews = tabbarbutton.subviews.filter({
  type(of: $0).description().isequal("uitabbarswappableimageview")
 })
 guard !swappableimageviews.isempty else { return }
 let swappableimageview = swappableimageviews.first!
 tabbarbutton.addsubview(wheelview)
 swappableimageview.ishidden = true
 nslayoutconstraint.activate([
  wheelview.widthanchor.constraint(equaltoconstant: 25),
  wheelview.heightanchor.constraint(equaltoconstant: 25),
  wheelview.centerxanchor.constraint(equalto: swappableimageview.centerxanchor),
  wheelview.centeryanchor.constraint(equalto: swappableimageview.centeryanchor)
 ])
 }

上述代码的目的是最终找到对应标签uitabbarbutton内类型为uitabbarswappableimageview的视图并替换它。看上去相当复杂,但是它尽可能地避免出现意外情况导致程序异常。只要以后uikit不更改类型uitabbarbutton和uitabbarswappableimageview,以及他们的包含关系,程序基本不会出现意外,最多导致自定义的视图挂载不上去而已。另外一个好处是firstviewcontroller不用去担心它被添加到tabbarcontroller中的第几个标签上。总体来说这个方法并不完美,但目前似乎也没有更好的方法?

实际上还可以将上面的代码剥离出来,放到名为tabbarinteractable的protocol的默认实现上。有需要的viewcontroller只要宣布遵守该协议,然后在viewdidload方法中调用一个方法即可实现整个替换过程。

只剩下最后一步了,我们知道uitableview是uiscrollview的子类。在它滚动的时候,firsviewcontroller作为uitableview的delegate,同样会收到scrollviewdidscroll方法的调用,所以在这个方法里更新滚动的进度再合适不过了:

// mark: uitableviewdelegate
extension firstviewcontroller: uitableviewdelegate {
 func scrollviewdidscroll(_ scrollview: uiscrollview) {
  //`progress`怎么计算取决于你需求,这里的是为了把`tableview`当前可见区域最底部的2个数字给显示出来。
  let progress = float((scrollview.contentoffset.y + tableview.bounds.height - tableview.rowheight) / scrollview.contentsize.height)
  wheelview.progress = progress
 }
}

把项目跑起来看看吧,你会得到文章开头的效果。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。