iOS OC UISegmentedControl demo

#import "YKMyWalletAllViewController.h"//全部
#import "YKMyWalletIncomeViewController.h"//收入
#import "YKMyWalletDisburseViewController.h"//支出



@interface YKMyWalletDetailsView () <UIScrollViewDelegate>


@property (strong, nonatomic) UISegmentedControl *segmentedControl;
@property (strong, nonatomic) UIScrollView *scrollView;
@property (strong, nonatomic) UIView *indicatorView;
@property (strong, nonatomic) NSArray *viewControllers;

@end

@implementation YKMyWalletDetailsView

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        [self setupSegmentedControl];
        [self setupScrollView];
        [self setupPages];
        [self setupIndicator];
    }
    return self;
}
// 创建纯色图片的方法
- (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size {
    CGRect rect = CGRectMake(0, 0, size.width, size.height);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context, color.CGColor);
    CGContextFillRect(context, rect);
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return image;
}

- (void)setupSegmentedControl {
    
//    self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"全部", @"收入", @"支出"]];
  
      self.segmentedControl.frame = CGRectMake(0, 100,ZXJ_SCREEN_W, 40);
       
       // 设置不同状态下的背景图片
       UIImage *selectedBgImage = [self imageWithColor:[UIColor redColor]
                                                 size:CGSizeMake(1, 40)]; // 1像素宽度自动平铺
       UIImage *normalBgImage = [self imageWithColor:[UIColor greenColor]
                                               size:CGSizeMake(1, 40)];
       
       // 配置状态样式
       [self.segmentedControl setBackgroundImage:normalBgImage
                                       forState:UIControlStateNormal
                                     barMetrics:UIBarMetricsDefault];
       [self.segmentedControl setBackgroundImage:selectedBgImage
                                       forState:UIControlStateSelected
                                     barMetrics:UIBarMetricsDefault];
       
       // 设置分割线样式
       [self.segmentedControl setDividerImage:[UIImage new]
                          forLeftSegmentState:UIControlStateNormal
                            rightSegmentState:UIControlStateNormal
                                   barMetrics:UIBarMetricsDefault];
       
       // 文字样式配置
       [self.segmentedControl setTitleTextAttributes:@{
           NSForegroundColorAttributeName: [UIColor whiteColor], // 白色文字
           NSFontAttributeName: [UIFont systemFontOfSize:16 weight:UIFontWeightMedium]
       } forState:UIControlStateNormal];
       
       [self.segmentedControl setTitleTextAttributes:@{
           NSForegroundColorAttributeName: [UIColor whiteColor], // 选中状态保持白字
           NSFontAttributeName: [UIFont systemFontOfSize:16 weight:UIFontWeightBold]
       } forState:UIControlStateSelected];
       
       self.segmentedControl.tintColor = [UIColor clearColor]; // 移除默认高亮
       self.segmentedControl.selectedSegmentIndex = 0;
       
       [self.segmentedControl addTarget:self
                                action:@selector(segmentChanged:)
                      forControlEvents:UIControlEventValueChanged];
       [self addSubview:self.segmentedControl];
}

- (void)setupScrollView {
    self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 150,ZXJ_SCREEN_W, 300)];
    self.scrollView.delegate = self;
    self.scrollView.pagingEnabled = YES;
    self.scrollView.contentSize = CGSizeMake(ZXJ_SCREEN_W * 3, 0);
    self.scrollView.showsHorizontalScrollIndicator = NO;
    [self addSubview:self.scrollView];
}

- (void)setupPages {
    YKMyWalletAllViewController *pageA = [YKMyWalletAllViewController new];
    pageA.view.backgroundColor = [UIColor systemRedColor];
    
    YKMyWalletIncomeViewController *pageB = [YKMyWalletIncomeViewController new];
    pageB.view.backgroundColor = [UIColor systemGreenColor];
    
    YKMyWalletDisburseViewController *pageC = [YKMyWalletDisburseViewController new];
    pageC.view.backgroundColor = [UIColor systemBlueColor];
    
    self.viewControllers = @[pageA, pageB, pageC];
    
    for (int i = 0; i < self.viewControllers.count; i++) {
        UIViewController *vc = self.viewControllers[i];
        vc.view.frame = CGRectMake(i * ZXJ_SCREEN_W, 0, ZXJ_SCREEN_W, self.scrollView.frame.size.height);
        [self.scrollView addSubview:vc.view];
    }
}

- (void)setupIndicator {
    // 自定义紫色指示条(宽度36)
       self.indicatorView = [[UIView alloc] initWithFrame:CGRectMake(0, 138, 36, 3)];
       self.indicatorView.backgroundColor = [UIColor purpleColor];
       self.indicatorView.layer.cornerRadius = 1.5;
       [self addSubview:self.indicatorView];
       
       // 初始位置
       [self updateIndicatorPosition:0];
}

- (void)segmentChanged:(UISegmentedControl *)sender {
    NSInteger index = sender.selectedSegmentIndex;
    [UIView animateWithDuration:0.3 animations:^{
        self.scrollView.contentOffset = CGPointMake(index * ZXJ_SCREEN_W, 0);
        [self updateIndicatorPosition:index];
    }];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    // 实时更新指示条位置
    CGFloat offsetX = scrollView.contentOffset.x;
    CGFloat progress = offsetX / scrollView.frame.size.width;
    [self updateIndicatorPosition:progress];
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    NSInteger index = scrollView.contentOffset.x / scrollView.frame.size.width;
    self.segmentedControl.selectedSegmentIndex = index;
}

- (void)updateIndicatorPosition:(CGFloat)progress {
    CGFloat segmentWidth = ZXJ_SCREEN_W / 3;
        
        // 计算指示条居中位置
        CGFloat basePosition = (segmentWidth - 36) / 2;
        CGFloat xPosition = basePosition + progress * segmentWidth;
        
        // 边界检查(限制在0到最大有效范围内)
        CGFloat maxX = 2 * segmentWidth + basePosition;
        xPosition = MAX(0, MIN(xPosition, maxX));
        
        [UIView animateWithDuration:0.1 animations:^{
            CGRect frame = self.indicatorView.frame;
            frame.origin.x = xPosition;
            self.indicatorView.frame = frame;
        }];
}
#pragma mark - Setter && Getter 懒加载

-(UISegmentedControl *)segmentedControl{
    if (!_segmentedControl) {
        //设置标签单元数组,内容全为文字
//        NSArray *items = @[@"图片",@"视频",@"音乐",@"美食"];
        NSArray *items = @[@"全部", @"收入", @"支出"];
        //设置标签单元数组,内容全为图像
//        NSArray *images = @[[UIImage imageNamed:@"1.png"],[UIImage imageNamed:@"2.png"],[UIImage imageNamed:@"3.png"]];
        _segmentedControl = [[UISegmentedControl alloc]initWithItems:items]; //用文字数组初始化
       
    }
    return _segmentedControl;

}

 

posted on 2025-03-28 17:34  高彰  阅读(44)  评论(0)    收藏  举报

导航