自定义导航或tab标签

技术成长之路

Posted by DM on November 18, 2019

序言

在iOS项目开发时,我们经常用到的tab标签,可以用UISegmentedControl分段控件来实现,但由于UISegmentedControl的样式有限,往往不能满足我们项目多态的自定义样式。而自定义的tab可以根据自己项目的需求来设计。接下来就会根据我个人的项目需求用一些简单的方式来实现。如有欠缺,望各位积极提意见。

实现效果

实现功能

1.三种常用样式
2.三种主题色
3.UICollectionView联动
4.标签滑动居中 ## 实现过程

1.通过二维数组形式来设定各个不同间距值

```
/*
 根据设计来设定每个大小  1个以上和7个以下的标题按钮宽高都会不同
 sizeArr 依次存储按钮宽 、 按钮高、 按钮下划线距底部间距
 */
NSArray *sizeArr = @[@[@200.0f,@100.0f,@13.6f],
                     @[@170.0f,@96.0f,@12.9f],
                     @[@158.0f,@90.0f,@12.0f],
                     @[@150.0f,@80.0f,@11.6f],
                     @[@114.0f,@72.0f,@9.1f],
                     ];
if(_dNewNavArray.count>1){
    NSInteger count = (_dNewNavArray.count<7?_dNewNavArray.count:6)-2;//取坐标,大于7个取最后的坐标
    _minTitleBtnWidth =[ sizeArr[count][0] floatValue]/2.0;
    _minTitleBtnHeight =[ sizeArr[count][1] floatValue]/2.0;
    _lineMargin = [ sizeArr[count][2] floatValue]/2.0+3;
    _tabHeight = _minTitleBtnHeight;
    
}```

2.点击标签,通过偏移量来计算当前index,通过index来设置UICollectionview的偏移量,反之通过collection的滑动代理实现原理相同

#pragma mark - 标题按钮和横线居中偏移
(void)settleTitleButton:(UIButton *)button
{
  // 标题
  // 这个偏移量是相对于scrollview的content frame原点的相对对标
  CGFloat deltaX = button.center.x - (self.frame.size.width) / 2;
  // 设置偏移量,记住这段算法
  if (deltaX < 0)
  {
      // 最左边
      deltaX = 0;
  }
  CGFloat maxDeltaX = _navScrollView.contentSize.width - (self.frame.size.width);
  if (deltaX > maxDeltaX)
  {
      // 最右边不能超范围
      deltaX = maxDeltaX;
  }
  [_navScrollView setContentOffset:CGPointMake(deltaX, 0) animated:YES];
  }```

代码比较简单,但重在实现思路:通过按钮自定义样式来满足反反复复的需求变化,通过scrollview代理来实现两个scroll联动滑动。 希望能给需要的人一个思路。不喜勿喷。

本文 demo