首页 > UISegmentedControl自定义效果

UISegmentedControl自定义效果

想实现如图的uisegmentedcontrol效果,没有边框、未选中的时候下划线是浅色的,选中是黑色的实线。请高手指点,谢谢!(如果不用图片的话)


有注释就直接贴代码了


#import <UIKit/UIKit.h>

@protocol CJNaviViewDelegate <NSObject>

- (void)D_selectedTag:(NSInteger)tag;

@end

@interface CJNaviView : UIView


- (instancetype)initWithNumberOfTitles:(NSArray *)titles andFrame:(CGRect)frame delegate:(id<CJNaviViewDelegate>)delegate;

@end

CJNaviView.m
#import "CJNaviView.h"

#define kSelectedColor [UIColor grayColor]
#define kNormalColor   [UIColor lightGrayColor]
// Button进行封装
@interface CJNaviButton:UIButton

@property (nonatomic, weak) UIView *lineView;

@end

@implementation CJNaviButton

- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        CGFloat lineWidth = 3;
        UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, frame.size.height - lineWidth, frame.size.width, lineWidth)];
        // 设置初始状态
        lineView.backgroundColor = kNormalColor;
//        lineView.hidden = YES;
        _lineView = lineView;
        [self setTitleColor:kNormalColor forState:UIControlStateNormal];
        self.titleLabel.font = [UIFont systemFontOfSize:14];
        [self setBackgroundColor:[UIColor whiteColor]];
        [self addSubview:lineView];
        
    }
    return self;
}



@end

@interface CJNaviView()

@property (nonatomic, weak) id<CJNaviViewDelegate> delegate;

@property (nonatomic, strong) CJNaviButton *lastClickButton;
@end

@implementation CJNaviView
/**
 *  init方法
 *
 *  @param titles   title数组 :@[@"选项1",@"选项2"]
 *  @param frame    整个naviView frame
 *  @param delegate 设置代理
 *
 *  @return CJNaviView实例
 */
- (instancetype)initWithNumberOfTitles:(NSArray *)titles andFrame:(CGRect)frame delegate:(id<CJNaviViewDelegate>)delegate{
    if (self = [super initWithFrame:frame]) {
        // 设置代理
        self.delegate = delegate;
        CGFloat buttonWidth = SCREENSIZE.width / titles.count;

        for (int i = 0; i < titles.count; i ++) {
            CJNaviButton *button = [[CJNaviButton alloc] initWithFrame:CGRectMake(i *buttonWidth, 0, buttonWidth, frame.size.height)];
            // 默认选中第一个 设置状态
            if (i == 0) {
                [button setTitleColor:kSelectedColor forState:UIControlStateNormal];
                button.lineView.backgroundColor = kSelectedColor;
                // 保留为上次选择中的button
                _lastClickButton = button;
            }
            // 设置对应的tag
            button.tag = i;
            [button setTitle:titles[i] forState:UIControlStateNormal];
            [button addTarget:self action:@selector(A_choosed:) forControlEvents:UIControlEventTouchUpInside];
            [self addSubview:button];
        }
    }
    
    
    
    return self;
    
}

- (void)A_choosed:(CJNaviButton *)button{
    // 连续点击同一个不响应回调
    if (_lastClickButton != button) {
        // 设置状态
        [button setTitleColor:kSelectedColor forState:UIControlStateNormal];
        button.lineView.backgroundColor = kSelectedColor;
        [_lastClickButton setTitleColor:kNormalColor forState:UIControlStateNormal];
        _lastClickButton.lineView.backgroundColor = kNormalColor;
        _lastClickButton = button;
        // 回调 可用block
        if ([self.delegate respondsToSelector:@selector(D_selectedTag:)]) {
            [self.delegate D_selectedTag:button.tag];
        }
    }
}

系统提供的uisegmentedcontrol可定制内容太少,我在项目中一般自己使用UIView+UIButton实现类似效果

【热门文章】
【热门文章】