IOS控件系列--Swift 滑动标签栏（支持底部下划线毛毛虫滑动效果Object-c实现）

最新推荐文章于 2024-06-25 10:13:28 发布
最新推荐文章于 2024-06-25 10:13:28 发布
阅读量6.1k 收藏 6
点赞数
分类专栏： 滑动导航条毛毛虫效果 滑动导航条下划线跟随效果 文章标签： uiscrollview 滚动导航栏 按钮宽度自适应文本长度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/d06110902002/article/details/78093321
版权

这一编是之前OC版的翻译版本，不过做做了一些新功能的扩展，新功能如下：

1.标签支持自适应文本宽度

2.点击标签文本时，标签文本的滚动列表会跟着一起滑动

3.底部指示线宽度自适应上面标签文本宽度

4.将可滑动的标题栏与不可滑动的标题栏结合到一个接口中

 

设计思路与前一个版本一致，各位道友请移步查看详细的思路，

 

IOS 高仿boss直聘---优雅使用UIButton与UIScrollView打造滑动标签

 

这里只奉上源码与效果图：

效果图如下：

 

源码部分：

 

import UIKit

protocol ScrollNavBarChangeListener {
    
    func onChangeListener(index : Int) -> Void
}


/// 带标签滑动的滚动视图
class ScrollNavBar: UIView {
    
    var delegate : ScrollNavBarChangeListener?
    
    lazy var bottomLine : UIView = UIView.init()
    
    lazy var titleList : Array = Array<String>()
    
    lazy var btnList : Array = Array<UIButton>()
    
    lazy var titleScrollView : UIScrollView = UIScrollView.init()
    
    
    lazy var moveAnimation : CABasicAnimation = {(make) in
    
        let tmpAnim = CABasicAnimation.init(keyPath: "position")
        
        return tmpAnim
    
    }()
    
    var nLastIndex : Int = 0
    
    lazy var segmentScroll : UIScrollView = UIScrollView.init()
    
    var finalPos : CGPoint = CGPoint.zero
    
    var screenSize : CGRect = CGRect.zero
    
    var bIsTitleScroll : Bool = false
    lazy var averageItemWidth : CGFloat = 0
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    
    /// 初始标题栏
    ///
    /// - Parameters:
    ///   - titles: 标题列表
    ///   - isScroll: 标题栏是否可滑动开关,这个开关在这里主要是控制底部下划线宽度与滚动列表横向滚动的尺寸
    
    func initTitle(titles : Array<String>,isScroll : Bool) {
        
        if titles.isEmpty {
           return
        }
        
        self.bIsTitleScroll = isScroll
        
        screenSize = UIScreen.main.bounds
        
        self.titleList = titles
        
        //创建标题滚动视图
        titleScrollView.frame = CGRect.init(x: 0, y: 20, width: screenSize.width, height: 42)
        titleScrollView.alwaysBounceHorizontal = true
        titleScrollView.showsHorizontalScrollIndicator = false
        titleScrollView.backgroundColor = UIColor.init(red: 66.0 / 255.0, green: 133.0 / 255.0, blue: 236.0 / 255.0, alpha: 1.0)
        
        self.addSubview(titleScrollView)
        
        if !isScroll{
            averageItemWidth = titleScrollView.frame.width / CGFloat(titles.count)
        }
        
        
        var offsetX : CGFloat = 0
        var contentSize : CGFloat = 0
        
        for (idx,title) in self.titleList.enumerated(){
            
            if isScroll{
            
                if idx == 0{
                    offsetX = 0
                }else{
                    offsetX = self.btnList[idx - 1].frame.size.width + self.btnList[idx - 1].frame.origin.x
                }
            }
            
            let button : UIButton = UIButton.init(frame:CGRect.init(x: CGFloat(idx) * averageItemWidth, y: 0, width: averageItemWidth, height: 40))
            button.tag = idx
            button.addTarget(self, action: #selector(onClickListener(btn:)), for:.touchUpInside)
            button.setTitle(title, for: UIControlState.normal)
            button.titleLabel?.font = UIFont.systemFont(ofSize: 12)
            button.setTitleColor(UIColor.white, for: .normal)
            
            
            if isScroll{
                
                let tmpWidth : CGFloat = UIButton.getWidthWithTitle(title: title, font: UIFont.systemFont(ofSize: 12)) + 20
                button.frame = CGRect.init(x: offsetX, y: 0, width: tmpWidth, height: 40)
                contentSize += tmpWidth
            }
            
            
            
            titleScrollView.addSubview(button)
            self.btnList.append(button)
            
        }
        if isScroll{
            titleScrollView.contentSize = CGSize.init(width:contentSize, height: 42)
            
        }else{
            titleScrollView.contentSize = CGSize.init(width:CGFloat(titles.count) * averageItemWidth, height: 42)
        }
        
        
        //创建底部线条
        let lineRect : CGRect = CGRect.init(x: 0,
                                            y: 40,
                                        width: isScroll == true ? self.btnList[0].frame.size.width : averageItemWidth,
                                        height: 1.5)
        
        bottomLine.frame = lineRect
        bottomLine.backgroundColor = UIColor.white
        titleScrollView.addSubview(bottomLine)
        
        
        
    }
    
    func initSegmentView(views : Array<Any>) {
        
        if views.count == 0 {
            return
        }
        
        self.segmentScroll = UIScrollView.init(frame:CGRect.init(x: 0, y: 62.5, width: screenSize.width, height: screenSize.height))
        self.segmentScroll.contentSize = CGSize.init(width: screenSize.width * CGFloat(views.count), height: screenSize.height)
        self.segmentScroll.alwaysBounceHorizontal = true
        self.segmentScroll.isPagingEnabled = true
        self.addSubview(self.segmentScroll)
        
        self.segmentScroll.addObserver(self, forKeyPath: "contentOffset", options: [.new,.old], context: nil)
        
        for (idx, layout) in views.enumerated(){
        
            if(idx > views.count){
            
                break
            }
            
            self.segmentScroll.addSubview(layout as! UIView)
        }
        
    }
    

    
    func onClickListener(btn : UIButton?)  {
        
        if (delegate != nil) {
            delegate?.onChangeListener(index: btn!.tag)
        }
        
        self.segmentScroll.scrollRectToVisible(CGRect.init(x: CGFloat(btn!.tag) * self.segmentScroll.frame.width,
                                                           y: self.segmentScroll.frame.origin.y,
                                                       width: self.segmentScroll.frame.width,
                                                      height: self.segmentScroll.frame.height),
                                                    animated: true)
        
        let lastItemWidth : CGFloat = self.btnList[self.nLastIndex].frame.width
        
        let curItemWidth : CGFloat = self.btnList[btn!.tag].frame.width
        
        var fromValue : NSValue?
        
        var toValue : NSValue?
        
        if self.bIsTitleScroll{
            
             fromValue = NSValue.init(cgPoint: CGPoint.init(x: self.btnList[self.nLastIndex].frame.origin.x + 0.5 * lastItemWidth,
                                                                         y: 40))
            
             toValue = NSValue.init(cgPoint: CGPoint.init(x: self.btnList[btn!.tag].frame.origin.x + 0.5 * curItemWidth,
                                                                       y: 40))
        }else{
            
             fromValue = NSValue.init(cgPoint: CGPoint.init(x: CGFloat(self.nLastIndex) * averageItemWidth + 0.5 * averageItemWidth,
                                                                         y: 40))
            
             toValue  = NSValue.init(cgPoint: CGPoint.init(x: CGFloat(btn!.tag) * averageItemWidth + 0.5 * averageItemWidth,
                                                                       y: 40))
        }
       
        
        startLineMoveAnimFromValue(fromValue: fromValue!, toValue: toValue!, duration: 0.3)
        
        titleLabelMoveLogic(curBtnIdx: btn!.tag)
        
        self.nLastIndex = btn!.tag
        
        updateTitleBtnStatus(idx: btn!.tag)
        
        
        guard self.bIsTitleScroll == true else {
            self.finalPos = CGPoint.init(x : CGFloat(btn!.tag) * averageItemWidth + 0.5 * averageItemWidth, y : 40)
            return
        }
        
        self.finalPos = CGPoint.init(x:curItemWidth + 0.5 * curItemWidth, y: 40)
        
        
       
    }
    
    
    /// 处理标签滑动逻辑：
    /// - Parameters:
    ///   - curBtnIdx: 点击的当前标签
    /// 对于可以滑动，需要重新调整可见视图
    func titleLabelMoveLogic(curBtnIdx : Int) {
        
        if !self.bIsTitleScroll {return}
        
        self.titleScrollView.scrollRectToVisible(CGRect.init(x: self.btnList[curBtnIdx].frame.origin.x,
                                                             y: 0,
                                                         width: self.titleScrollView.frame.size.width,
                                                        height: self.titleScrollView.frame.size.height),
                                                      animated: true)
    }
    
    
    func updateTitleBtnStatus(idx : Int){
        
        for(index, button) in self.btnList.enumerated(){
        
            if idx == index {
            
                button.setTitleColor(UIColor.init(red: 118 / 255, green: 198 / 255, blue: 192 / 255, alpha: 1.0), for: .normal)
            }else {
            
                button.setTitleColor(UIColor.white, for: .normal)
            }
        
        }
        
        if self.bIsTitleScroll {        //对于标题栏可以滑动，需要重新调整底部下划线的宽度
            resetBottomLineWidth(idx: idx)
        }
        
    }
    
    
    /// 调整顶部标签的宽度:主要根据点击的按钮宽度来更新标签的宽度
    ///
    /// - Parameter idx: 宽度id 因为按钮id与其在列表中索引一致，所以可以直接用id作索引
    func resetBottomLineWidth(idx : Int) {
        
        let btnWidth : CGFloat = self.btnList[idx].frame.width
        
        bottomLine.frame = CGRect.init(x: bottomLine.frame.origin.x, y: bottomLine.frame.origin.y, width: btnWidth, height: bottomLine.frame.size.height)
        
    }
    
    func startLineMoveAnimFromValue(fromValue : Any, toValue : Any, duration:CFTimeInterval) {
        
        moveAnimation.fromValue = fromValue
        moveAnimation.toValue = toValue
        moveAnimation.delegate = self as CAAnimationDelegate
        moveAnimation.isRemovedOnCompletion = false
        moveAnimation.fillMode = kCAFillModeForwards
        moveAnimation.duration = duration
        
        bottomLine.layer.removeAllAnimations()
        bottomLine.layer.add(moveAnimation, forKey: "onStart")
    }
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        

        let newPos : CGPoint = change?[NSKeyValueChangeKey.newKey] as! CGPoint
        
        self.nLastIndex = Int(newPos.x / self.segmentScroll.frame.width);
        
        self.bottomLine.layer.removeAllAnimations()
        
        if self.bIsTitleScroll{
            
            self.bottomLine.frame = CGRect.init(x: self.btnList[self.nLastIndex].frame.origin.x,
                                                y: self.bottomLine.frame.origin.y,
                                                width: 0,
                                                height: 1.5)
        }else{
        
            var frame : CGRect = self.bottomLine.frame
            frame.origin.x = CGFloat(self.nLastIndex) * averageItemWidth
            self.bottomLine.frame = frame;
        }
        
        
        self.bottomLine.layoutIfNeeded()
        
        titleLabelMoveLogic(curBtnIdx: self.nLastIndex)
        
        updateTitleBtnStatus(idx: self.nLastIndex)
        
    }
    
     deinit{
    
        self.segmentScroll.removeObserver(self, forKeyPath: "contentOffset")
    }
    
}

extension ScrollNavBar : ScrollNavBarChangeListener,CAAnimationDelegate{
    
    func onChangeListener(index: Int) {
        
    }

    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        
        if bottomLine.layer.animationKeys()?.last == "onStart" {
        
            var frame : CGRect = bottomLine.frame
            frame.origin.x = finalPos.x
            bottomLine.frame = frame
        }
    }

    

}

 

 

 

 

 

按钮自适应使用扩展的方式：

 

import UIKit




// MARK: - 本类主要处理按钮随文本宽度自适应
extension UIButton{

    
    /**
     类方法，根据宽度，计算高度
     
     @param width 输入宽度
     @param title 文本内容
     @param font 字体属性
     @return 计算后的高度
     */
    class func getHeightByWidth(width : CGFloat, title : String, font : UIFont) -> CGFloat{
    
        let button : UIButton = UIButton.init(frame: CGRect.init(x: 0, y: 0, width: width, height: 0))
        
        button.setTitle(title, for: .normal)
        button.titleLabel?.font = font
        button.sizeToFit()
        button.titleLabel?.numberOfLines = 0
        
        return button.frame.size.height
    }
    
    
    /**
     根据文本内容计算宽度
     
     @param title 文本内容
     @param font 字体属性
     @return 计算后的宽度
     */
    class func getWidthWithTitle(title : String, font : UIFont) -> CGFloat{
    
//        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 0)];
//        label.text = title;
//        label.font = font;
//        [label sizeToFit];
//        return label.frame.size.width;
        
        
        let button : UIButton = UIButton.init(frame: CGRect.init(x: 0, y: 0, width: 0, height: 0))
        button.setTitle(title, for: .normal)
        button.titleLabel?.font = font
        button.sizeToFit()
        
        return button.frame.size.width
    }
    
}

 

 

 

 

 

 


在vc中使用可滑动方式：

 

import UIKit


class WatchVC: BaseVC {
    
    lazy var topNavBar : ScrollNavBar = {[unowned self]() -> ScrollNavBar in
    
        let tmpView : ScrollNavBar = ScrollNavBar.init(frame: CGRect.init(x : 0,
                                                                          y : 0,
                                                                      width : self.getScreenSize().size.width,
                                                                     height : self.getScreenSize().size.height))
        
        return tmpView
    
    }()
    
    override func viewDidLoad() {
        
        initView()
    }
    
    func initView(){
    
        let titles : [String] = ["视频","资讯","趣味图集","小说","娱乐","热点","体育",
                                 "财经","军事","汽车","时尚"]
        topNavBar.initTitle(titles: titles,isScroll: true)
        
        self.view.addSubview(topNavBar)
        
        let view1 : UIView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: self.getScreenSize().size.width, height: self.getScreenSize().size.height))
        view1.backgroundColor = UIColor.blue
        
        let view2 : UIView = UIView.init(frame: CGRect.init(x: self.getScreenSize().size.width, y: 0, width: self.getScreenSize().size.width, height: self.getScreenSize().size.height))
        view2.backgroundColor = UIColor.orange
        
        let view3 : UIView = UIView.init(frame: CGRect.init(x: self.getScreenSize().size.width * 2, y: 0, width: self.getScreenSize().size.width, height: self.getScreenSize().size.height))
        view3.backgroundColor = UIColor.yellow
        
        let view4 : UIView = UIView.init(frame: CGRect.init(x: self.getScreenSize().size.width * 3, y: 0, width: self.getScreenSize().size.width, height: self.getScreenSize().size.height))
        view4.backgroundColor = UIColor.blue
        
        let views : [UIView] = [view1,view2,view3,view4]
        
        topNavBar.initSegmentView(views: views)
        
        
        
    }
}

 

 底部索引线毛毛虫实现效果图如下：

.h文件

//
//  ScrollNavBar.h
//  BossJob
//
//  Created by 刘小兵 on 2017/8/29.
//  Copyright © 2017年 刘小兵. All rights reserved.
//

#import <UIKit/UIKit.h>



/**
 滑动导航栏点击时切换页面监听协议接口
 */
@protocol ScrollNavBarChangeListener <NSObject>

@optional
-(void) onChangeListener:(NSInteger) index;

@end

/**
 滑动的导航条
 */
@interface ScrollNavBar : UIView<CAAnimationDelegate>

// 滑动导航栏点击时切换页面监听事件
@property(nonatomic,weak) id<ScrollNavBarChangeListener> delegate;


@property(nonatomic,strong) UIView* bottomLine;

@property(nonatomic,strong) NSMutableArray* titleList;
@property(nonatomic,strong) NSMutableArray* btnList;

@property(nonatomic,assign) double itemWidth;

@property(nonatomic,strong) CABasicAnimation *moveAnimation;

@property(nonatomic,assign) NSInteger nCurIndex;

@property(nonatomic,strong) UIScrollView* segmentScroll;

@property(nonatomic,assign) CGPoint finalPos;    //点击滑动条的标签，最终的位置



/**
 初始化标题
 
 @param titles 标题列表
 */
-(void)iniTitles:(NSMutableArray*) titles;

/**
 添加中间滚动视图到列表中，这个视图的个数应该与标题一一对应，超过的部分直接忽略

 @param views 中间视图容器
 */
-(void)initSegmentView:(NSMutableArray*) views;


/**
 更新标题栏状态
 
 @param idx 更新的索引
 */
-(void)updateTitleBtnStatus:(NSInteger) idx;


/**
 注册广播通知
 */
-(void)registerBrodcast;

@end

.m文件：

//
//  ScrollNavBar.m
//  BossJob
//
//  Created by 刘小兵 on 2017/8/29.
//  Copyright © 2017年 刘小兵. All rights reserved.
//

#import "ScrollNavBar.h"
#import "Constants.h"

#define   PageVCWidth   [UIScreen mainScreen].bounds.size.width

@implementation ScrollNavBar

-(instancetype) initWithFrame:(CGRect)frame{
    
    if(self = [super initWithFrame:frame]){
        
        [self initAttr];
    }
    return self;
    
}

-(void) initAttr{
    
    self.nCurIndex = 0;
    self.btnList = [NSMutableArray array];
}

-(void)iniTitles:(NSMutableArray*) titles{
    
    self.titleList = titles;
    
    self.itemWidth = SCREEN_WIDTH / [self.titleList count];
    
    [self.titleList enumerateObjectsUsingBlock:^(NSString* title, NSUInteger idx, BOOL * _Nonnull stop) {
        UIButton* button = [[UIButton alloc] initWithFrame:CGRectMake(idx * self.itemWidth, 0, self.itemWidth, 40.0)];
        button.backgroundColor = [UIColor whiteColor];
        button.tag = idx;
        [button addTarget:self action:@selector(onClickListener:) forControlEvents:UIControlEventTouchUpInside];
        [button setTitle:title forState:UIControlStateNormal];
        button.titleLabel.font = [UIFont systemFontOfSize:12];
        [button setTitleColor:[UIColor colorWithRed:119.0 / 255.0 green:119.0 / 255.0 blue:119.0 / 255.0 alpha:1.0] forState:UIControlStateNormal];
        [self addSubview:button];
        [self.btnList  addObject:button];
        
    }];
    
    //创建底部线条
    UIView* lineView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 40.0, SCREEN_WIDTH, 0.5f)];
    lineView.backgroundColor = [UIColor colorWithRed:232.0 / 255.0 green:232.0 / 255.0 blue:233.0 / 255.0 alpha:1.0];
    [self addSubview:lineView];
    
    self.bottomLine = [[UIView alloc] initWithFrame:CGRectMake((SCREEN_WIDTH / 3 - 10) / 2, 40.0, 10, 1.5f)];
    self.bottomLine.backgroundColor = [UIColor colorWithRed:118.0f / 255.0 green:198.f / 255.0 blue:192.0f / 255.0 alpha:1.0];
    [self addSubview:self.bottomLine];
    
//    //创建中间的滑动视图
//    self.segmentScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 42.5, SCREEN_WIDTH, SCREEN_HEIGHT)];
//    self.segmentScroll.contentSize = CGSizeMake(SCREEN_WIDTH * [self.titleList count], SCREEN_HEIGHT);
//    self.segmentScroll.alwaysBounceHorizontal = YES;
//    self.segmentScroll.pagingEnabled = YES;
//    [self addSubview:self.segmentScroll];
//    
//    //使用kvo来监听uiscroll的滑动事件，代替它的协议接口
//    //添加注册实现contentOffset监听
//    [self.segmentScroll addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
//
//    
//    //测试视图
//    UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, SCREEN_WIDTH, SCREEN_HEIGHT)];
//    view1.backgroundColor = [UIColor greenColor];
//    [self.segmentScroll addSubview:view1];
//    
//    UIView* view2 = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH, 0.0, SCREEN_WIDTH, SCREEN_HEIGHT)];
//    view2.backgroundColor = [UIColor blueColor];
//    [self.segmentScroll addSubview:view2];
//    
//    UIView* view3 = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH * 2, 0.0, SCREEN_WIDTH, SCREEN_HEIGHT)];
//    view3.backgroundColor = [UIColor greenColor];
//    [self.segmentScroll addSubview:view3];

}


//本接口主要，创建中间滚动视图
-(void)initSegmentView:(NSMutableArray*) views{

    if([views count] == 0 ) return;
    //创建中间的滑动视图
    self.segmentScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0, 42.5, SCREEN_WIDTH, SCREEN_HEIGHT)];
    self.segmentScroll.contentSize = CGSizeMake(SCREEN_WIDTH * [self.titleList count], SCREEN_HEIGHT);
    self.segmentScroll.alwaysBounceHorizontal = YES;
    self.segmentScroll.pagingEnabled = YES;
    [self addSubview:self.segmentScroll];
    
    //使用kvo来监听uiscroll的滑动事件，代替它的协议接口
    //添加注册实现contentOffset监听
    [self.segmentScroll addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
    
    [views enumerateObjectsUsingBlock:^(UIView* layout, NSUInteger idx, BOOL * _Nonnull stop) {
        
        if(idx > [views count]) *stop = true;
        
        [self.segmentScroll addSubview:layout];
        
    }];


}

-(void)onClickListener:(UIButton*) button{
    
    if(self.delegate != nil){
        [self.delegate onChangeListener:button.tag];
    }
    
    [self.segmentScroll scrollRectToVisible:CGRectMake(SCREEN_WIDTH * button.tag, 42.5, SCREEN_WIDTH, SCREEN_HEIGHT) animated:NO];
    
    
    NSValue* fromValue = [NSValue valueWithCGPoint:CGPointMake(self.nCurIndex * self.itemWidth + 0.5 * self.itemWidth,40.0)];
    NSValue* toValue = [NSValue valueWithCGPoint:CGPointMake(button.tag * self.itemWidth + 0.5 * self.itemWidth, 40.0)];
    [self startLineMoveAnimFromValue:fromValue toValue:toValue duration:0.3];

    self.nCurIndex = button.tag;
    
    [self updateTitleBtnStatus:button.tag];
    
    self.finalPos = CGPointMake(button.tag * self.itemWidth + 0.5 * self.itemWidth, 40.0);
}

-(void) updateTitleBtnStatus:(NSInteger)idx{

    
    [self.btnList enumerateObjectsUsingBlock:^(UIButton* button, NSUInteger index, BOOL * _Nonnull stop) {
       
        if(idx == index){
            [button setTitleColor:[UIColor colorWithRed:118.0f / 255.0 green:198.f / 255.0 blue:192.0f / 255.0 alpha:1.0] forState:UIControlStateNormal];
            
        }else{
            [button setTitleColor:[UIColor colorWithRed:119.0 / 255.0 green:119.0 / 255.0 blue:119.0 / 255.0 alpha:1.0] forState:UIControlStateNormal];
        }

    }];
}

-(void) updateBottomLine:(CGFloat) scale{
    
}

//private method---线条移动启动动画
-(void) startLineMoveAnimFromValue:(id) fromValue toValue:(id) toValue  duration:(CFTimeInterval) time{
    
    self.moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    self.moveAnimation.fromValue = fromValue;
    self.moveAnimation.toValue = toValue;
    self.moveAnimation.delegate = self;
    self.moveAnimation.removedOnCompletion = NO;
    self.moveAnimation.fillMode = kCAFillModeForwards;
    self.moveAnimation.duration = time;
    
    [self.bottomLine.layer removeAllAnimations];
    [self.bottomLine.layer addAnimation:self.moveAnimation forKey:@"onStart"];
   

}

-(void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    
       if([self.bottomLine.layer.animationKeys.lastObject isEqualToString:@"onStart"]){
        
//           CGRect frame = self.bottomLine.frame;
//           frame.origin.x = self.finalPos.x;
//           self.bottomLine.frame = frame;
           
    }
}




//-------------------kvo 实现观察主题 ----------------
//对于滑动翻页使用kvo监听机制
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{
    
    CGPoint offset = [change[NSKeyValueChangeNewKey] CGPointValue];
    CGPoint oldOffset = [change[NSKeyValueChangeOldKey] CGPointValue];
    CGFloat oldOffsetX = oldOffset.x;
    CGFloat deltaOfOffsetX = offset.x - oldOffsetX;

    
    self.nCurIndex = deltaOfOffsetX / SCREEN_WIDTH;
    [self updateTitleBtnStatus:self.nCurIndex];
    
    //下面为下划线跟随弹性  效果
    CGFloat contentOffsetX = offset.x;
    CGFloat sWidth =  SCREEN_WIDTH;
    CGFloat content_X = (offset.x / sWidth);
    NSArray *arr = [[NSString stringWithFormat:@"%f",content_X] componentsSeparatedByString:@"."];
    int num = [arr[0] intValue]; //找到滑动的索引

    CGFloat scale = content_X - num;
    int selectIndex = deltaOfOffsetX / SCREEN_WIDTH;
    UIButton*_btnRight;
    UIButton*_btnLeft;
    // 拖拽
    if (contentOffsetX <= oldOffsetX ){
        selectIndex++;
        if (selectIndex - 1 < 0 || selectIndex > self.btnList.count - 1) {
            return;
        }
        _btnRight = [self.btnList objectAtIndex:selectIndex];
        _btnLeft = [self.btnList objectAtIndex:selectIndex - 1];
    } else if (contentOffsetX > oldOffsetX ){
        if (selectIndex + 1 > self.btnList.count - 1) {
                   return;
               }
        _btnRight = [self.btnList objectAtIndex:selectIndex + 1];
        _btnLeft = [self.btnList objectAtIndex:selectIndex];

    }
    if (!_btnRight || !_btnLeft) {
           return;
       }

    CGRect rect = self.bottomLine.frame;
    if (scale < 0.5 ) {
        rect.size.width = 10 + ( _btnRight.center.x-_btnLeft.center.x) * scale*2;
        rect.origin.x = _btnLeft.center.x -10/2;
    }else if(scale >= 0.5 ){
        rect.size.width =  10+(_btnRight.center.x-_btnLeft.center.x) * (1-scale)*2;
        rect.origin.x = _btnLeft.center.x +  2*(scale-0.5)*(_btnRight.center.x - _btnLeft.center.x)-10/2;
    }
    [self.bottomLine.layer removeAllAnimations];
    self.bottomLine.frame = rect;


    
//    [self.bottomLine.layer removeAllAnimations];
//    CGRect frame = self.bottomLine.frame;
//    frame.origin.x = deltaOfOffsetX / SCREEN_WIDTH * self.itemWidth;
//    self.bottomLine.frame = frame;
//    [self.bottomLine layoutIfNeeded];
//
//    self.nCurIndex = deltaOfOffsetX / SCREEN_WIDTH;
//    [self updateTitleBtnStatus:self.nCurIndex];
    
}

-(void)dealloc{
    [self.segmentScroll removeObserver:self forKeyPath:@"contentOffset" context:nil];
    
    [[NSNotificationCenter defaultCenter] removeObserver:self name:@"updateLabelStatus" object:nil];

}
//-------------------kvo 实现观察主题 end----------------


//处理在其他页面不方便更新指示线与标签的状态
-(void)registerBrodcast{
    
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(updateLabelStatus:) name:@"updateLabelStatus" object:nil];
}

-(void) updateLabelStatus:(NSNotification *)msg{
    
    
    NSDictionary* tmpInfo = [msg object];
    UIScrollView* scroll = (UIScrollView*)[tmpInfo objectForKey:@"scroll"];
    
    
//    [self.bottomLine.layer removeAllAnimations];
//    CGRect frame = self.bottomLine.frame;
//    frame.origin.x = scroll.contentOffset.x / SCREEN_WIDTH * self.itemWidth;
//    self.bottomLine.frame = frame;
//    [self.bottomLine layoutIfNeeded];
    
    self.nCurIndex = scroll.contentOffset.x / SCREEN_WIDTH;
    [self updateTitleBtnStatus:self.nCurIndex];
}

@end

使用方式：

//创建互动视图
    UIView* interactBgView = [[UIView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH, 0.0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    [self.segmentScroll addSubview:interactBgView];
    interactBgView.backgroundColor = [UIColor whiteColor];
    
    
    ScrollNavBar* scrollNavBarView = [[ScrollNavBar alloc] initWithFrame:CGRectMake(0.0f, 0.0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    NSMutableArray* title = [NSMutableArray arrayWithObjects:@"对我感兴趣",@"看过我",@"新职位", nil];
    [scrollNavBarView iniTitles:title];
    
    //创建中间滚动视图
    InterestedInMeView* interestedView = [[InterestedInMeView alloc] initWithFrame:CGRectMake(0.0f, 0.0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    interestedView.separatorStyle = UITableViewCellSeparatorStyleNone;
    
    //看过我的
    HasCheckMeView* chkMeView = [[HasCheckMeView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH, 0.0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    chkMeView.separatorInset = UIEdgeInsetsMake(0,10,0,10);  //top left right down
    chkMeView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];  //删除底部多余行，及分割线
    
    //新职位
    NewJobView* newJobView = [[NewJobView alloc] initWithFrame:CGRectMake(SCREEN_WIDTH * 2, 0.0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    newJobView.separatorInset = UIEdgeInsetsMake(0,10,0,10);  //top left right down
    newJobView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];  //删除底部多余行，及分割线
    
    NSMutableArray* layout = [NSMutableArray arrayWithObjects:interestedView,chkMeView,newJobView,nil];
    [scrollNavBarView initSegmentView:layout];
    
    [interactBgView addSubview:scrollNavBarView];

项目全部源码在项目中：模仿Boss直聘（github）

喜欢的给一个星星

劉胡來
关注
专栏目录
SwiftUI TabView组件之实现可滚动的标签栏
iCloudEnd的博客
04-19 741
实战需求 SwiftUI TabView组件之实现可滚动的标签栏 本文价值与收获 看完本文后，您将能够作出下面的界面 看完本文您将掌握的技能 创建页面视图： 要创建页面视图，我们将TabView与PageTabViewStyle一起使用。我们将跟踪可见选项卡到变量，以便我们可以将页面操作同步到可滚动选项卡，反之亦然。 struct PageView: View { @Binding var selection: Int let dataModel: [String] var b
MHTabView - 基于swift实现的顶部滚动标签栏
RemiliaScarlet的博客
04-27 1622
上班期间闲来无事，想摸鱼看番但是又害怕项目经理的制裁，那不如给自己找点事情做。 于是开始封装了自己的第一个组件。 目录简介安装使用示例unscrollablescrollableautoscrollableautoUnscrollableother尾声作者信息 简介 一个简单的基于swift实现的顶部滚动标签栏，提供了四种不同的样式选择。 安装 可以直接通过我的github项目地址下载源码导入工...
iOS中左右滑动切换，滑动标签页导航的设计思路
热门推荐
文明的博客
01-17 1万+
iOS中左右滑动切换，滑动标签页导航的设计思路iOS开发中经常（几乎每个APP都含有这样的页面吧，几乎！UI设计师也都是这样抄来抄去…..）demo见Github：https://github.com/zhengwenming/SliderTab估计很多人都会说，直接用第三方就可以了，很多人封装过，很好用。而且这样的页面用第三方2分钟搞定，省时省力。 笔者也曾用过第三方，但是屡屡出
AI 编程探索- iOS动态标签控件
最新发布
lyh1083908486的博客
06-25 469
到这里我们通过AI快速实现了动态标签控件的核心部分，只需再稍微调整一下label的样式就能完美实现我们的需求。AI帮我们写了大部分的可用的代码，虽然不能完全采用，但是确实提升了我们的开发效率，代码质量也是很不错的，我们要做的就是根据自己的需求进行修改一下。后面继续在实战中探索如何高效使用AI来帮助我们开发和学习。
ios-顶部滑动标签.zip
07-11
代码在这： https://github.com/wcxdell/CXSlideBar.git 使用非常简单，下边要做什么动作可以使用代码提供的代理方法。 看一下头文件就行
iOS 滑动标签页导航 DLSlideView.zip
09-17
iOS 滑动标签页导航 DLSlideView ,DLSlideView 是 iOS 华东标签页导航，可自定义标签页，可自定义内存缓存。DLSlide...
iOS - Object - C 滑动图片验证实现原理
03-07
iOS 滑动图片实现验证。实现原理：自定义实现、开源项目原理、三方平台集成。
IOS视频教程下载Object-C视频swift视频下载
07-01
根据提供的文件信息，我们可以从标题、描述以及标签中提炼出几个关键知识点，这些知识点主要集中在iOS开发领域，涉及Objective-C和Swift两种编程语言。接下来，我们将对这些知识点进行详细的阐述。 ### iOS 开发...
swift-iOS侧滑控件支持左右滑动的侧滑菜单可配置单侧滑动
08-15
Swift-iOS侧滑控件，如描述中提到的支持左右滑动的侧滑菜单，是实现这种常见交互模式的有效工具。这种控件允许用户通过在主屏幕内容上进行左滑或右滑手势来展示隐藏的侧边菜单，为用户提供快捷的导航选项。 侧滑...
swift-DividingRuler-自定义滑动刻度尺滑动标尺实现简单所有参数可完全自定义
08-14
本项目“swift-DividingRuler-自定义滑动刻度尺滑动标尺实现简单所有参数可完全自定义”正是这样一个例子，它提供了一个可高度定制的滑动刻度尺控件。下面我们将深入探讨这个项目的实现原理和关键知识点。 1. **...
swift-SwipeViewController一款支持选项卡滑动切换视图的iOS类库
08-15
在iOS应用中，这样的功能常见于许多应用的底部导航栏，用户可以通过左右滑动在不同的内容区域之间切换，提升用户体验。Swift-SwipeViewController通过其强大的自定义性和灵活性，使得开发人员可以轻松地在项目中实现...
分享iOS一个滑动切换标签的Demo
08-28
分享iOS一个滑动切换标签的Demo
swift-LYSTagView标签视图
08-15
LYSTagView 标签视图
swift-控制器滑动多选指示器
08-15
控制器滑动多选，指示器
swift版仿映客中间凸出tabBar，上下滑动时隐藏或显示导航栏及标签栏
06-19
网上基本上都是OC版的，我这里写了个swift版的。
IOS 高仿boss直聘---优雅使用UIButton与UIScrollView打造滑动标签
刘胡来
08-31 1万+
设计初衷：本工具主要来自俺个人练手小项目，仿boss直聘。文末有源码地址 先来看设计的效果： 分析： 1.控件选择分析：顶部为3个标签并且每个标签都有点击事件，控件的选择上有很多种。一般都选择UiButton ，因为这个控件可以直接为其绑定点击事件，换成其他的控件，就需要为其添加手势操作了。 2.控件数量的分析：对于这个一个控件，首先应满足扩展性，比如说，在
推荐开源项目：SlidingTabView - 简洁而强大的SwiftUI滑动标签视图
gitblog_00069的博客
05-29 312
推荐开源项目：SlidingTabView - 简洁而强大的SwiftUI滑动标签视图 项目地址:https://gitcode.com/QuynhNguyen/SlidingTabView 在iOS应用开发中，滑动标签栏是常见的导航元素，它能帮助用户在多个子视图间轻松切换。今天，我们向您推荐一个名为SlidingTabView的开源项目，它是一个基于最新SwiftUI构建的，极具灵活性和自定义...
iOS --- UITabbarController左右滑动切换标签页
12-18 3221
UITabbarController左右滑动切换标签页
iOS 动态显示标签
长沙火山
02-14 1727
解决问题1、根据标签长度显示； 2、多行显示标签；代码片段：- (void)viewDidLoad { [super viewDidLoad]; NSArray *arr = @[@"JAVA",@"C",@"C++",@"PHP",@"Object-C",@"Swift",@"JAVAWEB",@"C#",@"MYSQL"]; NSInteger x = 10; N
iOS代码规范：设计与构建优秀Objective-C/Swift实践
2. Swift集成：考虑到Swift的流行，书中还讨论了如何在Objective-C项目中与Swift代码进行无缝协作。 3. 代码风格和命名约定：探讨了代码组织的最佳实践，如模块化（如代码块和pragma指令）、避免编译错误的策略，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值